You are only in a hurry till you get to the front of the queue

Friday, 26 December 2014

Fixing Facebook Share Showing Wrong Thumbnail

Fixing Facebook Share Showing Wrong Thumbnail:



'via Blog this'



Fixing Facebook Share Showing Wrong Thumbnail

A lot of Blogger users are having problem getting the correct thumbnail or picture to show up when sharing a post on Facebook. For some reason Facebook pulls a picture unrelated to the shared post. The image seems to come from anywhere - the blog's header, sidebar or footer. It could be the blog logo, image from a picture widget, profile photo from About Me widget or even a commenter's avatar. Strange ... and frustrating.
This is one mystery that remains unsolved for longest time and this post will show you how to solve it once and for all :)
Facebook wrong thumbnail image photo picture



How to make a correct picture appears every time you share a post on Facebook

To make Facebook choose the right thumbnail or picture, you need to do 2 things:
  1. Make sure the first photo in each post is 200 x 200px or larger. The photo doesn't need to be uploaded via Blogger editor, since it can be hosted anywhere - Picasa, Flickr, Photobucket etc.
  2. Add the following open graph's image property meta tag in the head section of your template right under the <b:include data='blog' name='all-head-content'/> line:
    1<b:if cond='data:blog.postImageUrl'>
    2 <meta expr:content='data:blog.postImageUrl'property='og:image'/>
    3<b:else/>
    4 <meta content='Put URL of alternate image'property='og:image'/>
    5</b:if>
    Put the URL of an alternate open graph image in line 4. This image will appear when you share a post that has no image or if you share something other than a post (e.g. homepage, a static page or an archive page etc.). Choose an image that represents your blog, such as your blog logo. Remember the image size must be at least 200 x 200px.
This fix will take immediate effect on your future posts i.e. Facebook would be grabbing the correct picture starting from the very first share.
For existing posts however, you will have to wait a day or two for Facebook to refresh their cache. This is because Facebook usually scrapes pages every 24 hours to update their properties. If don't wish to wait you can make use of Facebook's Open Graph Debugger Tool. Running a post's URL through the tools will force Facebook to instantly refresh the cache.
Enjoy!
Please share this post if you found it useful.

0 comments :

Post a Comment

Thank you for taking the time to comment. Your opinion is important and of value and we appreciate the positive feedback! If you are "Negative Nancy" then please do us, and humanity, a favor and piss off.

Total Pageviews

Google+ Followers

Interesting pages

Blog Archive

Popular Posts

Recent Comments

Rays Twitter feed

Ads

Web sites come and go and information is lost and therefore some pages are archived. @rayd123 . Powered by Blogger.