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 acplish 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',
                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?

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 acplish 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.',
                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?

• javascript
• facebook
• facebook-graph-api
• fb.ui

• 3 “(this gives credits to the user)” - You are not allowed to reward users in any way for sharing. You should go read Platform Policy first of all. – C3roe Commented Jan 13, 2016 at 13:41
• Thanks for pointing that out, I will review that part of my App. – El Barto Commented Jan 13, 2016 at 13:55
• Could you please provide one URL to a example image hosted on your infrastructure? – Hupfauer Commented Jan 20, 2016 at 16:43
• Yes, here it is: dev.louderband./img/contest/pau-share.jpg – El Barto Commented Jan 20, 2016 at 19:54

3 Answers 3

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.',
            description: msg,
            message: msg
        },

Summary

Click on this image to try it in Graph Explorer

Here you go with the result in Facebook:

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"

As this question es 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.