How to add Latest Facebook Comment Box in Blogger
Facebook has provided many plugins for websites and blogs. Recently the developers of Facebook have released the plugins “Facebook Comment Box”. This is awesome plugin of the Facebook. Using this Facebook comment box your blogger and websites user or viewers can comment on your posts and those comments will be automatically shared in their Facebook Comment Wall.
Facebook comment box makes your visitors catch you easily, so this can be very important for those people who want directly interact with the admin and other visitors. I know there are various people who want to know the Facebook comment box on their blogger blog, Wordpress blog and many other site. So this tutorial can be the best solution for them. So now we will suggest you how to add simple comment box of Facebook in the blogger blog. You should that everything have its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.
First of all, here we are discuss about the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media of the world. They always introduce new features to serve the people and to catch the visitors more on the Facebook. So Facebook comment box is one of their popular feature.
when some people like and reply to their comment. notification is appeared to the user. And it also provides multiple commenting features.
The main disadvantage of Facebook comment box in blogger is that Google spider never crawl Facebook comment, so these comment can not be useful in the view of optimization.
Read also: Facebook post share button in blogger posts
You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of older blog's templates Method 1 might not work. So I recommend you to use the methods which works in your blog.
This are one of the most using techniques to making more visitors on your blogs and sites.
It is the beginning thing that you should do which you can do easily by Facebook developer. First of all you should login into your Facebook then click on Facebook developers. After that click on Create New App
and their 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.
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
The one thing is that you just replace or add your AppId below AppId. You put your blog name in All Blog Solution and your facebook page url in http://www.facebook.com/rakepoint.
Now there is needed to add meta tags. Just find the </head> and paste the following code replacing your app id
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.
Now you have successfully add your Facebook comment box.
Note: Replace rakepoint by your facebook url. If you want to change the width of comment, simply change the width. Thanks you did.
Watch and follow the below video
Facebook comment box makes your visitors catch you easily, so this can be very important for those people who want directly interact with the admin and other visitors. I know there are various people who want to know the Facebook comment box on their blogger blog, Wordpress blog and many other site. So this tutorial can be the best solution for them. So now we will suggest you how to add simple comment box of Facebook in the blogger blog. You should that everything have its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.
First of all, here we are discuss about the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media of the world. They always introduce new features to serve the people and to catch the visitors more on the Facebook. So Facebook comment box is one of their popular feature.
when some people like and reply to their comment. notification is appeared to the user. And it also provides multiple commenting features.
The main disadvantage of Facebook comment box in blogger is that Google spider never crawl Facebook comment, so these comment can not be useful in the view of optimization.
Read also: Facebook post share button in blogger posts
You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of older blog's templates Method 1 might not work. So I recommend you to use the methods which works in your blog.
This are one of the most using techniques to making more visitors on your blogs and sites.
Step 1: Create a New app
It is the beginning thing that you should do which you can do easily by Facebook developer. First of all you should login into your Facebook then click on Facebook developers. After that click on Create New App
and their 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.
Step 2: Now lets 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 or add your AppId below AppId. You put your blog name in All Blog Solution and your facebook page url in http://www.facebook.com/rakepoint.
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='rakepoint' property='og:site_name'/>
<meta content='http://www.facebook.com/rakepoint' property='fb:admins'/>
<meta content='article' property='og:type'/>
Step 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://allblogsolution.blogspot.com/2014/02/how-to-add-latest-facebook-comment-box.html">Get Widget</a></div>
Now you have successfully add your Facebook comment box.
Note: Replace rakepoint by your facebook url. If you want to change the width of comment, simply change the width. Thanks you did.
Watch and follow the below video