How to change open graph meta tags to share custom content on social media?

Question

I want to add some social media share buttons on my website. Using Open Graph meta tags would work for pages that represent one material (for instance a post on my website). But the problem is, I have a gallery page which contains multiple pictures, and I want to add share buttons for each picture. If I use Javascript to change the meta tags according to which picture the user wants to share, would--for instance--Facebook's Crawler catch the newly generated tags or the original tags when the page is loaded?

I don't want to use PHP to generate the meta tags because everything in the gallery is being handled in Javascript and I can't refresh the page every time user selects one of the pictures to be shown.

What is the successful approach to this problem?

Answer 1

This is an excellent question. I've been through this before and i know how awful this can be.

So, first you need to registrate a facebook App, into developers.facebook.com, to have you own app Secret and App ID.

Second, you need to init Facebook Javascript SDK

window.fbAsyncInit = function() {
    FB.init({
        appId: YOUR_APP_ID,
        channelUrl: YOUR_CHANNEL_URL,
        status: true,
        xfbml: true
    });
};

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Third you need to create a function or a method that dynamically call FB UI (which is the dialog box that will appear ass the user click in the share button) with your image data.

function shareMyImage(data) {
    FB.ui(

      {
        method: 'feed',
        name: 'Facebook Dialogs',
        link: data.link,
        picture: data.image,
        caption: data.caption,
        description: data.description
      },
      function(response) {
        if (response && response.post_id) {
          alert('Post was published.');
        } else {
          alert('Post was not published.');
        }
      }
    );
} 

And last, but not least, you need to call your function

shareMyImage({
    link: 'http://link-to-your-page.com',
    image: 'http://link-to-your-page.com/your-image.jpg',
    caption: 'Reference info'
    description: 'Description to your image'
});

---

Dynamic Structure

Obviously, the above 'share info' have to be dynamic as well, so you can use data attributes to pass this info easily

<span class="button--share" data-link="THE LINK" data-image="THE IMAGE" data-caption="THE CAPTION" data-description="THE DESCRIPTION">Share</span>

So, you can use jQuery .data() to parse the info and directly run your method.

$('.button--share').on('click', function(){
    var data = $(this).data();
    shareMyImage(data);
})