Facebook Share Thumbnail Image
When users share a link on their wall, Facebook automatically tries to grab a thumbnail image to include with the link. This image can really help get the item attention when it is viewed on other people's news feed.
By default, Facebook scans the page and gives you a choice of a few different images. Which images it picks can seem a bit random. Our experience is that it Facebook looks for small squarish images starting at the top of the page.
UPDATED: Meta Tags for Facebook Open Graph
Facebook has deprecated the old meta tags and now utilizes the Open Graph meta tags. You can now do a whole lot more now than just choose an image. These tags tell Facebook about the content of your page: title, site name, and more. All these things help you get your content shared more effectively.
Open Graph meta tags look like standard meta tags with some Facebook specific values. The property attribute value starts with te prefix og: and the content attribute contains the value.
<meta property="og:{tagname}" content="{value}"/>Set a thumbnail preview image
Control the image that displays in Facebook when your page is shared. This image should be square and at least 90x90 pixels. Facebook supports JPG, PNG, and GIF.
<meta property="og:image"content="http://site.com/path/sharedimage.png" />
Other meta tags:
We can share the title of the page:
<meta property="og:image"content="http://site.com/path/sharedimage.png" />
and the name of your site:
<meta property="og:site_name"content="Your Site Name" />
... and much, much more. See Facebook's Open Graph docs to see the full list of meta tags.
Don't forget
The Facebook LIKE button is a great way to encourage users to share your content. Check those docs out at Facebook's developer site.
Good luck, and happy sharing!
Specify Your Facebook Share Thumbnail Image
You can specify exactly which image Facebook uses for the thumbnail using a link tag in the head of your page.
<link rel="image_src" type="image/jpeg" href="http://www.domain.com/path/icon-facebook.gif" />
The name is unimportant (as long as it's correct). Use a global URL to avoid confusion.
Other Meta
Make sure the page has a title and description meta tag. Facebook will use these elements when it pre-populates the link description and title.
Comments
I don't think Facebook accepts .PNG. Also had a problem with JPEG. GIF's work as long as you don't use transparency. Change the MIME type in the article above to type="image/gif". It works for me.
Is it possible to limit the number of thumbnails shared to one? I use the link tag and it initally shows the image I want to share but it also gives the user the ability to choose from other images that may appear on the page. Is there a way to prevent this and only show the first image?
There is updated documentation here:
developers.facebook.com
It worked for me. I used .gif. It did not appear for first 5 mins because of my Server cache issue. But later it appeared. But how could I resize the image? Can I specify the width and height in the <link> tag?
Thanks for the info!
So I see on the facebook developer's page how this works when you are putting a "like" button on your site. you can specify the image and whatnot. But what if someone just copies and pastes a URL on to their Facebook wall to "share" the link? I wonder if this information would still apply. I guess i will try it and see!
Thanks this works
It worked for me
Thank you SO much for this post. I have been trying to figure out why fb wouldn't post the image from my post every time I linked to my site (which is 2/week). This totally worked! Thanks again!!!
Leave a Comment