Using Custom Picture Thumbnails When Sharing Links on Facebook
When posting links to Facebook, the service usually searches the page for images to use along with the post. But Facebook seems to randomly ignore some pictures or fails to see any at all. If this is a common occurrence for the pages you maintain, there is a way to force Facebook to recognize an image.
Background
When a picture fits well with your page content, it's probably best to include it on the page. Facebook usually locates important graphics embedded within the code. However, Facebook isn't perfect. One website I work on, for example, Facebook only grabs the images used for the navigation which isn't very useful.
Custom Thumbnail
If you experience similar problems or if you just don't want the picture to be included with the page, you can add the following <link> tag within the <head> section for your document:
<link rel="image_src" href="/images/custom_thumb.jpg" />
Note that the href attribute should contain the path to your image. With the files uploaded to the server and the <link> tag in place, Facebook should now show a thumbnail for your picture.
Multiple Thumbnails
One downside of this method is that once Facebook finds a <link> tag, it doesn't look for other images. If thumbnails were coming up in Facebook, such as your logo, and you want visitors to use those thumbnails instead, you might need to remove the <link> tag when you're done. You could also consider adding multiple <link> tags:
<link rel="image_src" href="/images/custom_thumb.jpg" />
<link rel="image_src" href="/images/company_logo.jpg" />
Problem with Facebook Caching
Update (Feb. 11, 2012) – As Fabio978 suggested, you can clear Facebook's cache of a page using their debugger:
https://developers.facebook.com/tools/debug
Keep in mind that Facebook seems to cache images once they're directed to your page. So the <link> technique may not work if Facebook already knows about the page. There doesn't seem to be a way around the caching issue. I've tried clearing my browser's cache, using a different browser, and using another computer with no luck. If you know of a solution, please post a comment below.
2 Comments
@Fabio978 – A situation arose where I was finally able to try out the debug tool. It worked like a charm, thanks!
Hi, it seems you can refresh Facebook cache using this tool. http://developers.facebook.com/tools/debug
You can also obtain useful tips to optimize your code for Facebook.
It solved my problem with the Image Thumb ;-)
Leave a Comment