How to Add Facebook Open Graph Protocol Meta Tags on Blogger | BST
Advertisements
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.
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,
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.
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."
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.
Enter the captcha code, and click on Continue.
You have almost done. Look at the App ID box, as mention below,
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.
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
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'>
Add the following open graph namespace to the above code (Add only when your template doesn't have.),
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].
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.
0 comments: