Add Facebook Comment Box to Blogspot Blogs.

Facebook is a market leading social networking website, as a result Now a days many blog or website owner has a pages, groups and profiles for their own blogs on Facebook, The only one reason to create it, is to gain traffic. at the end of all this efforts Facebook user will start landing on blog. As a blogger user we all are aware that Blogger Comment Has No contribution to comment via Facebook, If we provided Facebook comment facilities to those target people, this will be not only better for them to comment on blogger blog using Facebook accounts, but also better for us to solve their query and problems . Following is a tutorial that will help you to insert Facebook comment plugins, which will appear on each post of blogger blog. 

Facebook comment box for blogger 2013

I had devided the entire tutorial into two different part:

Phase 1: Creating Facebook App ID.
Phase 2: Installing Facebook Comment Plugins inside Blogger Template.

If you had already created your Facebook App id than you can skip the first phase, go directly to the second phase. So lets start the tutorial.

Creating Facebook App ID.

Update : How to Create FaceBook App Id For Website 2014? (only for custom domain)

Step 1: Go to Facebook Application Page.

Step 2: Click on “Create New App”.

Step 3: One popup appear in which you required to Write “App Name” and click on “Continue” Button.

Creat FB Comment Id

Step 4: Now fill up the details ( See following Screenshot )

Blogspot Blog FB Comment

Note:-

    • If you are using free sub-domain for your blogger blog (xyz.blogspot.in), than in Apps Domain Field Add following  domain names.
blogpost.com, blogspot.ae, blogspot.mx, blogspot.in, blogspot.pt, blogspot.jp, blogspot.ca, blogspot.de, blogspot.it, blogspot.fr, blogspot.se, blogspot.co.uk, blogspot.co.nz, blogspot.com.es, blogspot.com.br, blogspot.com.ar, blogspot.com.au
  • In Field of “Site URL:” Don’t forget to insert http:// in your blog address (http://www.tipsviablogging.com/).
Step 5: Save changes that set your FB App ID is Creaded. We need in upcoming step so keep this tab or save it in notepad or any other software.

(Find App Id : In above screenshot highlighted text is my application id, you need to copy your own id.)

Adding Facebook comment blogger plugins under Each blogger Post.

Step 1 : Login In Blogger Account.

Step 2 : Backup Your Blogger Blog. (Learn how to backup Blogger Blog)

Step 3: Navigate Blogger Dashboard > Go to Template > Edit HTML.

Step 4: Find Following code by pressing CTRL + F.

<html

Replace <html code with following code.

<html xmlns:fb=’http://www.facebook.com/2008/fbml’

Step 5: Now find following code.

<div class=’post-footer-line post-footer-line-3′

or

<p class=’post-footer-line post-footer-line-3′

or

<data:post.body/>

Step 6:  Now generate code using below Facebook comment code generator, Copy code and paste it just below   <div class=’post-footer-line post-footer-line-3′> or <p class=’post-footer-line post-footer-line-3′> or <data:post.body/> code.

Step 7: Find Following code.
</head>

Step 8: Just Above </head> tag past following code.
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta content=’Tips Via Blogging‘ property=’og:site_name’/>
<meta content=’LOGO-IMAGE-LINK‘ property=’og:image’/>
<meta content=’YOUR_APP_ID‘ property=’fb:app_id’/>
<meta content=’http://www.facebook.com/tipsviablogging‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
  • Replace Tipsviablogging With Your Own Site Name
  • Replace LOGO-IMAGE-LINK with your blog logo image URL.
  • Replace YOUR_APP_ID with your Facebook app id.And Lastly replace http://www.facebook.com/tipsviablogging with your own facebook page URL.
Step 9: Save Your Blogger Template.

Note:

You will find two comment box on your blogger post page, you can disable blogger comment just follow below easy steps:
  • Navigate blogger Dashboard > Select Blog > Setting > Posts and Comments > Find Comment Location Field and select Hide option from Drop Down Menu > Click on Save Settings button (Find it on top right corner.) that set. Congratulations you had completely install your Facebook comment box that will going to appear on each blogger post.

Final Words:

This comment widget is created in such a way that it will appear only on post page of your blogger blog, which will look more structured and effective. Facebook is at #2 position in Alexa ranking, there are numbers of Facebook users who might don’t have gmail account or due having laziness they skip to comment on blog, If we add Facebook comment blogger widget to our blog will surly increase comment on our blog. Now your turn, share what you think about adding Facebook comment plugins inside blogger blog?

32 Comments

Leave a Reply to paritosh trivedi Cancel reply

Your email address will not be published. Required fields are marked *