How To Add Facebook Open Graph In Blogger Social networks are major source of traffic to your website . Many of us using social networks like Twitter, Facebook, Pinterest and LinkedI...
2018-07-31T07:46:19Z

How To Add Facebook Open Graph In 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.

Add Facebook Open Graph To Blogger

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.

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 Hide Facebook Friend List from Others"
  • og:url = URL of post e.g., "http://www.domain.com/post.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.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<b:else/>
<meta content='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<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 fb-admins: Your Facebook ID [Find Here]

Copy That and placed it to your Open Graph Meta Tags.

How to Get app-id:
  • 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.domain.com ), click next to finished.

Copy That App ID and placed it to your Open Graph Meta Tags.

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.
Share it:

Blogger

Blogging

Facebook

How To

Social Media

Tutorial

Post A Comment:

0 comments: