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:
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?
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
},
Click on this image to try it in Graph Explorer
Here you go with the result in Facebook: