Facebook is a popular social media portal to share updates and useful links for friends. This post explains how to integrate Facebook comments plugin script into Blogger and Wordpress blogs. Just few lines of code, I feel it's very useful for generating blog traffic.
Live Demo Blogger Live Demo Wordpress
Developer Facebook providing awesome social plugins for sharing things to friends. First you have to create a Facebook application then you can generate the FB script code click here
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments xid="POST_ID" numposts="10" width="425" publish_feed="true"></fb:comments>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments xid="POST_ID" numposts="10" width="425" publish_feed="true"></fb:comments>
Blogger
Find this line of code at blogger Design - Edit HTML enable Expand Widget Templates check box <b:includable id='comments' var='post'>
Copy and paste the following code below the line above.
<b:includable id='comments' var='post'>
<h4>Facebook Comments</h4>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments expr:xid="data:post.id" numposts="10" width="425" publish_feed="true"></fb:comments>
<h4>Facebook Comments</h4>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments expr:xid="data:post.id" numposts="10" width="425" publish_feed="true"></fb:comments>
Wordpress
Find this line of code at Wordpress theme 'single.php' here the path wp-content -> themes -> Your_Theme -> single.php<?php comments_template(); ?>
Copy and paste the following code above the line above:<h4>Facebook Comments</h4>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments xid=">?php the_ID(); ?>" numposts="10" width="425" publish_feed="true"></fb:comments>
<?php comments_template(); ?>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID
&xfbml=1"></script>
<fb:comments xid=">?php the_ID(); ?>" numposts="10" width="425" publish_feed="true"></fb:comments>
<?php comments_template(); ?>
Hi Srinivas,
ReplyDeleteThankssss for the post!!! :)
dear sir aap ne jesa likha hai banaya hai
ReplyDeletewasa to bana nahi ye facebook sending tool kaam nahi kiya ye to kucch aur hi out put de raha hai
so simple master...hohoho
ReplyDeletethank thank, its good ^_^
Not working with me on local server wamp.........why?
ReplyDelete/fous
GRacias!!!
ReplyDeleteWhat is APP-ID buddy? is that our FB ID? thanks :)
ReplyDeleteGood and very useful for bloggers out there. But the styling can be improved a bit to suit the templates of blogs.
ReplyDeletedo you know you're awesome !?
ReplyDeletemine doesn't show up ?:( I replaced YOUR_APP_ID
ReplyDeletewith my ID number and copy and pasted it as you've instructed. aww.
my brother.. u just rock ;)
ReplyDeletethanks for share ...
ReplyDeleteAPP_ID is your FB-application ID number. You need to make an application to get one. It's not profile ID.
ReplyDeleteauto save in jquery
ReplyDeleteDespués de mucho darle, he conseguido subirlo al blog, pero necesito alguna “llave” para que sintonice con cada post. Es decir, me aparece en la sección de comentarios pero no en el post que se supone comentamos, sino en todos. Es un pequeño detalle pero hasta que no de con él no me lo reconocerá.
ReplyDeleteUn saludo
Excelente !!! enconstré aquí la solución a los comentarios repetidos en los post. Gracias !!!
ReplyDeleteDoing this prevents the full functionality in particular the ability to select between your profile or a page profile.
ReplyDeleteThanks for the tip!
ReplyDeleteDo you know how it can the comments separate on every post, instead of the way its now: If you comment on one post, it appears on all of them. Do you understand?
I appreciate an answer.
Thanks for sharing about this!!
ReplyDeleteWill be interested if you write anymore?
Thanks for sharing with us
There's a little type error on the wordpress code where you have the PHP tag. Rectify ASAP
ReplyDeleteJust like Younbobby mentioned, there is a wrong sign in the last line of Wordpress code. Now there is:
ReplyDeletefb:comments xid=">?ph
and there should be:
fb:comments xid="<?ph
My single.php does not have the line of code mentioned above. Could it be on another page?
ReplyDeleteThis is all I have on my single.php page:
Any help on where to integrate FB comments would be appreciated. Thanks!
This comment has been removed by the author.
ReplyDeletewe can do this too master, we just change this side
ReplyDelete<fb:comments expr:xid="data:post.id" numposts="10" width="425" publish_feed="true">
<fb:comments expr:href="data:post.url" num_posts="10" width="425">
Hi there
ReplyDeleteFor Blogger users, if you don't want to enable the facebook developer app (to get your APP_ID) , just replace expr:xid="data:post.id" with expr:href='data:post.url' . As a result the code would be:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="10" width="425"></fb:comments>
I wrote a simple tutorial here:
http://etblue.blogspot.com/2011/04/blogger-facebook-comments-box-blogger.html
It's written in Chinese Traditional , but I think you guys can understand the code easily!
want to try this tutorial..
ReplyDeleteHow to receive notification when someone posted in our FB Comment Box. My blog is Blogger Blogspot. Any idea?
ReplyDeletehow does one link this so that comments made on the blog show up on my wall, and vice versa if someone comments on a wall like, the comment shows up at the blog post?
ReplyDeleteIs there a way to set it up so that it is independent of the comments 'div'? meaning, it appears by default at the bottom of each post?
thanks,
u are god
ReplyDeleteThanks for the tip how to uise the code without the API ID.
ReplyDeletegreat!.. somebody know how to hide the like button and the faces?
ReplyDeleteThx for sharing
ReplyDeleteThank you! This entry is very useful!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSorry, a temporary error has occurred. Please try again. i;ve done everything. WHY?
ReplyDeleteWow, finally I've found the working one.
ReplyDeletethank to you buddy. But how to change its
color because I have a dark background?
Very Simple Comment posting...
ReplyDeleteThanks a lot....
It really works..
Here is my BLOG
http://maxginez3.blogspot.com/2011/07/statistics-summary-for.html
The best Facebook comments plugin for blogger on the net! And the easiest to implement!
ReplyDeleteGreat Job!
Thank You! :)
hi, i need a comment plugin that you have fixed below
ReplyDeletehi, i need comment plugin that you are fixed below, please help me how to get it. pleae any one help me
ReplyDeleteThank-you soooooo much!
ReplyDeleteI was trying really hard with this and read up how to do it on other places bt it didnt help. Thanks so much :)
we all are one god creation when we help any one god help us
ReplyDeletehello .. what is POST ID? how can i put post id in this code
ReplyDeleteHello..
ReplyDeletewhy when my friend comment using facebook comment, it will appear in ALL topic that i had post.. please help me ... try look at http://aslanmy.blogspot.com/
Hello. Is it no answer for my question ? please guide me . I dont know why facebook comment Appear in Every Post that i had done.
ReplyDeleteThanks for advance
I need your help
ReplyDeletecan you see the picture below ...
http://imageshack.us/photo/my-images/707/unlednv.jpg/
The SAME comment appear in EVERY post in my blog . I need solution . Please .
Thanks ..
@mR.aSLaN Sorry for the late reply
ReplyDeleteYou have to differentiate with "data:post.id"
Eg:
Article 28
<fb:comments expr:xid="28"
Article 53
<fb:comments expr:xid="53"
Thanks for your reply
ReplyDeleteBy put Post ID, thats mean facebook comment box ONLY show in specific Post rite? i want to show in EVERY post(different comment).. so how should i do?
I had try many times .. and still not working :-((
ReplyDelete@mR.aSLaN
ReplyDeletePlease mail me your working url
Thanks for sharing it
ReplyDeleteHi,
ReplyDeleteDo you happen to know how to show the FB Comments only on certain pages with a WP.org site? I'm using Genesis theme.
Thanks,
Joy
it works...thanks...many many great thanks...i'm already looking for this enough long time...and it works...many many great thanks...thank you...
ReplyDeleteHi there! Thanks so much for the great post.
ReplyDeleteWill I receive notifications when someone posts? I haven't been receiving any. Is there somewhere to activate this?
I can see on my stats that people have viewed my posts through the plugin but I don't get notified. How can I fix this?
hi, i'm very thank you for this post. i was search and try many tutorial but NOT working as well as so many copy and paste.
ReplyDeletethis is most simple (2 step only) code but working perfectly on blogger. i will recommend this.
thanks again. now you may also can comment on my blog.
I used your tricks but still I am not getting result.
ReplyDeleteError on blogger:
ReplyDelete"The comments plugin requires an href parameter."
what that means?
in my blog( sadhakparivar.blogspot.com ) facebook comments box is working but i dont know the reason when i add another Like gadget( LIKE BUTTON of facebook, twitter and google +1 )in it, it stop working, and when i remove that gadget it start working why is that so.??? and what is the solution of it pls guide...............
ReplyDeleteGreat post. I found what I was looking for. Do you mind if I post this on my website and give you credit? If not, it’s ok.
ReplyDeletethank you, I have been looking for it for 4 days now, and i did it eventually thank u, but i still need it light not dark what can i do?
ReplyDeleteGreat!
ReplyDeleteHowever, as I looked into developer.facebook.com, the code for comment box is quite different.
By the way, I am user of blogger.com, though I have used a custom domain.
In order to have a comment box, I first went to https://developers.facebook.com/docs/reference/plugins/comments/ then fill things up. Then paste the HTML 5 code below this code:
b:if cond='data:post.hasJumpLink'
div class='jump-link'
a expr:href='data:post.url + "#more"' expr:title='data:post.title' data:post.jumpText//a
/div
/b:if
the code that I paste looked something like this:
div id='fb-root'/
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
<div class='fb-comments' data-href='MY_ADDRESS_HERE' data-num-posts='2' data-width='580'/
Everything went fine, but all comment box have the same comments... Please help
By the way, the code looked strange because the comment box of Blogger.com doesn't allow HTML codes...
Thanks for Help. But i can't find Please help me brother. I find some similar code like "threaded_comments" instead of "comments". After I put script below this. Am error message appear. Please Help Me...
ReplyDeleteFirst time i come to you through google search.
Thanks a Lot...!!!
please any one can tell me why the answer is password is incorrect.I was entered my friend email again and again
ReplyDeletethanks for sharing fb plugin settings fro wordpress...
ReplyDeleteI already installed a Facebook comments plugin but it is not compatible with WP 3.2, let me try this one too.
ReplyDeletecannot find .....
ReplyDeletein my Widget Templates html......
pls help
Thanks Friend Its Working Perfect...
ReplyDeleteA great article Srinivas!
ReplyDeleteI was in search for this fb comment box. At least i found it..
Thanks..
Yes, thanks for this useful information!
ReplyDeleteReally Nice Tutorial,
ReplyDeleteThanks.....
Thanks for sharing. Its good to see fresh content always.
ReplyDeleteHi srinivas,
ReplyDeletethanks for sharing.
Hi can you help me ? The blog in my Social network site (facebook copy ) is crashed and unrepairable.
ReplyDeleteSo i need a new blog can you tell me I need to use.
Thank you .......
Thanks for sharing this information. Very useful.
ReplyDeleteu are very good dear . great post
ReplyDeleteSir can this code will display in lightbox?
ReplyDeleteReally Nice Tutorial,Very useful.
ReplyDeletehttp://infoeminent.com/T-shirt.html
test
ReplyDeletethank you boss on the share of a comment on the widget, and greetings blogwalking
ReplyDeletethanks
ReplyDeleteThanks! it's nice
ReplyDeleteI was in search for this fb comment box. At least i found it..
ReplyDeleteThanks..