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

Facebook documentation says that "share" method has only href parameter, but I have found it is not true. You can use very similar parameters to the "feed" method. This is what I have used and works:

    FB.ui(
    {
        method: 'share',
        href: 'your_url',     // The same than link in feed method
        title: 'your_title',  // The same than name in feed method
        picture: 'path_to_your_picture',  
        caption: 'your_caption',  
        description: 'your_description',
     },
     function(response){
        // your code to manage the response
     });

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.

Answer 3

This works for me as of 2018-01-01, using the share-open-graph method. This works, but seems to be magic, and undocumented, so caveat coder.

shareOnFB: function() {
    var img = "image.jpg";
    var desc = "your caption here";
    var title = 'your title here';
    var link = 'https://your.link.here/';

    // Open FB share popup
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.shares',
        action_properties: JSON.stringify({
            object: {
                'og:url': link,
                'og:title': title,
                'og:description': desc,
                'og:image': img
            }
        })
    },
    function (response) {
        // Action after response
    });

Answer 4

The meta data might be cached by Facebook. Try entering your url in the Facebook debugger: https://developers.facebook.com/tools/debug/

This will clear the cache.

For image use this:

<meta property="og:image" content="http://yourimage">

Facebook recommends using images with a min size of 1200x630 pixels

Answer 5

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 6

If you have public bucket and still you are unable to share your image with facebook then check your backend s3 bucket image upload code.

var data = {
    Bucket: bucketName,
    Key: fileName,
    Body: buf,
    ContentEncoding: 'base64',
    ContentType: 'image/jpeg',

};
s3Bucket.putObject(data, function(err, data){
    if (err) {
        console.log(err);
        console.log('Error uploading data: ', data);
        callback(err);
    } else {
        console.log('succesfully uploaded the image!');
        callback(null,"");
    }
});

Remove ContentType: 'image/jpeg', from data Object.