FB.ui share set the title, message and image

Question

I'm using FB.ui to share a page to Facebook and I'm trying to set the title and message (image if possible but not important). I have this in my site header

<meta property="og:title" content="Your title here" />
<meta property="og:description" content="your description here" />

And my javascript code is

FB.ui({
      method: 'share',
      href: document.URL,
    }, function(response){

        //TODO Proper response handling
        log(response); 
        if (typeof response != 'undefined') {
            alert('Thanks for sharing');
        }
    }); 

From what I've read I just need to og:titleand og:description to set the title and message, but that doesn't seem to work.

Current the title is either coming from part of the part title, or an alt tag on an image, and the message is being populated from just a random paragraph tag.

Answer 1

I found this post and tried to implement the steps mentioned above. After wasting a few hours I've seen the comment from @SMT above...

I definitely doesn't work any more in v2.10.

My customer was already waiting for this feature so I had to find a workaround. Please note: I wrote this solution for WordPress, so you may change a few lines to make it work on your site.

Let's start with my HTML code a wrapper containing the image and the button:

<div class="my-image-container">
    <img src="http://example.com/image.jpg">
    <a href="#" class="fb-share-image">Share</a>');
</div>

In my JS code I add the image url as a parameter to the URL I want to share:

window.fbAsyncInit = function() {
    FB.init({
        appId            : 'YOUR APP ID',
        status           : true,
        cookie           : true,
        version          : 'v2.10'                
    });

    $( '.fb-share-image' ).click(function(e){
        e.preventDefault();
        var image = $(this).siblings('img').attr('src');

        FB.ui(
                {
                    method: 'share',
                    href: $(location).attr('href') + '?og_img=' + image,
                },
                function (response) {

                }
            );
    })
};

(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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

The next step is to handle the URL parameter. This code is for WordPress and WordPress SEO by YOAST but you can simply change it to work with your CMS. Add this to your functions.php:

add_filter('wpseo_opengraph_image',function( $img ){
    if( array_key_exists( 'og_img', $_GET ) )
        return $_GET['og_img'];
    return $img;
});

add_filter('wpseo_opengraph_url',function( $url ){
    if( array_key_exists( 'og_img', $_GET ) )
        return $url . '?og_img=' . $_GET['og_img'];
    return $url;
});

The general idea is to create an individual URL for each image that only changes the OG parameters so Facebook has to scrape each of them individually. To avoid any SEO issues you should have a canonical tag in your header pointing to the original URL. Here's the complete article.

Answer 2

The code you are using is deprecated. You can use the following share dialogue with dynamically overridden attributes:

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  display: 'popup',
  action_properties: JSON.stringify({
    object: {
      'og:url': 'https://your-url-here.com',
      'og:title': 'Title to show',
      'og:description': 'The description',
      'og:image': 'https://path-to-image.png'
    }
  })
}, function(response) {
  // Action after response
});

For a detailed working example, checkout: http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript.

If you share a web page (having og meta tags) on Facebook and update the title and description etc later, they will not be get updated instantly on Facebook as it caches your web page and scrap the page again after 2 days.

So if you want to update the title, description etc on Facebook instantly, you'll need to Scrap the web page again using Facebook debug tool.