How can I share an image on Facebook using FB.ui feed dialog?

El Barto picture El Barto · Jan 13, 2016 · Viewed 10.2k times · Source

I have this script which I use for my users to share the URL of my website on Facebook. I use FB.ui's feed dialog because I need to accomplish two things:

  1. Share a message with an image
  2. Have a callback function to register when the link has been shared (this gives credits to the user).

The code works. The dialog is displayed, with the correct image and text, and when is posted the callback is called.

The problem is: when I go to Facebook, the post does not have any image.

This is the script:

var Listen = {

    [...]

    share_fb: function() {
        var self = Listen;
        var msg = 'I just voted "' + self._song.name + '" by ' + 
                self._song.artist + ' to win a ' + self._song.prize + 
                ' on My Website.';
        FB.ui(
            {
                method: 'feed',
                name: 'Come Listen to this Song',
                link: url_base + '/listen',
                picture: self._song.share_img,
                source: self._song.media,
                caption: 'mywebsite.com',
                description: msg,
                message: msg
            },
            function(response) {
                if (response && response.post_id) {
                    self.register_share('facebook');
                } else {
                    console.log("Post not shared");
                }
            }
        );
    }

    [...]
};

I have tried with different images (PNGs and JPGs, all hosted on my website, not on Facebook's CDN). They all are displayed on the dialog but they don't show up on Facebook.

In my latest attempt I tried using the same image (with the same URL) both on the feed dialog and on the og:image tag of the URL that is shared, but still nothing.

What can be the problem?

Answer

Hupfauer picture Hupfauer · Jan 21, 2016

You must remove the source parameter.

The request you should provide:

    FB.ui(
        {
            method: 'feed',
            name: 'Come Listen to this Song',
            link: url_base + '/listen',
            picture: self._song.share_img,
            caption: 'mywebsite.com',
            description: msg,
            message: msg
        },

Summary


Click on this image to try it in Graph Explorer Parameters


Here you go with the result in Facebook:

Result