How to install Facebook's Open Graph tags into Blogger

Social networks are major source of traffic to your website . Many of us using social networks like Twitter, Facebook, Pinterest and LinkedIn to introduce your followers about your content, this helps you and website to grow via involvement & engagement of your readers on social media, build a strong following and bring traffic to your website at the same time.

Recently on Facebook, When I was shared one of my blog content , it not shows any Images of my blog posts. On the other hand when I look at the other website links Facebook crawls that content with Images, I Googled it out about the problem and find solution to Open Graph Meta Tags For Facebook is missing on my website. It inspire me to write this tutorial for Blogger which is Pretty simple and Straight.

See My post how it look like

How To Add Facebook Open Graph To Blogger Blog

Facebook has a set of open-graph meta tags and it should be present inside the <head> </head> tag at the top of your page. You can edit title, description and image of content what you are sharing.

The basics of Open Graph markup include:

og:title = title of post e.g., "How to add border in Google Blogger Images without adding CSS"
og:url = URL of post e.g., "http://www.technohalf.com/2015/01/how-to-add-border-in-google-blogger.html"
og:description = describing post(You Can Manually Edit It As you Like)
og:image = URL to unique image at least 200×200 pixels
og:type = article (otherwise defaults to “website”)

Its really simple task just follow these easy steps :

1. Go to Blogger > Dashboard > Template > Edit HTML

2. In the editor, at the top you will see html xmlns just similar like following code :

<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>

3. Paste this code, xmlns:og='http://ogp.me/ns#' before closing the head tag, just like below codes. But if you don't find this code copy all this code and paste this code above to <head> :

<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>

4. Congratulation you have successfully added Facebook Protocol Tag, lets move further to add Open Graph Meta Tags in blogger. Find the tag <head> in your blog and paste the following line of codes below it.

<b:if cond='data:blog.pageType == "item"'>
<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='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>

5. Here you need to logo-link with your Blogger Blog's Logo link, add atleast meet Facebook share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format. It also you need to replace your app_id and fb_admins respectively and then just hit Save Template.

How to Get app-id and fb-admins:

Go to the Facebook insights page (login as user, not in your page) located here: https://www.facebook.com/insights/
A box should open. DO NOT FILL THE FORM OUT YET. In the bottom half of the box you should see a bit of code. It will look like this: <meta property="fb:admins" content="XXX"> Copy this code.

Place the code that you just copied into Open Graph Meta Tags of your website. If page have two admin it separated with comma.
Don't Fill Out Domain Name in that box, If you try to do so, it would give this error message (Getting an error "No admin data found at root webpage http://technohalf.com/. Insights requires admin data at this root webpage for the specified URL technohalf.com") because we haven't get out App ready.
To create a Facebook Application ID, Go to the Facebook Developers Apps page, and sign in with your Facebook username and password.
Click the "Add a New App" button. A box pop up Click Website. Enter a name for the application in the "App Name" field or Click on Skip Quick Start and Filled the required box.Next, scroll down to the "Facebook App ID" e.g. appId : '1523672161247135', and Enter your website URL in the "Site URL" field (e.g. http://www.technohalf.com ), click next to finished.

Copy That App ID and placed it to your Open Graph Meta Tags.
Return to Facebook Insights, complete the domain section of the form and hit Get Insights.

That's it I hope this article really helpful to integrate Facebook Open Graph for your blogger blog. After some time go to you blog post and try to share it. To make sure your Open Graph tags have been properly configured, use Facebook’s Open Graph Debugger Tool to see a preview of how your post will appear in Facebook.

If you have any problem regarding this post you can drop your comment here or feel free to contact me. If you want latest post on blogger Don't forget to Like me on Facebook, Follow me on Twitter and Google Plus or Subscribe on Mail.