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

Question

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:

Share a message with an image
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?

_“(this gives credits to the user)”_ - You are __not allowed__ to reward users in any way for sharing. You should go read [Platform Policy](https://developers.facebook.com/policy/) first of all. — CBroe, Jan 13 '16 at 13:41
Thanks for pointing that out, I will review that part of my App. — El Barto, Jan 13 '16 at 13:55
Could you please provide one URL to a example image hosted on your infrastructure? — Hupfauer, Jan 20 '16 at 16:43
Yes, here it is: http://dev.louderband.com/img/contest/pau-share.jpg — El Barto, Jan 20 '16 at 19:54

score 8 · Accepted Answer · answered Jan 21 '16 at 13:12

8

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

Here you go with the result in Facebook:

answered Jan 21 '16 at 13:12

Hupfauer

591
1
4
15

2

Picture param is **no longer avaible** https://developers.facebook.com/docs/sharing/reference/feed-dialog – priki Aug 22 '17 at 21:35

score 1 · Answer 2 · answered Aug 03 '17 at 15:17

1

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"

answered Aug 03 '17 at 15:17

Siddhesh

21
2

score 0 · Answer 3 · answered Jun 06 '16 at 10:34

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.

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

3 Answers3

Summary