Menu
» » » Enable Facebook Comments Without Removing Google + Comments

A+ A-

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 .
By
Labels: ,

Share to:

at 18:04:00
 
Top