• How to Add Facebook Open Graph Protocol Meta Tags on Blogger | BST


    This post will guide you to add open graph protocol Meta tags to your Blogger blogs with easy and simple methods. You may integrate your Web pages into the social graph via open graph protocol tags. Once you add the open graph tags on your webpage that will convert your webpage equivalent to a Facebook page.

    add facebook open graph meta tags to blogger
    Facebook Open Graph Meta Tags for Blogger

    When a user clicks on a Like button on your blog's homepage, a connection is made between the user and your blog. Facebook will generate a FB page that will be associated with your blog's URL link. Your blog, as a Facebook page, will be appeared in the 'Likes' section of the user's timeline profile. Only admin can see the Facebook page associated with his blog's URL link, and others will be redirected to the blog's homepage. The admin will see the below message on their Facebook page associated with blog's link,

    Administer Your Page
    This is the administration interface for your webpage at http://www.bloggertipsseotricks.com/. You can see Insights and publish to the users that have liked your webpage. Only the administrators of the webpage can view this interface, other users are sent to the webpage.

    You may publish the updates to the users who liked that page. Facebook generates the page associated with the blog's link because we define the open graph property with 'blog' type for the homepage. For static and post pages, we will define the open graph property with 'article' type, in that case, whenever someone clicks on a like button to your post pages, a story will be shown on the user's timeline profile as a recent activity, like the following image,

    how to show likes on recent activity
    Recent Activity shows the user's likes

    In addition, the same story will be posted on the news feed of their friends, like the following image.

    show the title, description and thumbnail by liking the page on Facebook
    The likes article has the title, description and a thumbnail.

    You can clearly see that the user clicks on an article of my blog. Now, due to the open graph Meta tags installed in our Blogger blog, Facebook shows the post title, description and a thumbnail along with the story that the user likes an article on "Blogger & SEO Technology" that is a Facebook application for my blog. You have to create one for your blog in the following ways later.  
    "The data you provided via open graph Meta tags define how your page will be represented on Facebook."

    How to create a Facebook Application for Blogs

    • Log into Facebook, and go to Facebook Apps.
    • Click on "+Create New App" on the top right corner.
    • A pop-up will prompt up, type your blog title (no more than 32 characters) under App Name that will show on the Facebook as Facebook apps in the above image. Click on Continue.

      how to create apps in Facebook

    • Enter the captcha code, and click on Continue.
    • You have almost done. Look at the App ID box, as mention below,

      how to know apps id on Facebook

      Note down the App ID, and keep it save on notepad. I will have to use it later. You may choose your blog logo by clicking on the 'Edit' button, and also you may choose your blog favicon as an icon here by clicking on 'edit icon'. 
    • Now, click on 'Website with Facebook Login' under 'Select how your app integrates with Facebook', and type your blog homepage URL. Do not change any other part of this app. Finally, click on Save Changes.

      how to change setting in Facebook app

      You have successfully created a Facebook app for your blog on Facebook. Now, you can use your unique App ID in your Blogger. Therefore, we will use this App ID to add the open graph protocol Meta tags to your Blogger blogs. Follow the simple guidelines.

    How to Add Open Graph Meta Tags to Blogger

    1. Go to Blogger Dashboard --> Template(Under more options) --> Edit HTML(and Proceed) ( Expand Widget Templates ) find the HTML attribution that will be placed on the starting as shown below,

      <html ... ... ... xmlns:expr='http://www.google.com/2005/gml/expr'>

    2. Add the following open graph namespace to the above code (Add only when your template doesn't have.),
      xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'

      It will look like,

      <html ... ... ... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>

    3. Now, find <head> and below it, paste the following code.
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <meta content='article' property='og:type'/>
      <meta expr:content='data:blog.pageTitle' property='og:title'/>
      <meta content='blog' property='og:type'/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <meta content='article' property='og:type'/>
      <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
      <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'/>
      <meta content='http://www.your-default-thumbnail.jpg' property='og:image'/>
      <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='og:description'/>
      <meta content='App-ID' property='fb:app_id'/>
      <meta content='Facebook-Profile-ID' property='fb:admins'/>

      Replace http://www.your-default-thumbnail.jpg with your default thumbnail URL direct link. Change App-ID with your Facebook App ID that you have already created in the starting of this post, and Facebook-Profile-ID with your Facebook profile ID [To know your profile ID, type your profile URL link on the browser i.e., http://www.facebook.com/shadab.mohammad, and replace www with graph, hit enter and look on "id" value i.e., my ID is 1606375657]. 
    4. Finally, click on Save template.
    You have successfully installed or added the open graph protocol Meta tags to your Blogger blog. However, you may check these open graph Meta tags installation by Facebook debugger tool or Open Graph Checker tool.

    Share the Love!

    Did You Like This Post? Get the Latest Blogger & SEO Technology Directly From Your Inbox Just Enter Your Email and Verify it!


Leave a Reply