Facebook comment box has
turned into a technique to build the quality comments and visitor’s engagement
.The Facebook comment box is one of the top Facebook plugins that are utilized
on numerous sites and blogs. When you are utilizing the Facebook comment box on
your site, you can lessen the spam comments and keep up the nature of your comments.
Something else is, Facebook permits individuals to impart their comments to
their timeline. So if you have integrated Facebook comment box with your
Blogger blog, you can expect some quality traffic from those comments.
In this new article I'll
show you a way to include Facebook comments box on blogger blog.
This process consists of
two steps
- Create an application in Facebook and get AppID
- Add comment box to your blog
First
of all we need a Facebook AppID, it is easier to create a Facebook app and get
an AppID. Follow the below instructions and you can get your appid on the go.
- Go to Facebook developer apps page.
- Click on “Create New App” button.
- After
that you would see a pop out box “Select an App Platform” to create the
Facebook app.
- Select
Website and fill appropriate information of your app.
- Click on “Create App ID” button.
- Note down app id for further use.
- To make live your app navigate to “Status & Review” section and select the “Yes” option.
1. Go to Dashboard on Blogger
2. Click on >> Template
3. Click on >> Edit HTML
4. Search for>> <html>
5. Replace it with the following code:
<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns: expr = 'http: //www.google.com/2005/gml/expr'>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
7. Search for>> <body>
8. After <body> tag, paste below piece of code.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID HERE',
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>
9. Now search for>> <div
class='post-footer-line post-footer-line-1'>
10. After <div class='post-footer-line post-footer-line-1'>tag,
paste below piece of code.
<b:if cond='data:blog.pageType == "item"'>
<div align='center'>
<div style="background: #FFFFFF;">
<div style="color: #444444; font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif; font-size: 30px; text-align: center;">
<strong>Facebook Comments</strong></div>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div>
<div align='right'><a href='http://www.lablance.com/2014/12/how-to-integrate-facebook-comments-with-blogger-blog.html' target='blank' rel="dofollow"><small>[Facebook Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
No comments