Add Facebook Comments to Blogger Posts

0
Add Facebook Comments to Blogger Posts

Do your blogger does not have the facebook comments feature? Don’t worry, we’ll explain how to add Facebook comments to your Blogger posts. As you know, facebook is the most famous social website. A large number of internet users have the facebook account. Therefore, most of the websites offer facebook comments & login feature. You can also implement the facebook comment box into your bog. Before, starting to add facebook comment system, lets have a look on its PROS & CONS!

Benefits of Facebook Comments Box on Blogger;

As mentioned before, Facebook is the most famous social networking site, that’s why you thought about it to ease your blog visitors. In addition, once your visitors will post a comment on your blog’s post, facebook will keep on sending the notifications for future comments on the same post.

Facebook comments system provides numerous commenting ways. In case someone does not use Facebook, he/she can use his/her Gmail, Hotmail, Yahoo or AOL account to comment on your blog’s posts. Moreover, Facebook comment system itself deals with the spam comments. It makes your blog user friendly, interesting & modern. Furthermore, it also helps in increasing the blog’s traffic.

Disadvantages of Facebook Comments Box on Blogger;

In case you’ll use one & only facebook comments box on your blogspot blog, you’ll totally depend on Facebook. Its the Facebook who has control over your blogs’ comments.

Now when you know all the advantages & disadvantages of using facebook comments script on your blog, it’s time to know how to do it!

How to Add Facebook Comments Box to Blogger Posts

How to Add Facebook Comments to Blogger Posts

πŸ‘‰ Step 1: On the very first step you’ve to create the facebook app

First of all you’ve to create your facebook app, for this visit this link. Follow the instructions gien in photos below;

πŸ‘‰ Step 2: On the second step you’ve to implement the facebook comments plugin into your blogger’s blog

After creating the Facebook app, its time to connect recently created fb app with your blog, for this go through the following easy steps;

2.1 Click on the “Theme” on the left sidebar menu then on down side arrow along with “Customize” button. Next click on the “Edit HTML” on the new opened downward menu. (see photo below)

Blogger Edit HTML template file

2.2 Now when your template’s all HTML script is in front of you, search for <html & replace with the code given below;

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

2.3 Now find & paste following code just below the searched term.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='WebNetAZ' property='og:site_name'/>
<meta content='Blog-Logo-Icon' property='og:image'/>
<meta content='Your-App-Id' property='fb:app_id'/>
<meta content='http://www.facebook.com/webnetaz' property='fb:admins'/>
<meta content='article' property='og:type'/>

2.4 Important: Replace the following terms in above code!

  • WebNetAZ: with your own blog name
  • Blog-Logo-Icon: with your own blog’s logo (past direct link)
  • Your-App-Id: with your recently created Facebook ID
  • http://www.facebook.com/webnetaz: with your own facebook page username

The above step-2 will better assist to debug the webpages under Facebook graph APIs.

Facebook Comments System for Blogger’s Blogspot

πŸ‘‰ Step 3: On this step you’ll add the facebook comments box into your blog

In order to add the facebook comments box after all blog’s posts, follow the following procedure;

3.1 Again open HTML file of your blog (mentioned above on 2.1) & search for body> or <body expr:class= . Furthermore, paste the following code after the searched tag, i.e body> or <body expr:class=

<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP-ID',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

3.2 Important: Replace “APP-ID” in above code with your own facebook app’s ID. (see photo below)

adding the facebook comments box into blogger

3.3 Again search for the following code in your blog’s HTML file

<b:include data='post' name='post'/>

3.4 Paste the following code after the above searched code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div>
</div>
</b:if>

In the above code, you can adjust the width, padding & color scheme of facebook comments box according to your blog’s requirements. (see photo below)

adding the facebook comments box into blogger step 2

You’re done, save your template & check any of your published post’s comments’ section, facebook comments box must be there.

That’s all about “How to Add Facebook Comments Box to Blogger Posts”. In case of further queries, feel free to comment below or contact us.

We will be happy to hear your thoughts

      Leave a reply

      WebNetAZ.com
      Logo