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(#)
<htmland add below code just after it
xmlns:og='http://ogp.me/ns#'. So it will look like this
<html xmlns:og='http://ogp.me/ns#' ...
</head>by Search (Use Ctrl+F)
- Add following code just above to the
<!-- 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..