Saturday , December 16 2017

How to Add Facebook Comments Box in Blogger

In this post, we are going to cover how to add Facebook comments box in blogger. The Facebook comments box allows you to show the Facebook comments on your blog. Before to get start our mean tutorial I would like to share with you why people use the Facebook comments instead of blogger default comments system. Using the Facebook comments box in a blog has many benefits like When a visitor leaving a comment on your blog and also check the box to share their comment on Facebook with their friends which create more chance to get additional traffic. Apart from that, it removes the anonymity factors because the users will must use their Facebook profile and you will get rid from spam comments as well.

Also Read

So, let’s start

1: Creating a Facebook App

In the first step, we are going to create a Facebook App, to create new app fallow the below steps.

1. Log in with your Facebook account and then visits the Facebook Apps URL which is follows: https://developers.facebook.com/apps
2. Click on add a new app button.

3. Fill the form by app name, email address, and select a category and then click on create app.

After that you will login into the app dashboard where you can find the app id, please note that.
4. In this step we need to add our blog URL, to do this in the left panel of your app dashboard, select setting, then +add platform and enter your blog URL and click on save change button.


5. We also need to available our app as publicly, to do this, click on reviews in the app dashboard and slid the button no to yes. Now our app is ready and goes to the next step.

2: Adding Facebook SDK and OG Tags to Your blogger Blog

To install the Facebook comment box in your blogger blog you will need add follow SDK and OG tags to your blog.

1. Login in your blog account and go template >> edit HTML and search <html .… which usually first line your blog template and now copy the this xmlns:og='http://ogp.me/ns#' ...... code just paste here. Your final HTML code look like this

<html xmlns:og='http://ogp.me/ns#' ......
xmlns:expr='http://www.google.com/2005/gml/expr'>

2. In the next step, you need to search <body> tag and copy the below javascript SDK and paste just below it. Make sure to replace YOUR_APP_ID with your app id.

<div id="fb-root"></div>
 <script>
 window.fbAsyncInit = function() {
 FB.init({
 appId : 'YOUR_APP_ID',
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml : true // parse XFBML
 });
 };
 (function() {
 var e = document.createElement('script');
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
 </script>

3. Search </head> tag in your blogger template and place the following just above it but make sure to replace your-app-id with your Facebook application id.

<meta property="fb:app_id" content="YOUR_APP_ID" />

3: Adding Facebook Comments box to Blogger

This step depending on you where you want appear Facebook comment box, but we usually install at in the below posts. To install here follow these steps.

1. In the template, search for <b:includable id='comment-form' var='post'> and just below it paste the following HTML Coding. If you unable to find this code, then search <div class='post-footer-line post-footer-line-1'></div> and paste just below it.

<b:if
 cond='data:blog.pageType == "item"'>
 <div
 style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
 <script
 src='http://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='auto'
 />
 </div>
 </div>
 </b:if>

2. Now click on save template button and view blog and check the result, Hopefully, it will be worked on your blog.

I hope this article helped you to add Facebook comments box in your blogger blog. You may also want to check out our guide on how to add disqus comments in blogger. If you find this article helpful then share it with social media with your friends. Thank you for visiting.

One comment

  1. Hi Admin,
    congratulations. Your blog site is most nice, unique and great content. It has attitude me. So, many many thanks. You can start guest author to most welcome our site as poisaclick.com

Leave a Reply

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