How to Add Facebook Comments System in Blogger Blog

Facebook is the biggest social network, in other words it is the biggest gathering of people virtually. When you are running a website or blog; you need to make sure that there is enough ways for the one billion active users of Facebook to engage with your blog. For many website owners, webmasters or anybody who has a stake in a website, opening a Facebook page and adding like buttons all over you site sometimes is just not enough.

That's where the Facebook comments plugin for websites comes in. A simple tool to allow Facebook users if they are logged in to Facebook, directly make a comment on your blog post with any problem. Just add the comment box in the site and logged in Facebook users can comment with ease like they are commenting in a post in Facebook and who isn't logged in to Facebook.

Adding the Facebook comments plugin in your blogger blog is very easy. First you will need to create an App in Facebook developers and then use the code for the comment box.

Step-1: Create a Facebook App and/or Get App ID

First you will need to create a Facebook App. Don't worry it's free and easy to generate one. If you haven't created a Facebook App then follow the instructions below.

1. Go to Facebook developers' website and log in.
2. On the top navigation menu, click Apps > Add a new App. If you already have an App created, then go to step-9 and 10.



3. Select "Website" from the opened box.



4. You will be taken to "Quick Start for Website" page. Enter the desired name of your new App. We are naming the app 'Bloggercomment' in this example.


You can also use any of the existing Apps here too.


5. After you finished typing the name click "Create a new Facebook App ID". Click it.
6. Select yes or no for "Is this a test version of another App" option and select a category; then click "Confirm".



7. That's it you have created a Facebook App. If you want you can continue to configure the App more. But job is done as far as getting a Facebook App ID.
8. Just after creating the App you will find a code which has the App ID. Look for something likeappId : '***************' in the code. If you cannot find then follow the next instruction.
9. Easy way to get the App ID is to go to developers.facebook.com/apps and you will find all the created Apps are listed. You will see the App ID is shown in the page. Copy it.



10. If you have an existing App then you must add "website" as one of the platform. For this go to theFacebook developers homepage > click Apps > click on the created App > Settings > click "Add Platform" > click on "website" > after that add the URLs of the Blogger blog > click "Save Changes" in the bottom of the page.

This is very important and you cannot escape this. If you want have the authority to moderate, report and delete comments in your Facebook comments, then you should create your own Facebook App and get the ID. Also remember that new or existing App; the "website" platform should be enabled for the App.

Step-2: Disable Blogger Comments

Running two different comments system is usually not required. I strongly suggest that if you are adding any third party comment section to your blog, you should disable your default blogger comment section. For that;

1. Go to Blogger Dashboard > Settings > Posts and comments.
2. In the "Comments" settings, Change the option to hide for "Comment Location".
   
   
3. Click "Save" in the top right of the window.

It's your blog and decision whether to disable the default comment system of blogger or not.

Step-3: Place the Facebook Comments Code in the Blogger Template

Now that you already have a Facebook App and got the ID you need to generate the code for the comment box. You can get the Facebook comments plugin codes from the developer site of Facebook but modifying and placing them is tricky.

In below not only you will get instructions for using them also tips to modify the comment box. Also tip for moderating them.

For adding Facebook comments plugin to your Blogger blog follow the instructions below;

1. Go to Blogger dashboard > Template > back up your template > click Edit HTML.
2. Before anything; you will need to add a Facebook Open Graph Meta tag for the ID of the Facebook App. Look for </head> and paste the following code before it.

<meta content='YOUR_APP_ID' property='fb:app_id'/>
<meta content='Your_Profile_ID' property='fb:admins'/>



Replace YOUR_APP_ID with the ID of the generated Facebook App. Replace Your_Profile_IDwith the ID of your Facebook profile. For this you have to go tohttp://graph.facebook.com/YourProfilename. For example if your Facebook profile URL is https://www.facebook.com/muntasirminhaz then you should go tohttp://graph.facebook.com/muntasirminhaz.

If you still haven't understood then read how to get Facebook profile's numeric ID.


3. Now search for <b:includable id='comments' var='post'>.
4. Copy the following code,
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class="fb-comments" expr:data-href="data:post.url" expr:title='data:post.title' expr:xid='data:post.id' data-width="100%" data-numposts="5" data-order-by="social" data-colorscheme="light"></div>
   </b:if>

   
   The code in the second (2nd) line is for the Facebook comments. See the table below to understand more about it.




Element	Description
expr:data-href='data:post.url' expr:title='data:post.title'	These are for getting the URL of the post, the title of post, when user/commenter selects also post on Facebook.
expr:xid='data:post.id'	To get the ID for the post.
data-width='100%'	The width of the comment box.
data-numposts='5'	Number of comments that will show by default. Value starts from 1.
data-order-by='social'	How to sort the comments. Values are
data-colorscheme='light'	The color scheme for the comments and available in light and dark.



You can find more about them in the Facebook developer comment plugin page. It is also wise that you have properly added the open graph protocol in your blog.


5. Just before closing <b:includable id='comments' var='post'> paste the following code like this
   
   

   <b:includable id='comments' var='post'>
   <div class='comments' id='comments'>
   .......
   </div>
   <!-- FB comments code -->
   </b:includable>

   
   In place of <!-- FB comment code --> paste the code from step-4.


6. Now search for </body> in the template and paste the following codes just before it.
   
   

   <script>(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 = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=YOUR_APP_ID&amp;version=v2.0&quot;;
   fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));</script>

7. Save you template and you have successfully added Facebook comments plugin to you Blogger blog. Check them out.

That's it. The Facebook comments plugin is added to your Blogger blog. You can also easily moderate the comments made in the Facebook comment box of your website by following the instructions above thoroughly. Just log in to Facebook and go to the post pages to moderate the comments.

If your need any help or facing any problem do share with me in the comments section. Do Share this information with your friends and subscribe to updates.