Facebook, Google+ and many other sharing services uses Open Graph Protocol(ogp) as a mark up language. Here is a guide to implement the protocol on Blogger.
Why you should implement ogp
- The first and foremost reason to implement is, it is used by Social giants like Facebook and Google plus. Twitter is going to implement the support for this protocol using the new twitter cards (Update: Twitter also started supporting ogp). They three together made the social world!
- It helps to identify the blog description, author, URL etc from other content and link other contents with it (which are already shared/used).
- It is very easy to implement this protocol, they are just some meta tags and is well described here, in BloggerHow ;-)
This is the solution for following questions
- While sharing through Facebook, my blog generates wrong post descriptions.
- My blog is not generating thumbnails/images while sharing
- Like button is not using correct informations from my blog
- Facebook is not generating link to my Blog for a share URL
- My Google plus +1 description in not generating, only title is +1'd
An example, BloggerHow is shared in Facebook
In this example, a post is shared in Google plus
How to implement ogp in Blogger
- Navigate to Template and then select Edit HTML(#)
- Clik on the Proceed of appeared popup window(#)
- Find
<htmland add below code just after itxmlns:og='http://ogp.me/ns#'. So it will look like this<html xmlns:og='http://ogp.me/ns#' ... - Find
</head>by Search (Use Ctrl+F) - Add following code just above to the
</head>
<!-- BEGIN Open Graph tags --> <meta expr:content='data:blog.metaDescription' name='description' property='og:description'/> <meta expr:content='data:blog.pageTitle' name='keywords'/> <meta content='YOUR_FACEBOOK_APP_ID' property='fb:app_id'/> <meta content='FB_ADMIN_ID' property='fb:admins'/> <b:if cond='data:blog.pageType == "item"'> <meta content='article' property='og:type'/> <meta content='http://www.bloggerhow.com/p/about.html(ABOUT_PAGE_HERE)' property='article:author'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta expr:content='data:blog.pageName' property='og:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <b:else/> <meta content='YOUR_FAVICON_URL' property='og:image'/> </b:if> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/> <meta content='blog' property='og:type'/> <meta content='YOUR_FAVICON_URL' property='og:image'/> </b:if> <meta expr:content='"en_US"' property='og:locale'/> <!-- END Open Graph tags -->
Fill out your about page instead of the given URL(delete every green colored text and fill out your versions).
Give your appid and admin id from the facebook instead of YOUR_FACEBOOK_APP_ID and FB_ADMIN_ID (These two lines are optional, if you are not comfortable with it just delete these two lines). Go to Facebook App dashboard and get your facebook App Id from there. If you don't have any application registered, create one and get the id.
Use this tutorial to find your facebook Admin Id. Upload your 200pxX200px size blog logo or favicon to the picasa and put the link instead of YOUR_FAVICON_URL.
You can check the results by using this tool. Leave your doubts in comments.
Related: Implement twitter cards for sharing twitter summaries while tweeting(Uses ogp with some additional tags)
If you enjoyed this post, share this with your friends..
Does your blog have a contact page? I'm having a tough time locating it but, I'd
ReplyDeletelike to send you an email. I've got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.
My web blog - click here
Thanks for your complements. I look forward to hear from you. This is my contact page: http://www.bloggerhow.com/p/contact.html
ReplyDeletei want facebook to share post on my blogspot post / page with particular image which i want it appears when people share my post, no need to select which image should be shared. i know about to insert og meta property img but blogger not support it in a html code of post. so how to do that?
ReplyDeleteYou cannot put meta descriptions in posts. You have to put og meta tags in head section of the HTML page. The only option I know is above method. The problem with this method is, blogger generates the thumbnail and it is shared via Facebook (we can't select a thumbnail).
DeleteGood post.. Well documented and nicely explained. Thanks..
ReplyDeleteHow to read og tags on my website's home page.I want inner pages to appear on Home page as share.Please share you advice on [email protected]
ReplyDeleteCan you help...I used your code. It doesn't show the right image...sometimes it uses an old image, sometimes no image...rarely the right image.
ReplyDeleteMy blog is http://speechnotrecognised.blogspot.com.au/
It select the first image with sufficient width and height(from my experience, it is around 200pxX200px). If this is not available, it selects the favicon image. I think your problem is lower size of images.
DeleteThanks for the response, Mohamed. The first image in my current first post is 350px, so it should work. But it's not, which is odd.
DeleteThe thumbnail generated in this case is similar to the popular posts widget. So both should display same image, because it is using blogger's thumbnail generating function. In my case, it is always the first image and both are same.
DeleteHello sir, How are you today?
ReplyDeleteAttractive information of bloggerhow.com these topics.It is a choose able site for of all us. We are getting many kinds of data by this site.I always select these site. But now I got it thanks for sharing wonderful information.So I want to show Looking for Social Bookmarking Submissions? Get cheap Social Bookmarking Submissions Packages. Find the best Social Bookmarking Submissions Packages today.
Thank You Very Much For Create That Nice & Cool Article.
thanks for the lovely tutorial..
ReplyDeleteHey, thank you for this. It fixed my problem enough that I can get a picture from my post connected with the link. Thank you!
ReplyDeletebroward property appraiser
ReplyDeletehttp://www.allaboutappraisals.com
I think Gatorland is awesome! It is a breather from all those fancy fairytale stories and characters that Disney offers. Also, there’s a lot to learn in that theme park. Thanks for posting the pictures!