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.
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. For example, for one website I work on, Facebook only pulls in the images used for the navigation—not very useful. If you have similar problems or maybe 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.
Allowing for Multiple Thumbnails
One downside of this method is that once Facebook finds a <link> tag, it doesn't look for any other images. If other 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
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
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 ;-)
@Fabio978 – A situation arose where I was finally able to try out the debug tool. It worked like a charm, thanks!
Leave a Comment