Multiple Facebook Share Buttons On Same Page

Question

I have a web page containing a number of images. Each image has a Facebook share button on it and a little description. What I want to do is, when the user clicks on the share button, the corresponding image and the description of that particular image is shared on Facebook.

I have been looking at Facebook's documentation, and what I understand so far is that Facebook takes the link of the page that you want to share and selects one image from it, that is displayed on the shared post.

Is there a way that I could specify the image's URL and the text of the description in the shared post?

Actually you cannot do it using share button. There was a similar question: http://stackoverflow.com/questions/22877149/creating-a-facebook-share-button-with-customized-url-title-and-image — cesare, Dec 02 '15 at 23:04

score 0 · Answer 1 · answered Dec 03 '15 at 13:00

In the share url you can specify the div of the image you want to share and create a EventListener for each share button.

//add event listener to the first share button
document.getElementById('share_btn1').addEventListener('click', function() {
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
            object:'http://yourdomain.com/share.php#div_img1',
        })
    }, 
    function(response){
      // Debug response (optional)
      console.log(response);
    });

}, false);


//add event listener to the second share button
document.getElementById('share_btn2').addEventListener('click', function() {
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
            object:'http://yourdomain.com/share.php#div_img2',
        })
    }, 
    function(response){
      // Debug response (optional)
      console.log(response);
    });

}, false);

Multiple Facebook Share Buttons On Same Page

1 Answers1