Facebook Comments Plugin for Wordpress and Blogger
Wall Script
Follow Me:
Friday, February 11, 2011

Facebook Comments Plugin for Wordpress and Blogger

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.

Facebook Comment Plugin


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
&amp;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
&amp;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
&amp;xfbml=1"></script>
<fb:comments xid=">?php the_ID(); ?>" numposts="10" width="425" publish_feed="true"></fb:comments>
<?php comments_template(); ?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


82 comments:

  1. Hi Srinivas,
    Thankssss for the post!!! :)

    ReplyDelete
  2. dear sir aap ne jesa likha hai banaya hai
    wasa to bana nahi ye facebook sending tool kaam nahi kiya ye to kucch aur hi out put de raha hai

    ReplyDelete
  3. so simple master...hohoho
    thank thank, its good ^_^

    ReplyDelete
  4. Not working with me on local server wamp.........why?

    /fous

    ReplyDelete
  5. What is APP-ID buddy? is that our FB ID? thanks :)

    ReplyDelete
  6. Good and very useful for bloggers out there. But the styling can be improved a bit to suit the templates of blogs.

    ReplyDelete
  7. mine doesn't show up ?:( I replaced YOUR_APP_ID
    with my ID number and copy and pasted it as you've instructed. aww.

    ReplyDelete
  8. my brother.. u just rock ;)

    ReplyDelete
  9. APP_ID is your FB-application ID number. You need to make an application to get one. It's not profile ID.

    ReplyDelete
  10. auto save in jquery

    ReplyDelete
  11. Despué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á.
    Un saludo

    ReplyDelete
  12. Excelente !!! enconstré aquí la solución a los comentarios repetidos en los post. Gracias !!!

    ReplyDelete
  13. Doing this prevents the full functionality in particular the ability to select between your profile or a page profile.

    ReplyDelete
  14. Thanks for the tip!

    Do 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.

    ReplyDelete
  15. Thanks for sharing about this!!

    Will be interested if you write anymore?
    Thanks for sharing with us

    ReplyDelete
  16. There's a little type error on the wordpress code where you have the PHP tag. Rectify ASAP

    ReplyDelete
  17. Just like Younbobby mentioned, there is a wrong sign in the last line of Wordpress code. Now there is:
    fb:comments xid=">?ph

    and there should be:
    fb:comments xid="<?ph

    ReplyDelete
  18. My single.php does not have the line of code mentioned above. Could it be on another page?

    This is all I have on my single.php page:



    Any help on where to integrate FB comments would be appreciated. Thanks!

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. we can do this too master, we just change this side

    <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">

    ReplyDelete
  21. Hi there

    For 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!

    ReplyDelete
  22. How to receive notification when someone posted in our FB Comment Box. My blog is Blogger Blogspot. Any idea?

    ReplyDelete
  23. how 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?

    Is 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,

    ReplyDelete
  24. Thanks for the tip how to uise the code without the API ID.

    ReplyDelete
  25. great!.. somebody know how to hide the like button and the faces?

    ReplyDelete
  26. Thank you! This entry is very useful!

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Sorry, a temporary error has occurred. Please try again. i;ve done everything. WHY?

    ReplyDelete
  29. Wow, finally I've found the working one.
    thank to you buddy. But how to change its
    color because I have a dark background?

    ReplyDelete
  30. Very Simple Comment posting...
    Thanks a lot....
    It really works..
    Here is my BLOG
    http://maxginez3.blogspot.com/2011/07/statistics-summary-for.html

    ReplyDelete
  31. The best Facebook comments plugin for blogger on the net! And the easiest to implement!

    Great Job!

    Thank You! :)

    ReplyDelete
  32. hi, i need a comment plugin that you have fixed below

    ReplyDelete
  33. hi, i need comment plugin that you are fixed below, please help me how to get it. pleae any one help me

    ReplyDelete
  34. Thank-you soooooo much!

    I was trying really hard with this and read up how to do it on other places bt it didnt help. Thanks so much :)

    ReplyDelete
  35. we all are one god creation when we help any one god help us

    ReplyDelete
  36. hello .. what is POST ID? how can i put post id in this code

    ReplyDelete
  37. Hello..
    why 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/

    ReplyDelete
  38. 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.

    Thanks for advance

    ReplyDelete
  39. I need your help
    can 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 ..

    ReplyDelete
  40. @mR.aSLaN Sorry for the late reply

    You have to differentiate with "data:post.id"

    Eg:
    Article 28
    <fb:comments expr:xid="28"

    Article 53
    <fb:comments expr:xid="53"

    ReplyDelete
  41. Thanks for your reply
    By 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?

    ReplyDelete
  42. I had try many times .. and still not working :-((

    ReplyDelete
  43. @mR.aSLaN

    Please mail me your working url

    ReplyDelete
  44. Hi,

    Do 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

    ReplyDelete
  45. 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...

    ReplyDelete
  46. Hi there! Thanks so much for the great post.
    Will 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?

    ReplyDelete
  47. 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.

    this 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.

    ReplyDelete
  48. I used your tricks but still I am not getting result.

    ReplyDelete
  49. Error on blogger:
    "The comments plugin requires an href parameter."
    what that means?

    ReplyDelete
  50. 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...............

    ReplyDelete
  51. Great 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.

    ReplyDelete
  52. thank 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?

    ReplyDelete
  53. Great!

    However, 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...

    ReplyDelete
  54. a great post what's i've been looking for a month ago thank u so much
    need to have it in light not dark to fit and be visible with my background... any help ???

    ReplyDelete
  55. 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...
    First time i come to you through google search.
    Thanks a Lot...!!!

    ReplyDelete
  56. please any one can tell me why the answer is password is incorrect.I was entered my friend email again and again

    ReplyDelete
  57. thanks for sharing fb plugin settings fro wordpress...

    ReplyDelete
  58. I already installed a Facebook comments plugin but it is not compatible with WP 3.2, let me try this one too.

    ReplyDelete
  59. cannot find .....



    in my Widget Templates html......

    pls help

    ReplyDelete
  60. Thanks Friend Its Working Perfect...

    ReplyDelete
  61. A great article Srinivas!
    I was in search for this fb comment box. At least i found it..
    Thanks..

    ReplyDelete
  62. Yes, thanks for this useful information!

    ReplyDelete
  63. Really Nice Tutorial,
    Thanks.....

    ReplyDelete
  64. Thanks for sharing. Its good to see fresh content always.

    ReplyDelete
  65. Hi srinivas,
    thanks for sharing.

    ReplyDelete
  66. Hi can you help me ? The blog in my Social network site (facebook copy ) is crashed and unrepairable.
    So i need a new blog can you tell me I need to use.


    Thank you .......

    ReplyDelete
  67. Thanks for sharing this information. Very useful.

    ReplyDelete
  68. u are very good dear . great post

    ReplyDelete
  69. Sir can this code will display in lightbox?

    ReplyDelete
  70. Really Nice Tutorial,Very useful.
    http://infoeminent.com/T-shirt.html

    ReplyDelete
  71. thank you boss on the share of a comment on the widget, and greetings blogwalking

    ReplyDelete

Make in India