In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site.Facebook Comments can bring better interactivity into your Blog. These comments will work like a Facebook Wall.This tutorial will help you to easily setup Facebook Commenting on your Blogger Blog.
You can add comment box in 4 easy steps -
- Hiding Existing Comments
- Creating Facebook App
- Add Application and Moderator Meta Tags
- Adding Comment Box To Blogger
Features:
- Threaded Comments i.e Reply Button To Comments.
- Comment Permalinks.
- Likability.
- Can Subscribe or unsubscribe to comments.
- Can Moderate Comments at one place.
Drawbacks:
- Won’t Sync with your Existing Blogger Comments.
Adding Facebook Comments To Blogger
1. Hiding Existing Comments
- Before adding facebook comment box to blogger you have to disable your current blogger comments.
- To disable comment form Go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.
2. Creating Facebook App
- Now go to Facebook Developers page.
- Click on create new app button.
- Enter Some name for your App.
- Agree to the Terms and click on the continue button.
- If it issues a Captcha verification, type the Captcha and click on the Submit Button
- Now you will be taken to a Settings Screen.
- In the App Domain Field give blogspot.com (If you are using a custom domain give that) Give your Blog Address in the Site URL field under “Website” and Save The Changes. Copy the Application ID from the screen.
3. Add Application and Moderator Meta Tags
- Now go to Blogger Dashboard » Design » Edit HTML.
- Tick the Expand Widget Templates Box.
- Find <head> tag.
- Add below code just after <head> tag.
Modify the below code with the application id copied in setting page.
<meta content='YOUR_FACEBOOK_APPLICATION_ID' property='fb:app_id'/>Save your template.
You should create the Facebook Application and the above fb:app_id meta tag should be added to your Blog. Otherwise you won’t be able to manage/moderate your Comments from a single Place(you will have to go to posts one my one and moderate and that too is possible only if you have added the fb:admins open graph meta tag).
4. Adding Comment Box To Blogger
Now you have to add the Facebook Comment Form to your Blog Template. To do that Go to Edit Template > Design > Edit HTML and click on the “Expand Widget Templates” checkbox
Find the following code in your template(Use the keyboard shortcut Ctrl + F), and immediately below that paste the following code:
<p class='post-footer-line post-footer-line-3'>If you can't find this try this one.
<div class='post-footer-line post-footer-line-3'>If you cant find that as well, then find
<data:post.body/>Paste the following code just below the line that you just found out
<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>- If you want to change the width of comment box then find this line width='450' in line number 9
- If you want dark version of facebook comment box then find this colorscheme='light' and change light to dark in line number line.
5. FB Namespace Declaration
Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following XML namespace declaration will take care of that. To declare the namespace, find
<htmland change it to
<html xmlns:fb="https://www.facebook.com/2008/fbml"Save the Template. This namespace declaration is necessary for all FBML widgets using the fb tag. So if you have already added the namespace declaration while adding some other FB plugin, then you can skip this.
You are done.....
Check your blog you should see the comment box on your blog.
Displaying Facebook Comment Count (Optional)
Use the following code in the post loop to get a Comment Count Display with a link to the comment form. This code should be added within the post loop. For example, this can be added below <data:post.body/>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'></fb:comments-count> comments</a>If you are getting problem then post it below through comments.I'll glad to help you.
Preference - Bloggerplugins.
Thank You So Much Buddy :-) ...I'm glad u help me fix this,thank you so much again...
ReplyDeleteit keeps sayin "Error parsing XML, line 1028, column 366: The element type "br" must be terminated by the matching end-tag "
ReplyDelete"
I've fixed it check it again
ReplyDeleteIts not working for me now, as i changed my template, it got vanished, and now im trying but it aint working, need help, waiting for your reply..
ReplyDelete@desirockers - I have checked my codes again and they are working successfully please try again.
ReplyDeletei tried buddy, will you please tell me anyother way to get it work, it sure isnt working for me, i tried it many times..
ReplyDeleteOk now try this.
ReplyDeleteBackup your template.
1. Add below code just before </body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2. Now add below code just below <div class='post-header-line-1'/>
<div class="fb-comments" data-href="http://www.helperblogger.com" data-num-posts="1" data-width="470"></div>
Replace helperblogger with your domain change width 470 as you wish....
I Want To Show Facebook Comment For Blogger Post..........
DeleteEmail: sahirajaan@gmail.com
Please Help Me.........Please Please Please .........
http://freelibrarybook.blogspot.com/
Hi ! I trried All the steps that u told but nothings happening :(
Deletenope, still no luck, this last one doesnt need any APPID ?
ReplyDeleteSoory, that was last one.I checked my code again in another template and its working.Please provide me your blog URL.Your profile is unavailable.
ReplyDeleteSee this image - http://i.imgur.com/c5qTF.jpg
I tried this on my other blog and it works. But on the other blog i have it doesn't. Is there a code that blocks this plugin? As per Facebook developer site fb-root shout not be hidden... is that the root of the problem? i'm trying out this over and over again but i really doesn't work on m other site :(
ReplyDeleteCan you provide the URL of your that specific site ?
DeleteI am really impressed by this amazing and informational site.
ReplyDeleteFacebook Application Developers
This comment has been removed by the author.
ReplyDeleteThank You So Much..:)
ReplyDeleteits working to my blog now
http://photomaga-zine.blogspot.com
It doesn't work for me. And i think sth went wrong with number 3 bcoz i found this but NOT only <html
ReplyDelete<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
Please help. What do i have to do?
ReplyDeleteJust replace
Delete<html
with
<html xmlns:fb="https://www.facebook.com/2008/fbml"
don't change any other things..
Hi Rahul
ReplyDeleteNice post, I just wanted to know, if we use this what about the present comments , will they gets replaced ??
yes your current comments will replaced....
DeleteDoes it means it will get removed forever.
DeleteNo they will get back as soon as you remove facebook comments.
DeleteAWESOME :D
ReplyDeleteNeed some help here.
ReplyDeleteI have been trying to get this plugin working for days now. Not sure if I messed up the HTML but I just can't get this to work.
Please help. Thanks.
URL: http://marchformarsh.blogspot.com
Hey I have just visited to your blog and the comment box is working then whats the problem? If you have faced any problems then I am sorry :( I think you have fixed it :)
DeleteI went on the facebook developers site and got it working. But I would like for each comment box to be different, how do you do that?
DeleteAnd how do you keep the comments in reverse chronological order?
Thanks.
Can u please visit my blog and say how it is ?
ReplyDeletewww.netinfozblog.in
Of course bro. why not.I just visited your blog and it is really amazing also the design of your blog is neat,clean and simple :) specially I like footer section.Keep it up.
DeleteGreat! How to change the language?
Deletenot working.what to do
ReplyDeletehttp://howtogetmoredollar.blogspot.in/
Help! When I change
ReplyDelete<html
with
<html xmlns:fb="https://www.facebook.com/2008/fbml"
I couldn't save my template. Does this work for all templates or for a specific template only?
You template already have this,so avoid this and follow the next steps.
DeleteThis comment has been removed by the author.
ReplyDeleteCool!!!
ReplyDeleteThnq so much 4 this wonderful post...
I had some trouble with the comment count... So it took some time 2 correct it..
Athira
It work!!!! thanks xo much dear!! www.kakagod.blogspot.com/2012/08/chris-brown-mixtape-sht-music-video.html#.UCB2xuErPsM
ReplyDeletePlz help with the notification...I need the notifications of the comments made by the readers. Plz help..
ReplyDeleteAthira
Hey I have no any idea about notifications also I have never used FB comment box but I will try to find out about this.I think there is no any notification system as Disqus and IntenseDebate.
DeleteWhile creating a APP ID for FB comments use registered FB account i.e. which is linked to your other mail account.
@ admin
ReplyDeleteI didn't find any of the codes above in step(4) And i tired codes in your editor it works find but it doesn't so up comment box on my site
Really Need Help. :(
My Page: www.nepcan.net
then find data:post.body
Deletehai bro..
ReplyDeletei cant moderate comments what should i do?
I tried it but doesn't work... can you help? website BoomStocks.com
ReplyDeleteThank you! Its work!
ReplyDeleteIt Was Great Budddyy
ReplyDeletethanx man really usefull and without any error done to mine blog thnxz
ReplyDeleteWorked perfectly. Thank you so much !!! ^_^ Nice job!
ReplyDeletehttp://mylikeszoom.blogspot.com
I followed every instruction but it doesn't appear on my blog. :( Need help.
ReplyDeleteI so just want to thank you for this wonderful post! it's working on my blog http://lailigurl.blogspot.com .. :)
ReplyDeletebrother any ideas to show Facebook recent comments in blogger widget..?
ReplyDeleteit doesnt work ... www.timeline-covers.org , can u help me out?
ReplyDeleteworkinf fine dear on my blog
ReplyDeleteHi, thanks a ton, finally i got a fb comment box where there was no ad of other person, rest 2-3 comment box which i installed were having links and/pics which had logo of thwir own blog/website.
ReplyDeleteok now my fb comment box is working but i have a big question to ask, hope u solve my query...
this is the link to my blog: http://ultimatesqs.blogspot.in/
when u go to any individual post on my blog, like for example this one: http://ultimatesqs.blogspot.in/2013/02/blog-post_3873.html
as u can see, i get my fb comment box below the pic and below fb comment box i get my social sharing buttons, my problem is that the social media sharing button comes below fb comment box whereas i want first social media icons and below that i want fb comment box, as i dont know anything about coding can u plzzzzzzzzz reply in as simple steps as possible, plzzzzzz my e mail id is vishalrpanchal@yahoo.com desperately waiting for ur reply...
Hello Rahul,
ReplyDeleteas you can see it works pretty good http://usteu8.blogspot.com/.
My question now. I left the blogger comments embedded and till the update it shows me both boxes.
Is there a way to keep it? That both comment boxes are always available?
Thanks in advance mate.
thanks ,i tried many off blog tutrls but this is only worked.wooooow thanks fish,this is exslad wrk :)
ReplyDeleteHey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.
ReplyDeleteIn kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results just remove the div tags and give the object some width/height parameters. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)
<!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='' type='text/html' width=''>
</object></div>
<!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->
One final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...
thanks.. bro.. it's working .. gr8..
ReplyDeletebut yar.. i need one sliding comment box..i mean.. it must be always on the top in the lower right corner..
similar to fb chat box..
possible????
how do i enable it for mobile view?
ReplyDeleteI also want to use in blogger mobile template.... But how???
DeleteThanks for useful info. Is there a way to make facebook comments box always visible after each article? at the moment my readers have to click on 'no comments' note to see it... :( http://www.mylifemypassion.com/
ReplyDeleteThanks!
it worked for me but i have no notifications ...............................please help!!!!!!!!!!!!!!!!
ReplyDeleteIt's come to my attention that the Friday Fill-Ins is apparently attracting spammers who are trying to lure participants to their blog. To counteract this, if your Friday Fill-In post isn't at the top of your blog on Friday, your link will be deleted. I will be checking this each Friday. Also, the link-up on Mr. Linky will close on Saturday from now on. Thanks for your understanding
ReplyDeleteREAD FULL STOry
This comment has been removed by the author.
ReplyDeleteI think the above code is to big and almost not working properly as dynamically different for each blog post. By implementing this code one get same fb comment box for each post. In which all comments are visible for every post and that is not good.
ReplyDeleteBy searching over the net for a long time I found only one site from something 30 sites taking
place in top 5 search results. It's an usual thing because this trick to change comment box
dynamically is a big problem to get rid due to cross site scripting (blogger has its own API and
fb also has its own). Before last one search i got every searched site with normal fb comment box.
It is so cool because here no app id required. It uses dynamic xid to get different fb comment box for each post.
you can get the solution from this site.>> http://pitora.blogspot.in/2013/04/add-different-fb-comment-boxs-for-each.html
ReplyDeleteGood blog and the contents are really nice, thanks for sharing here with us.
parking management
parking guidance
parking counting
Now a days most of the peoples are using the Facebook comment box, most of the bloggers are don't have the Facebook comment box. I think your article is great resource for those kinds of peoples. Chennai Hospitals
ReplyDeleteDidn't work for me.
ReplyDeletethanks for all your effort salute
ReplyDeletebut a small irritation
i am not able to copy ur code from your page
Find your dream homes through the experts in Real Estate sector on : WWW. PropertyDealerOntips.COM 01165556555
ReplyDeleteFinding experts and getting the best consultancy in Real Estate becomes so easy now, you say and we give….Just call on 01165556555 and get the details for FREE on your phone right away.
It works but if I hide bloggers box, facebook box disappear too. Any help?
ReplyDeletethis trick is not working....!
ReplyDeletecan u help me?
Your essayis incredibly instructional! Looking at your work has enlightened me. Learned a lot from it. I will store your website and will continue to browse your upcoming content. Good! Thanks!
ReplyDeleteThanks again for sharing this article! essays.mightystudents.com
ReplyDeleteThanks
ReplyDeleteYa true some are using it some are trying out something new. There may be some other medium to share their blogs. But the blog you shared is informative & cool. Have tried this and its working!
ReplyDelete