This tutorial explains how to add facebook comment box to your blogspot blog easily.
1. Log in to your blogger account and disable blogger default comment.
Settings > Comments
Choose Hide and save your setting.
This is optional though, it depends on whether you intend to have two comment forms on your blog.
2. Next is creating your facebook application. Click here to create a facebook application.
i. Input the Application name
(ex., The 9ja Geek's Journal. This makes the the post on your visitor's wall look like via The 9ja Geek's Journal)
ii. Check Agree and click on Create Application. This takes you to the basic settings page.
iii. Change your Icon . (it must not b more dan 16*16)
Upload your own Icon. (it must not b more dan 75*75)
Then Scroll down and save changes
iv. Copy your App ID to a note or notepad
v. Click on Edit Settings and select Website.
vi. Write your site URL in full ending with a slash /
(ex. http://www.doncaprio.com/ or http://myblog.blogspot.com/
vii. Input your site domain
(ex. doncaprio.com or blogspot.com if you're publishing using blogspot sub domain)
3. Next is adding the required codes to your blog.
i. xmnls attribute
ii. SDK script
iii. Comment form code
Log in to your blogger account and click on Design > Edit HTML > Check Expand Widget Template
i. XMNLS ATTRIBUTE
-Press Ctrl + F and search for this code:
<html
This should be found on the second or third line of your template.
- Right in front of this, add the following code:
xmlns:fb='http://www.facebook.com/2008/fbml'
-Be sure to have a space before and after this code. Take a look at the example below
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >
ii. SDK SCRIPT
- Search for this code:
<body>-Immediately after this, add:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION 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>
-Be sure to change 'YOUR APPLICATION ID HERE' to the application ID you copied earlier!
iii. COMMENT FORM CODENow here comes the last part of the steps.
-Press Ctrl + F and find
<data:post.body/>.
- Immediately after this, paste the following code:
<div style='border: 1px #3b5998; background-color: #eff3fa;'><div align='center'>
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div><div align="right"><a href="http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html" target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>
</b:if>
</div></div>
Also, if you're using a magazine style template, you might have more than one
<data:post.body/> in your template. You must locate the one that contains the post body on the post page.
If you're confused about the right
<data:post.body/>, search for this code instead:
<div class='post-footer-line post-footer-line-2'/>
Paste the comment form code right below it.
Update
If you're using a dark template, the above light comment box might not be the best for your blog. You might try the dark facebook comment box below.
<div style='border: 1px #000000; background-color: #000000;'><div align='center'>
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div><div align="right"><a href="http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html" target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>
</b:if>
</div></div>
Share this post if it's helpful and leave a comment if you encounter any problem trying to make it work. It's working perfectly as you can see the comment box right below this post.
Stay Connected With Free Updates
 |
 |
 |
Subscribe via Email
|
Don Caprio's just another regular dude, an average person like everybody else and I live in The World's Most Populous Black Nation.
I started blogging late 2009, I'm still loving it and I'm the type of guy that'll love to have my computer inside my coffin when I die.Don't smile, it ain't no joke.
You can add me as friend on 
22 comments:
thanks a lot ...it really works....all of them who don't believe it just check my blog....thanks againg and a kiss for you
nice one .. really like it ... and helpful .. aw sum comments as well
Nice explanation!!! I really want it and now get it so thanks.....// :-)
So I actually went to the site for the berea post. This is a borderline case. She is coming close to being abusive with her posts. I understand not liking a mayor. The personal attacks on the site seem to go too far. business logo design
I followed all your instructions and it doesn't work for my blog. I did a preview and nothing shows
I suggest you start all over. It still works cuz it's the same code used on this blog
Action Web Group is dedicated to providing reliable and professional web hosting solutions.web hosting We offer the RubberBand Plan,domain name registration an expandable shared web hosting plan for disk space, bandwidth and more.
It is a rather useful article. It is insightful so you have not surprisingly done your study ahead of producing that post. I will need to return and observe your forthcoming articles or blog posts.
@FluidJoint Thanks for the compliment :)
I think very useful information. sure read again.
crm support
That's a very nice and so much informative article. I really impress with this article. I get many information from there. And now i often visit on that site. So please keep posting me such a informative article.
@Webiadenmard and Rugged LCD. I'm glad you foud the piece of information useful.
@Silu. I'm not sure you'll lose your old comments.
thanks
Thanks a lot. I went around a lot of posts and this one makes mine work. The only difference between this one and http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/ is your last line of div-class='post-footer-line post-footer-line-2'. My blog has two lines exactly the same. If I paste code after the second line, it never works.
@worm use d second procidure
i appreciate that post i like it
. i CANT SEE THIS POS
finasteride mg can you buy propecia in australia - propecia journal
Post a Comment