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.

Open Graph Protocol implementation in Blogger

Facebook introduced ogp as their markup laguage in 2010. It helps the Facebook to understand in a structured way. By using thes tags, we can mark certain things are the necessary data which should be shown while shared to the Facebook or other implemented websites.

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
Facebook

An example, BloggerHow is shared in Facebook
Google plus sharing

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 <html and 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#' ...
  • 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 == &quot;item&quot;'>
<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='&quot;en_US&quot;' 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)


Get free updates in your mailbox..

Share this article