Enable Facebook Comments Without Removing Google + Comments ~ JLI NAIJA

This tutorial will guide you on how can enable Facebook comments on your blogger blog without removing Google + comments.

1st step creating app

Just go to Facebook Developers Page create a new app. click here
Now write Name of your application(your website) and press continue button.In a new page you will find your app id and secret code just copy it and save it in a text file.

Step 2 installation in blogger

Just go to Blogger Dash Board>>Template>>>Edit HTML
and search for below lines
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

and replace these lines like below

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

Now find <body> tag.And after this insert below code.Make sure to change highlighted lines (Your APP ID) with your Facebook 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>

Now search for </head> And just above it insert below lines.Replace Your APP ID with your own APP ID.
<meta property="fb:app_id" content="YOUR_APP_ID" />

Now find these lines carefully it is important
<b:includable id='comment-form' var='post'>

And just below it insert below code and save your template .

<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='600'

/>

</div>

</div>

</b:if>

preview your blog post to cross check your work, if it display then you are done but if not, press control z on your keyboard till no more changes or simply click on revert changes at the top corner of template editor and then start all over again.
if you have issues enabling it, please drop your comment so we'll help you out