How To Add Facebook Comments To Your Blog

Facebook Comments system may be a reason for social media success for most of us. It is best among all Facebook plugins for blogging. On the internet, you may find many tutorials that may guide you but all those methods work perfectly on Blogger with the custom domain but when you use the Facebook Comments system on Blogger without custom domain due to many country-specific domains of a single blog become a problem. Today in this post we will cover how to rectify errors and problems which are due to Blogger's country-specific domains.

Note: I suggest you take a backup of your Blogger template. Because after implementing this comments system your old comments will disappear from your blog.

1. Go to Facebook Developer Page [https://developers.facebook.com/apps/]

2. Then click on + Create New App.

Facebook Comments

3. Now fill a valid App Name and click on Continue.

Facebook Comments

4. Fill Captcha Code and click on Submit Button.

Facebook Comments

5. Now you'll get App ID.

Facebook Comment Configuration on Blogger

6. Below under Basic info opposite to App Domains fill 17 Blogger's country-specific domains.

blogspot.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

7. Now under 'Select how your app integrates with Facebook' you'll find 'Website with Facebook Login' and 'Site URL:' please fill your blog URL here.

8. At last click on the 'Save Changes' button to save app settings.

9. Now prepare Application and Moderator Meta Tags.

<meta property='fb:admins' content='ADMIN-NAME'/> <meta property='fb:app_id' content='APP-ID'/>

Example –

<meta property='fb:admins' content='ADMIN-NAME'/> <meta property='fb:app_id' content='APP-ID'/>

10. Go to Blogger Dashboard ¬> Select Blog ¬> Go to Template tab ¬> Click on EDIT HTML
11. And under <head> paste above meta tag as following

<head> <meta property='fb:admins' content='VPNazar'/> <meta property='fb:app_id' content='348446671899960'/>

Note: Without using this meta tag you will not be able to moderate Facebook Comments. And MUST change ADMIN-NAME and APP-ID with correct values.

12. Now in your blog's template try to find one of the following code

<div class='post-footer-line post-footer-line-3'

<p class='post-footer-line post-footer-line-3'

If unable to find both of the codes then search for the following code

<data:post.body/>

13. And Paste the following given code just below. Must change App-ID

Last Update: Tuesday, 18/06/2013

<b:if cond='data:blog.pageType == "item"'> &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script&gt;(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_GB/all.js#xfbml=1&amp;appId=App-ID";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));&lt;/script&gt; &lt;div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-num-posts="10" data-width="470"&gt;&lt;/div&gt; &lt;/b:if&gt; </b:if>

14. In this code, variable "data-num-posts" is a number of comments and the default value is 10 and data-width with value 470 Comment form width. You may change both variables as per your blog design.

If you want to disable Blogger default comment system then please following steps:

1. Go to Blogger Dashboard and select Blog
2. Switch to the Settings tab
3. Then click on Posts and Comments tab
4. And see opposite to Comment Location and select Hide option from DropDown
5. Finally, click on the Orange color Save Settings button given on the upper left side.

I believe you'll be able to use this great comment system on your blog. If you still have any query please communicate with your comments.