Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks / Other » How To Implement Open Graph Protocol In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Implement Open Graph Protocol In Blogger

How To Implement Open Graph Protocol In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

612 views

Open Graph Protocol (OGP) is a markup language that was introduced by Facebook back in 2010. It enables sites like Facebook to integrate and share information with other sites and pages. Implementing Open Graph to your Blogger site will help social sites like Facebook in identifying the essential elements like author, blog description, URL, etc. every time you share a link or one of your posts.

Facebook isn’t the only site that uses OGP. Google Plus also uses it and Twitter is about to as well, once they implement the Twitter cards, so it would be a good idea to have your Blogger site support it as well. All it takes is adding a few metadata in your site’s template code.

  • Go to the “Design” page in your Blogger dashboard, and then head over to the “Template” section.
  • Click on “Edit HTML” and then “Proceed”.
  • By using the search function (Ctrl+F), look for the </head> tag
  • Copy and paste the following code before it:
<!-- 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='URL TO YOUR ABOUT PAGE GOES HERE' property='article:author'/>
<meta expr:content='data:blog.url' 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.homepageUrl' 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 -->     
  • Replace all of the necessary values highlighted in bold above with those of your own appropriate data.

You can get your appID by going to the Facebook App dashboard. You won’t have any appID unless you already have an application created and registered. For YOUR_FAVICON_URL, as an alternative, you can also upload a 200x200px sized photo of your logo or Favicon in Picasa and use that URL instead.

  • Save your template and you’re done.

To find out if you got everything correctly, click HERE.

Liked It ? Please Share

Comments

6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Have you ever thought about adding a little bit
    more than just your articles? I mean, what you say is important and everything.
    Nevertheless think about if you added some great graphics or video clips to give your posts more, “pop”!
    Your content is excellent but with pics and video clips, this
    blog could certainly be one of the greatest in its niche.
    Good blog!

  2. Ngbuzz Blog says:

    Thanks for this, I followed the tutorial and successfully implemented open graph on my blog. The problem i had showing facebook recommendation bar has now been solved. Good work, keep it up

  3. Syahrulzaman says:

    Thanks for the great info..work amazing in my blog

  4. Chiranjeev says:

    Hi Keith,
    Thanks for this awesome tutorial. I have just added this one to my blog.

  5. Amar says:

    Thanks a lot keith for sharing this,, I have just implemented in one of my blog and it worked for me..

  6. dimpost says:

    Thanks for the tuts. don’t stop this great work :)

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here