Subscribe For Free Updates!

We'll not spam mate! We promise.

Enable Facebook Comments Without Removing Google + Comments

Asslam o Alaikum dear friends

Today I am going to share you that how can you 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.Now write Name of your application 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:ifcond='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='550'            />        </div>                 </div>                </b:if>

And you have done it .

Good luck and enjoy
My comment box is waiting for your opinion about this post.

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →
Powered By: BlogYard