Multiple og:image tags not being displayed by share dialog or update status box

Question

I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.

I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.

When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.

I am not sure what I am doing wrong here.

Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?

I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.

I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.

Workingman

Have you checked if all images are big enough? Minimum is 200x200 and recommended is far bigger. – Unscrew

Yes all images are 200x200 – Workingman

I don't see the problem. What I see in the sharer are the first 3 images from the list you have specified. The same which are shown in the debugger. Facebook actually does not say it will show all specified images from the age. In your case it just limits them to the first three. – Unscrew

take a look at this: buzzfeed.com/generalelectric/… – Workingman

the buzzfeed share has all 10 images. – Workingman

I subscribed to this bug, developers.facebook.com/bugs/437832022967318 maybe Facebook takes a look at this, maybe not, but it doesn't hurt to subscribe and repro – Kingfisher

Answer 1

Could it be the XML namespace in the top HTML tag?

In the BuzzFeed article, it's:

xmlns:og="http://opengraphprotocol.org/schema/"

In your page its:

xmlns:og="http://ogp.me/ns#"

Hydrotherapeutics

hrm let me give that a try – Workingman

Answer 2

On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.

It may be required to include a filename in the links, especially if it's basing image detection on the file extension.

EG:

Buzzfeed:

<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />

Yours:

<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>

Hydrotherapeutics

possibly, this one will be a bit tougher to validate. let me see what I can do. – Workingman

Ok so I have tested this with a test application attempting to remove as many variables as I can. Filename and extension don't seem to matter. – Workingman

Answer 3

After some tests, I guess it's a caching issue.

Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.

If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.

Voe

Answer 4

So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.

It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)

They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.

Serbocroatian

Funny, I actually tried reaching out to buzzfeed to talk to a dev there while working on this problem and got no response. Probably because I was working for Cheezburger at the time. But they laid me off in their great purge of remote workers last year, so what are you gonna do eh? Thanks for the followup. – Workingman

Answer 5

The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.

Allwein

Answer 6

Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.

I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:

http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary

Dishwasher

Hi Michael, I don't think the problem is limited to sharer.php. If you paste the same link into the status update box directly on facebook it appears to ignore the og:image tags as well. Buzzfeed also appears to work as expected. – Workingman

also the downside to this method is that cutting and pasting the url to the update status box on facebook does not pick up the images. – Workingman

"Sharer.php has been officially deprecated by Facebook" - Really? This documentation page doesn't mention that. Source? – Deneb

Michael was correct, but it's been sort-of undeprecated recently and re-added to the documentation – Alviani