Facebook sharer.php, how to have multiple og:image tags? [duplicate]

Asked 15/10, 2010 at 16:38 Answered 6/4, 2011 at 14:56

Possible Duplicate:
How does Facebook Sharer select Images?

We are using Facebook's sharer.php service to share pages on our site. Right now this works great, but we are now having difficult trying to find out how to offer users more than one thumbnail to pick from (the sharer.php page offers a UI for multiple images, so it must be possible somehow).

We have this meta tag currently:

<meta property="og:image" content="http://www.mysite.com/myimage.jpg" />

We couldn't find anything suggesting how to do this. Does anybody have any ideas?

Cedric answered 15/10, 2010 at 16:38 Comment(2)

It's very possible. See: ogp.me – Ekaterinodar 3/3, 2014 at 18:42

Jump direct to ogp.me/#array – Jointly 24/8, 2018 at 22:37

I've been using multiple images for a while now. Use multiple og:image meta tags like this:

<meta property="og:image" content="http://www.example.com/image01.jpg">
<meta property="og:image" content="http://www.example.com/image02.jpg">

Any pages that have already been shared (with one image) can be updated by loading the link in the debugger/linter here: https://developers.facebook.com/tools/debug/

The debugger/linter will not show a preview of all the images – it just shows the last one (I believe below it does mention what images it has pulled through) however it does work.

Unbeatable answered 6/4, 2011 at 14:56 Comment(2)

@Flimm I have mulitple images in one page, and a fb share button for each of these images. I need custom image for each share button. og:image meta tag only allows one image set per page. How do I have each share button to have it's own image? – Islander 6/4, 2017 at 8:49

@Islander I don't think there is a way without having separate pages. – Stroke 14/4, 2017 at 7:21

I came here with the same problem. After some digging, I found that you can have multiple og:image tags.

From Facebook Developers, under og:image:

We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

Keep in mind it may take some time for Facebook to recognize that you have added new images to the meta as the spider does cache. Links you have already shared using the like button or copied into your status are affected by this.

EDIT: If you're having problems with Facebook showing the same images even though you've changed your OG tags, it's probably because Facebook has cached it. If this is the case, go check out your tags using Facebook's OG Debugger here.

Hassock answered 1/4, 2011 at 18:38 Comment(0)

I found a solution to this by adding the images to the body and not in the meta information, then just hiding them, like this;

<body> ...

<img src="http://image1" width="41" height="41" border="0" alt="text describing the image" style="visibility:hidden" /><br/>

<img src="http://image2" width="41" height="41" border="0" alt="text describing the image" style="visibility:hidden" /><br/>

etc ... </body>

It just came to me from reading that if no og:image property is given then thumbnails are taken from the body, and it worked even if hidden. You could probably remove the width, heigh etc to tidy it up, but I thought why both waste time with that when it gets hidden anyway, I just cut and paste and made it hidden.

Hope this helps.

Flare answered 31/10, 2010 at 0:17 Comment(0)

Recommended topics

Hot tags