20 April 2014

Facebook Open Graph for Blogger


Facebook Open Graph  for BloggerFacebook open graph meta tags enables web pages to integrate into social graph and provide ability to treat your page like Facebook page and also helps your +1ed web page to be integrated into social graph if you have added plus one button on your blogger blog.

Social networks like Facebook,Google+ can collect structured information about your blog posts and pages by adding open graph meta tags to your blog.

Reasons Behind Adding Open Graph to Blogger

  • The first and foremost reason to implement is, it is used by Social giants like Facebook and Google plus and other social networking site.
  • 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.

Add It On Blogger

  • Go to your blogger dashboard --> Template --> Edit hmtl. 
  •  Search for <html and add xmlns:og='http://ogp.me/ns#' at the closing end of this tag like this.
  •  Now find <head> and add the following code just below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <b:else/> <meta content='http://www.your-blog-logo.jpg' property='og:image'/> </b:if> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='og:description'/> </b:if> <meta content='Your-App-ID' property='fb:app_id'/> <meta content='Your-Facebook-Profile-ID' property='fb:admins'/>

  • Change the text in Bolded Blue with your configuration.
  • Now save it

How This Works

Let us first discuss about how this Open Graph protocol predefined meta tags works for better understanding.

  • og:title - The title of the object, that is, page or post the reader is reading
  • og:type - blog for homepage and article for post and static pages only
  • og:url - The URL of the page the user is reading
  • og:image - The image that should be used to represent the object.
  • og:site_name - The title of your blog
  • og:description - Object for having a small description of the page. 
  • fb:admins - Your Facebook profile ID or Username
  • fb:app_id - The application ID provided by Facebook App

 Must Read : Facebook likebox widget

So you now finally installed facebokk open graph into your blogger blog which will surely solve your facebook thumbnail share problem.It took 2-4 days to work properly,so let's wait for sometimes and see how's it working.
Articles You May Like

7 comments: Leave Your Comments

  1. This is a bit complicated. I have a love hate relationship with facebook. Sometimes my site is a spam while sometimes its not.

  2. With the volume of stuff in Facebook, the open graph search really makes it faster to search within the site.

  3. thanks for the tip . though i am a bit slow in this tech side where can i find the " BOLDED BLUE in my configuration" ihope you could expound thanks

  4. I was just wondering about this the other day and thankful that I found this information here.

  5. I haven't noticed any changes. I might did something wrong in the way. Will recheck later.

  6. i am bit slow about this techy things. though this graph is very useful to bloggers