1. Create a new Facebook App: Login into your Facebook then click on Facebook developers. After that click on Create New App and there appears a pop of form. Fill that form. Then fill that Captcha. Then copy the app id into your notepad, this is needed in further steps
2. Now let’s install the Facebook comment in blogger blog
It is necessary to login into your Facebook dashboard. Then go to template tab and click on edit html. After that find the following code.
<html......> This code is in the first row of every blogger, so you can find it easily.
Then, just paste the following xmlns:og='http://ogp.me/ns#' code just after the highlighted code which is shown in above. When you add this code the html structure is look like
<html xmlns:og='http://ogp.me/ns#' ......
xmlns:expr='http://www.google.com/2005/gml/expr'>
Now find the <body> tag and paste the given code just after that <body>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'AppId',
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>
The one thing is that you just replace the AppId with the App id you saved in your notepad earlier. You your facebook page url in connect.facebook.net/
Now there is needed to add Meta tags. Just find the </head> and paste the following code replacing your app id
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='AppId ' property='fb:app_id'/>
<meta content='Info@UrDoorStep' property='og:site_name'/>
<meta content='http://www.facebook.com/joy.ikpefua' property='fb:admins'/>
<meta content='article' property='og:type'/>
3. Comment box in blogger blog.
At last you should put comment box structure in the blog.
Go and just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code or anywhere you want to show the Facebook comment box.
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><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='100%'/>
</div>
</div>
</b:if>
<div style="position:fixed; bottom:0px; left:0px; color:#898989; font-size:12px;"><a href="https://infoaturdoorstep.blogspot.com/2016/30/how-to-add-facebook-comment-box.html">Get Widget</a></div>
Now you have successfully add your Facebook comment box.
Note: Replace http://infoaturdoorstep.blogspot.com by your blogurl. If you want to change the width of comment, simply change the width.
Think Its Important? Please Share
We appreciate your Comments. Please Do