hsands
hsands

Reputation: 147

Facebook Share Dialog image doesn't show

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

Upvotes: 2

Views: 10838

Answers (3)

Menas Eru
Menas Eru

Reputation: 118

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

Upvotes: 0

wazzaday
wazzaday

Reputation: 9664

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

Upvotes: 0

hsands
hsands

Reputation: 147

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

Upvotes: 1

Related Questions