FB.ui with share_open_graph method displays small image only

Question

I have this code to create multiple share buttons on a same page URL but specifying a custom title, description and image.

    // this loads the Facebook API
    (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'));

    window.fbAsyncInit = function () {
        var appId = '1937011929814387';
        FB.init({
            appId: appId,
            xfbml: true,
            version: 'v2.9'
        });
    };

    // FB Share with custom OG data.
    (function($) {

        $('.fb_share_btn').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

                // Dynamically gather and set the FB share data. 
                var FBDesc      = 'My custom description';
                var FBTitle     = 'My custom title';
                var FBLink      = 'http://example.com/my-page-link';
                var FBPic       = 'http://example.com/img/my-custom-image.jpg';

                // Open FB share popup
                FB.ui({
                    method: 'share_open_graph',
                    action_type: 'og.shares',
                    action_properties: JSON.stringify({
                        object: {
                            'og:url': FBLink,
                            'og:title': FBTitle,
                            'og:description': FBDesc,
                            'og:image': FBPic
                        }
                    })
                },
                function (response) {
                // Action after response
                })
        })

    })( jQuery );

For the image, I'm following the "Sharing Best Practices" described here in the FB dev docs.

But when shared to Facebook, instead of displaying the image in big size like this:

It comes out in the smaller version like this:

I'm being aware that Facebook JavaScript SDK is deprecating some parameters recently that used to make this to work as I'm expecting. That's why I moved to use the latest SDK version (v2.9) and method available for this custom shares using share_open_graph for share dialogs.

Does this means that from SDK v2.9+, we cannot have the share tiles displaying a bigger image anymore?

Answer 1

UPDATE 2019 This solution doesn't work any more. New solution hasn't been found yet. :(

I found the solution. Just replace action_type: 'og.shares', with action_type: 'og.likes':

...
FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
            object: {
                'og:url': FBLink,
                'og:title': FBTitle,
                'og:description': FBDesc,
                'og:image': FBPic
            }
        })
    },
    function (response) {
    // Action after response
    }
);
...

For complete article check: Dynamically change facebook open graph meta data javascript or just checkout fully working example to see it in action.

The small downside is sentence like "John Doe likes an object on drib" at the top of share dialog and shared content on the user wall.