How to Add Facebook Comments on Blogger Blog
The Facebook comments plugin lets your visitors comment on your site content using their Facebook account. They can choose to share their comment activity with their friends on Facebook as well.
Many bloggers want to make use of the Facebook Comments plugin but simply face difficulties with the HTML coding. A number of websites are providing steps on how to add the plugin on blogger, but sadly the codes have errors in them so it's not much help. If you are reading this right now you have probably been getting parsing errors from the HTML codes you got from other pages, or it's simply your first time attempting to setup the comments plugin and you want an easy way of doing it.
PLEASE NOTE THIS GUIDE IS TARGETED TO BLOGGER USERS
Step 1: Create Facebook app
- You will need to go onto Facebook Developers
- Once logged in you will see a navigation menu labeled My Apps at the top right corner
- Click on My Apps > Add a new App. The following page will then pop up where you will be required to enter your details
- After that's done you will notice that you have created your App ID which is essential for the steps to follow. It can be located on your dashboard.
- Go to the app's settings > Add Platform and select the 'website' option. Please note this is very essential for the plugin to work.
Step 2: Placing the Facebook Comments Code in the Blogger Template
1. Go to Blogger dashboard > Template > backup your template > click Edit HTML.
2. Look for </head> and paste the following code before it. Use Ctrl F to search.
<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_ID with the ID of your Facebook profile. To find your Facebook profile ID CLICK HERE
3. Search for <b:includable id='comments' var='post'>
4. Paste this code straight after your search result from No. 3
4. Paste this code straight after your search result from No. 3
<div class='comments' id='comments'> </div> <b:if cond='data:blog.pageType == "item"'> <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>
4. 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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=YOUR_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>