如何使用FB.ui提要对话框在Facebook上分享图像?

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

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?

The picture parameter is no longer available. It is deprecated now. Now we cant use feed to share image.

Insetead use FB.ui share method with href = "Image URL"

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

Picture param is no longer avaible developers.facebook.com/docs/sharing/reference/feed-dialog

As this question comes to the top when u search for fb ui and image problem, mine issue was that you can not have ssl url in image, so dont add https url, it must be http. Facebook proxies the image requests it shows to users, so even if you're serving it from a non-SSL URL, the image used within Facebook will reach users over SSL.