2
votes

I'm using the Facebook Share Dialog (https://developers.facebook.com/docs/reference/plugins/share-links/) and the image doesn't appear. I've checked a lot of posts here in SO an other forums but couldn't find a solution

I found this site where Share Dialog works correctly: http://election.gv.my/ (They don't use meta property="og:image")

https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http%3A%2F%2Felection.gv.my%2F&p[images][0]=http%3A%2F%2Felection.gv.my%2Fassets%2Fcombined.jpg&p[title]=Malaysia+Twitter+Popularity+Index&p[summary]=Malaysia+Twitter+Popularity+Index+for+March+31%2C+2013%3A+%40anwaribrahim+21%2C+%40NajibRazak+28

If I use its image in my code, it shows:
var sharer = "https://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + shareURL + "&p[images][0]=" + "http://election.gv.my/assets/combined.jpg" + "&p[title]=" + shareTitle + "&p[summary]=" + shareExcerpt;

If I use my image in its code it doesn't:
https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://election.gv.my/&p[images][0]=http://mysite.com/app/wp-content/uploads/2013/03/poster.jpg&p[title]=Malaysia+Twitter+Popularity+Index&p[summary]=Malaysia+Twitter+Popularity+Index+for+March+31%2C+2013%3A+%40anwaribrahim+21%2C+%40NajibRazak+28

The only reason I can think of is something in the server configuration. I've checked my url (website & image) in https://developers.facebook.com/tools/debug and the results are OK, at least the same as that site

3
You should URL-encode the values you are putting as GET parameter values correctly. (In JS you can use encodeURIComponent for that.) If this doesn't help, then please show us an example of your sharer link with the real parameter values.CBroe
@CBroe, I don't think that's the problem because I tried many different images in the site I mention in my question wich is URL-encodehsands

3 Answers

1
votes

The problem in my case was image sizes generated by WordPress:

  • NO: 85x85, 96x54, 166x94, 170x96, 193x108, 711x400
  • YES: 356x200, 360x124

https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/
og:image – This is an image associated with your media. We suggest that you use an image of at least 200x200 pixels. However, bigger is better, so if you have a 1500x1500 image that you can use, please use it. We'll downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the more likely it will be used when sharing stories on Facebook. (Note: image sizes must be no more than 5MB in size.)

But this doesn't explain why size 356x200 is ok but no 711x400 wich is bigger and has the same aspect ratio

0
votes

Try reducing the file size: I changed from 56 to 24 and it then loaded.

0
votes

Try adding a second "&" before "p[images][0]" => "&&p[images][0]"