Friday , 22 September 2017

Add Facebook Open Graph Meta Tags to Blogger Blog [Video]

Facebook Open Graph Protcol

Social Media is the best source to get internet traffic to your new blog. If you created a blog then there is only one best source which is Social Media e.g. Facebook, Twitter, Google+ etc. Today we are going to talk about adding Facebook Open Graph Protocol Meta Tags to our Blogger blogs. Facebook added this feature in Timeline. This feature actually shows user’s recent activity in a different way. So it is very attractive to other users. Facebook OG protocol is connected with its Like button so whenever any user who is logged in Facebook will click on Facebook Like button on your blog post then it will show it on user profile as a recent activity and it also post this activity on friends’ News Feed on Facebook.

Recent Activity on Friends' News Feed on Facebook

Now as you can clearly see that this look different it shows that user likes an article but if we are not using Facebook OG Protocol then it will show that user likes a link. And the picture which is shared above is taken from my friend’s News Feed and this is how it shows on my profile.

Recent Activity in User's Profile on Facebook

Now I can everything is cleared to you that why we should use this new feature for our blogs.

Video Tutorial

It is very simple as it should be, all we need is to add few lines of code in our blog source code so let’s add it. I know it is complicated so I made video for you guys it will help you to learn it instantly.

Facebook Open Graph Code for HTML Tag

This is the code that I used to paste in the HTML tag:

xmlns:fb='http://ogp.me/ns/fb#'

Facebook Open Graph Codes for Head Tag

And this code I used to add right below Head tag:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>

Need Any Help?

As I made video tutorial just for you so that even beginners who don’t know much about programming they can also add Facebook Open Graph Protocol Meta Tags to their blogs but if still you need any help regarding this tutorial then comment below I am ready to help you.

Leave a Reply