Facebook comment box is one of the useful tool for bloggers to increase conversations. Recently Facebook has launched many social plugins for bloggers and web developers and one such is improved Facebook comment box. So here in this post I will teach you how to add/integrate Facebook comment box to blogger in simple steps. Before getting into the process I recommend you to back up your template and previous comments in blogger wont be visible if you use Facebook commenting system.
Step 1: Visit Facebook developer page and enter your blog name, URL and click on Create application.
Now copy the App ID and save it in a notepad
Step 2: Login to you Blogger dashboard and navigate to Layout > Edit HTML and check on Expand Widget Templates. Search for the code <data:post.body/> or <div class='post-header-line-1'/> and paste the code below <data:post.body/> or <div class='post-header-line-1'/> and save the template.
<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' src='http://1.bp.blogspot.com/_ubwIhqPcR6M/S_bFnzvtkDI/AAAAAAAAA5A/ta5IbGqJZYU/s1600/cmds.png'/></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APPID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>Change the APPID on the code with your APP ID provided from Facebook and save the template.
Step 3: Now you need to hide default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.
Note: Using Facebook Comments will hide your blogger comments. So use this comment box wisely.
The like button on my site has stopped working for some reason—it was working just 2 days ago.
Whereas before I (and other FB users) can click the “like” button and it will appear on their profile, today clicking it will “temporarily” show that the page is liked BUT after refreshing the page, it shows as being not liked yet AND it does not show as “liked” on my profile.
Can you show me what is wrong?
same to me. It’s will be working after some days / weeks. It’s facebook error.
This is the easiest procedure on Blogger
http://developers.facebook.com/docs/reference/plugins/comments/
Check my Blog to see result
http://maxginez3.blogspot.com/
Thanks for posting this comment
Regards
I need help, I did as you said in this article and instead of appearing the fb comment box it appears unoe heart
i want comment form like your site..
can you please tell me how to create it..
The art of brewing beer requires cleanliness and patience. My first brew took about five weeks from making the wort to opening my first bottle. I made a California Common style beer, much like Anchor Steam. My first batch produced about 4 1/2 gallons of beer, which came out to be two dozen 22oz bottles. It turned out great and it has propelled me into the world of crafting beer. “Wort is what brewers call the sweet, amber liquid extracted from malted barley that the yeast will later ferment into beer ”
The major media largely ignored the fact that James Lee, the hostage taker who invaded the Discovery Channel’s Bethesda Maryland offices on September 1st 2010, had Darwinian evolutionist motives.
how to change the width of the comment box?
Fell at the first hurdle!
I’m not getting past the first stage – creating an app. It’s saying I need to add / or ? at the end of my URL. Does it not like blogspot URLs?
(I tried it anyway, no joy – just landing back on the app page!)
I’d love to be able to implement this – I’ve followed a few blog tutorials now and none so far have worked (the last one implemented FB comments, but they appeared on EVERY post, not just specific ones!)
Thanks in hopefulness that you have time to answer!
x
Thanks for this simple and useful post; please let me know to change the width or box
how do u get this comment box
Hi, I got the APP ID, but unable to find or in my template. What should I do now?
I found where to post it and did so. I’m not getting a comment box rather getting the logo that says “We (heart) comments”. What am I doing wrong?
i would love to be able to have both. Those you want to use the regular comment and those who want to use the facebook comment
I’ve been reluctant with adding facebook comment to my blog. I guess it’s time to give it a go. Thanks for sharing..
I get my APPID,but i cannot create it suscess,
can give a help?
Thanks for such a great article,,, i will try to do as you say,, hope it will be work for my blog..
Thanks again.
Hey Franklin,
What is my Facebook App or Where I can get it because as I am not able to get any App ID and How Do I reply to Comments?
I don’t know where to change the APPID…
you have to replace the word APPID
this procedure is no longer active try this http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/
and what?
why my comment box appear at the top if the post content not below it
Hi there,
I’m getting the following Database Error:
Sorry, a temporary error has occurred. Please try again.
Any idea what is going on? Thanks!
Hi Franklin,
Thanks for these useful tips, it really works for my blog and I like it
Comment box was working well on my page now it gives me this message; The comments plugin requires an href parameter, can you please show me how to fix this ?
There must be a way to enable comments using the authorization via Facebook along with the original comments (side-by-side). I saw this approach implemented on some stand-alone blogs (probably WordPress engine was used there), but I’m sure it should work somehow for free blogs as well.
thanks but it’s not appear in the main page !!!
it appears only when i open the post
i wanna it to appears on all posts in the main page, is it possible ??
Please help. I cant find these codes on my html for blogger. weird.
or
i dont know where to paste the code. thank you.
how to use 2 comment system (Facebook Comments Box and default blogger comments) on blogger without disable one of??
Thanks for sharing this tutorial. I believe the way social plugins are suppose to be set up has changed recently but still this is a good place to start for blogger users.
thanks post full .but i can’t with :http://developers.facebook.com/setup/
hey sir i had added the code to my website but box did not appear what to do??
How i change width of comment box …
Hi Franklin! Am glad that you have shared this technique however, I’m not familiar with the scripts on my blogs html so I’m a bit hesitant to proceed. I just want to know where exactly to find or . You’re illustration above in brown box is not showing that you have pasted the APPID. Please help me. I’m just so excited to have FB comment box on my blogspot. Thanks in advance
Omg! I did it thank you so much, I have my comment box ♥ u! ;D
Hey If i enable this If some one comments will i receive notification as some one commented in your blog?
It comes up and down what to do :’( check and say please geekspot.in
i have seen many posts about , how to plot a facebook comment gadget in they blogs, but your explanation some how are missing a lot of steps that bloggers suppose to know about.
good work well done
Hi, please help, this always shows
The reference to entity “appId” must end with the ‘;’ delimiter.
please help me..I’ll post the code below
(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&appId=given by facebook”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
I have installed Facebook comments box in my blogger site http://www.bazics.net but it does not show. What the problem with this? Do I really have to create an APPID? Because I just got the code from the Facebook Comments Plugin without creating an APPID because it is not needed there.
Thx your tutorial really helps me!
cool …thanks
It says “It needs herf parameter” Not Working Bro. Plz Help me
NO working Anymore