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 (https://www.heerentanna.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/heerentanna‘ 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/heerentanna 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?
  1. bro when anyone can comment on fb….this comment shown on blog site….nor they comment on blog using fb….

    bro i need looks like ur fb botton that was shown on ur comment box below…

    bro…how this tutorial helps me can u describe me in details ….here or fb…

  2. Great detailed information, I ll be visiting you more frequently, here is
    very interesting information.

    e-commerce consultancy

  3. Thanks a lot for taking the time to discuss this,Thanks a lot giving such a nice information. keep it up……..

    mobile website template

  4. The blog posted is very interesting from all aspects and it will surely benefit the readers by all means.

    Your Space Web Design offers a wide range of services for both professional and semi-professional companies. Founded in 2010, we have quick established ourselves as one of the south east’s leading web service providers.If you are looking for Web Designing & Development services then visit our website: http://www.yourspacewebdesign.com/.

    web designer wexford & wexford web design

  5. como gano dinero|como|gano|plata en internet|como obtener|cuenta estados unidos|estados unidos|dinero en internet|gana en internet|ganaeninternet|ganar con payonner|gane en internet|gane internet|ganar dolares|ganar en internet|ganar euros|ganar plata en says:

    Hey very nice web site!! Guy .. Excellent .. Superb .. I’ll bookmark your web site and take the feeds additionally?I’m glad to search out a lot of helpful info here within the post, we want work out more techniques on this regard, thanks for sharing. . . . . .

  6. great post, very informative. I wonder why the
    opposite specialists of this sector do not understand this.
    You must continue your writing. I’m sure, you’ve a huge readers’ base already!|

  7. Hi there, awesome site. I thought the topics you posted on were very interesting. I tried to add your RSS to my feed reader and it a few. take a look at it, hopefully

    I can add you and follow.

  8. This website is marvelous, the tips are amazing. i have one question though. facebook usually makes changes frequently. would any future change affect the blog commenting system?

    1. Hi shaheen, glad to see you here, There will be not as such impact on Facebook comment box. However its highly depend on the facebook developers but as per my own experience you should not worried about predicted giant issue.

  9. Simply wish to say your article is as surprising.

    The clarity for your put up is just cool and that i could assume you’re knowledgeable in
    this subject. Fine with your permission let me
    to grasp your feed to keep up to date with forthcoming post.
    Thanks 1,000,000 and please carry on the enjoyable
    work.

    Feel free to visit my homepage: Lizz Tayler

  10. I’m not positive the place you are getting your information, but good topic.
    I must spend some time studying more or understanding more.
    Thanks for fantastic info I was on the lookout for this information for my mission.

    My page: Valentin

    1. hi uday,
      what you are talking is about default WordPress comment system.. for blogger it is not posible as it required some access to modify and create custom files in cms which blogger didn’t provide.

  11. I am a new blogger , your tutorial helped me a lot to improve my blog.
    keep posting tutorials, i will comeback often to visit your tutorials

    Thanks a lot for this tutorial

  12. Nice trice and knowledge dear, but its difficult to follow all steps in responsive blogger template, so please find some easy method for doing so.

    1. Your blog might have more than <data:post.body/> code, use try and error method, it will help to resolve your problem,
      And please don’t forget to delete code if it’s don’t work .

    1. Hi Goljar Ali, It’s working perfectly on my demo blog. Kindly reffer tutorial again.
      If you still facing any problem than kindly connect with my facebook page. i will try to solve your problem personally.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.