CODEWITHSUNDEEP
thumbnailsfacebook-opengraph
Alex Lyman
Alex Lyman

Reputation: 15975

Why does sharing a link include thumbnail options that are not in my og:image(s)?

When you try to share one of the pages on Woot.com, it gives three options for the thumbnail. The first is the one specified with og:image, but the other two seem to be randomly selected from the thumbnails contained in the page's navigation areas.

The debugger does not seem to help, it only shows the one specified by og:image.

Any ideas?

Upvotes: 0

Views: 775

Answers (3)

Nick Sharp
Nick Sharp

Reputation: 1891

Checking the source of your site it looks like you now have two og:image tags in place yet facebook sharer on your site still shows only one thumbnail.

<meta property="og:image" content="http://d3gqasl9vmjfd8.cloudfront.net/3f0c6be3-29b1-4241-bd13-af61613f6dee.jpg" />
<meta property="og:image" content="http://d3gqasl9vmjfd8.cloudfront.net/4ccb33cb-13b7-457c-a425-2ed7a305a758.jpg" />

If you want absolute control, and it seems like you are able to modify the source, then I would recommend just modifying the link for your facebook sharer. On the page I currently see it as:

http://www.facebook.com/sharer.php?u=http://www.woot.com/offers/cuisinart-14-pc-non-stick-cookware-set-5&src=sp

You can add the source of the image you want directly into the sharer url, like so:

http://www.facebook.com/sharer.php?s=100&p[url]=http://www.woot.com/offers/cuisinart-14-pc-non-stick-cookware-set-5&p[images][0]=http://goo.gl/ehi4d

Again, this gives you the direct control, but you have to modify your little share widget code instead of your header code... best of luck.

Upvotes: 1

Taylor Taff
Taylor Taff

Reputation: 576

According to http://developers.facebook.com/docs/opengraphprotocol/

og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px, although a minimum 200px by 200px is preferred and 1500px by 1500px is recommended for the best possible user experience. The image can have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page. (Note: image sizes must be no more than 5MB in size.)

In regards to your issue, this states that you can have multiple images set as your Open Graph image. If you solely want your specific image to be provided as an option then I would suggest providing three images, each with their own "og:image"

Currently you have:

meta property="og:image" content="http://d3gqasl9vmjfd8.cloudfront.net/750d2708-65b0-42d6-bf1e-a4e0f8f2b79c.jpg" />

You could replace with:

meta property="og:image" content="http://d3gqasl9vmjfd8.cloudfront.net/750d2708-65b0-42d6-bf1e-a4e0f8f2b79c.jpg.jpg" />

meta property="og:image" content="http://d3gqasl9vmjfd8.cloudfront.net/sameimagenewname.jpg" />

meta property="og:image" content="http://d3gqasl9vmjfd8.cloudfront.net/sameimagenewname2.jpg" />

This would solve the issue of undesired images being used.

Upvotes: 0

jesal
jesal

Reputation: 7958

I believe Facebook share script always tries to present the user with multiple images to choose from. First it will look for og:image tag in the header and then move on to the content of the page and select images which meet it's sharing criteria (i.e Image must be at least 50px by 50px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format).

So if you want to hand select which three images are shown, simply add two additional og:image tags to your header. Run the debugger on that page again and that should give you the desired result.

Upvotes: 1

Related Questions