Facebook share dialog doesn't pick up on og:image

Question

I want to share a link to a website through a Facebook status: http://www.pledgehub.com/d/2/test-fundraiser/

However, while the Facebook open graph linter says that the image referenced in the html:

<meta property="og:image:url" content="http://pledgehub-1.s3.amazonaws.com/icon_4060.png">

is valid, pasting the link into a status update dialog does not show an image preview, even though running a link through the linter is supposed to invalidate any cached image values on Facebook's end. This has persisted for >24hrs at this point, and I've never gotten an image to display.

Edit1: The rabbit hole grows deeper...

I can hack the sharer.php url into showing the image like so:

https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.pledgehub.com/d/2/test-fundraiser/?s=fb&p[images][0]=http://pledgehub-1.s3.amazonaws.com/icon_4060.png&p[title]=Test%20Fundraiser&p[url]=http://pledgehub.com/d/2/test-fundraiser/&p[summary]=Test%20Organization%20is%20raising%20$8000%20in%20Test%20Fundraiser.%20Help%20them%20reach%20their%20goal.

but when Share Link is hit, the image disappears.

Edit2: Problem can be eliminated on AWS's end; the bare image can be shared with a preview using both the http and https urls.

Answer 1

Well, it's a bit of a funny one - the Open Graph docs say that og:image:url is the same as og:image, but Facebook isn't treating it that way.

If you change your first <meta> tag to this then it works for me:

<meta property="og:image" content="http://pledgehub-1.s3.amazonaws.com/icon_4060.png">

The preview looks like this when I go to post the link:

The image is pretty huge - maybe you don't want it like this. If you resize the image down to about 200x200 it looks a little more normal:

You might also be able to achieve this with the og:image:width and og:image:height attributes, but I didn't try this.

Hope that helps!