Try Tuts+ Premium, Get Cash Back!
Add Facebook Comments To Your WordPress Theme

Add Facebook Comments To Your WordPress Theme

on Aug 13th 2011 with 129 comments
Tutorial Details
  • Program: HTML/CSS editor
  • Difficulty: Medium
  • Estimated Completion Time: 1 hour

Facebook launched the social plugins for developers in 2010. You all know at least one of them, the “like” button that you see on lots of blog posts across the net (like this one, pardon the pun!). Today we are focusing on the Comments Box system. Adding Facebook comments allows the user to comment on your blog using his Facebook account. There is no need for him to enter his name and email address or even register an account on your site.

The Benefits of Adding Comments via Facebook

I won’t push too hard on whether or not you actually need this feature on your own blog. Every site has their own set of priorities and best practices. But, for the sake of argument, let’s look at the pros of adding Facebook comments to your WordPress site.

Here is a list of features:

  • Facebook notification for likes/replies to comments
  • Comments can be posted to the Facebook wall with one click
  • Replies to the comment on the wall will be shown on your site as well
  • User authentication through Facebook or services like Yahoo!, AOL & Hotmail
  • Grammar filter (adds punctuation, trims extra whitespace, fix common grammar mistakes etc.)
  • Less trolling, more discussion

How does it work?

If a user opens a post with Facebook Comments on the page, the script checks if the user is logged into Facebook. This happens in an iframe, so no data is actually transferred to your server. The only information the script needs from your website is an Facebook App ID and the Full URL of the post. With the App ID Facebook checks if the user is allowed to moderate comments or change settings for the Comments Box. The URL is used to locate the comments on the Facebook servers. If the user is not logged into Facebook, he can login directly from the Comments Box.

Now let’s add the Comments Box to your theme.

Create a Facebook App

To add a Facebook Comments Box you will need to create a Facebook App first. Go to https://developers.facebook.com/apps/ and create a new app. Enter a name and define the locale for the app. The name is not crucial, because it won’t show up on the website. Just make sure you can identify the app later, if you have several websites with Facebook comments enabled.

Now you can see an overview of your application. You are able to change the name, locale and other information. Since the application will not be published to the App Directory you don’t need to fill out the other fields. Important is the App ID which you can find on top of the page. We will need the ID later when adding the code to the theme.

The person who created the App is Administrator and therefore able to moderate comments by default. To add another Administrator click on Roles on the left site. You need to be friends with the person you want to assign the admin role.

It is also necessary to configure the Site URL and Domain. Click on Web in the left navigation pane and enter the full URL to your blog as Site URL. The domain name is the base URL. For example: If your blog is hosted at http://somecooldomainname.tld/mike/my-blog, the whole thing would be the Site-URL and somecooldomainname.tld is the domain itself.

Add the code to your theme

Adding the comments only takes 4 lines of code.

Adding the App ID

You need to add the Facebook App ID to your header.php file within the <head> tag. And you need to replace ‘YOUR APP ID’ with the ID from your newly created Application.

<meta property='fb:app_id' content='YOUR APP ID' />

Here is an example of the <head>.

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta property='fb:app_id' content='YOUR APP ID' />
	<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
</head>

As you can see, the App ID has been added directly after the charset in the head section.

Creating the Comments Box

Let’s see the code first.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="<?php the_permalink(); ?>" width="880"></fb:comments>

The JavaScript call in the second line has a locale reference (en_US) in it. If you want your Comments Box to appear in a different language, you can change the URL. For example http://connect.facebook.net/de_DE/all.js is for the German interface. I also found fr_FR and es_ES for France and Spanish to be working. If you want to see if a different language is supported, just open the link http://connect.facebook.net/de_DE/all.js in a new window and change the locale in the URL. You will receive an error if the locale is not supported.

The tag fb:comments in the third line tells the Comments Box to only show the comments for the defined URL. Using the WordPress function the_permalink() allows us to dynamically assign the correct URL for every post. If you use a fixed URL you would see the same comments on every post/page. Just for the fun of it, try using “http://localhost” as URL. You will receive an error from Facebook that the page is not accessible, but it will still work. And as you can see, there are comments from other developers who used the same URL for testing.

You also need to modify the option width (in px) to suit your theme. This option defines the width of the whole Comments Box. There is another option called num_posts. With it you can define how many comments are displayed by default. If there are more comments then defined in num_posts, it will display a link to show more.

Placing the Comments Box

It is easiest to modify the comments.php. Of course this is different in every theme, so simply follow the basic rules.

Only show the comments if:

  • The post/page is not password protected or the correct password has been entered
  • Comments are allowed in the post/page

I modified the comments.php file from the default theme “Twenty Ten” as example:

<div id="comments">
	<?php if ( post_password_required() ) : ?>
		<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyten' ); ?></p>
		</div>
		<?php return; ?>
	<?php endif; ?>

	<?php if ( comments_open() ) : ?>
		<div id="fbcomments"><div id="fb-root"></div><script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script><fb:comments href="<?php the_permalink(); ?>" width="880"></fb:comments></div>
	<?php endif; ?>

	<?php if ( ! comments_open() ) : ?>
		<p><?php _e( 'Comments are closed.', 'twentyten' ); ?></p>
	<?php endif; ?>
</div>

As you can see, we are only showing the Comments Box if there is no password protection or the post is public (line 9). If the comments are closed an appropriate message is shown.

Let’s have a look

This is the default theme with Facebook Comments enabled.

You can see an error message above the first comment. It appeared because I was calling the Comments Box from my local web server via http://localhost/wordpress/?p=1 and Facebook can’t connect to it. So, how does it look online? This is the view for an admin.

If you compare the screenshot with the one above you will see additional options. Even though I was recognized as “me” when I opened the page from my local server, Facebook could not reach the site itself. Now as it is online and Facebook can actually reach the page, I can access the admin options to moderate comments and change settings. The comments can be moderated either on every post page or all comments at once over here http://developers.facebook.com/tools/comments.

In the settings page you can define if comments are visible to everyone right away or if you want to check them first. You can also create a blacklist for bad words, allow login through external provider (see below) and enable a simple spelling correction.

If a non-admin user looks at the comments he will see the following:

If you decide to post the comment to your wall, it will be displayed like this:

There has to be an open Facebook session in order to authenticate the user. If the user is not logged in, he can either login to Facebook or use a different service (Yahoo!, AOL or Hotmail) to authenticate himself.

As I said, allowing third-party services for authentication is optional and can be disabled in the settings.

Display the number of comments

The comment count will be displayed on top of the Comments Box where you can also change in which order the comments should appear. The comment count can also be displayed using this iframe.

<iframe src="http://www.facebook.com/plugins/comments.php?href=<?php the_permalink(); ?>&permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"></iframe>

It will give you the classic Facebook speech bubble and the text $n comments, it all comes in Facebook blue.

If you want to modify the style of the comment count, try using the <span> method:

<fb:comments-count href=<?php the_permalink(); ?>></fb:comments-count> comentarios

This is supposed to result in a <span> with the number of comments. For example $n comentarios. However, so far I was not able to display the comment count this way.

Thanks for reading and feel free to ask questions in the comments.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://gashone.com gashone

    thanks for this great tutorial.. isnt it possible to add a commentbox w/o an app – anymore?

    • Joseph Badow
      Author

      Sure, you could simply use the generator from the plugins page (http://developers.facebook.com/docs/reference/plugins/comments/). But you can’t moderate the comments this way.

      • http://zonaenduro.net Mos Paul

        I can’t moderate the comments. My codes are exacly like in this tutorial. I;ve tried with Facebook Comments for Wordpres. Same thing… THX, and I will apreciate any advice!

      • http://www.techtate.com Srini

        Where do I add the code that I got after clicking the above link ? Which file ?

  • http://www.alamalnet.com Abdelhadi Touil

    Thanks for this great tutorial, I think it’s better than using a plugin.
    I h ave a question: Is there a way to display “Last comments” and “Most commented” in the sidebar?
    Thanks again :)

  • http://www.agenciabrother.com.br Robson Coutinho

    Thanks a lot for this post!!! Integrate social media like Facebook in your website is a great form for promote your business!

  • http://rommelcastro.me Rommel

    nice tut (:

  • https://adeeb.org adeeb

    Excellent!
    Was wondering how to do this.

  • http://www.chrisupjohn.me Chris

    Great tutorial, i recently added FB comments to a project i was building but it seems i left out some vital steps in the code process.

  • Pingback: Add Facebook Comments To Your Wordpress Theme | Wptuts+

  • Pingback: Add Facebook Comments To Your Wordpress Theme | Wptuts+ | Informations | Sobhansoft Programming and ICT Services

  • http://8gramgorilla.com 8 Gram Gorilla

    Very nice post although wouldn’t WordPress users be better off using something like the Disqus plugin? :P

    • Joseph Badow
      Author

      Well, I prefer Facebook comments because most of the people already have a Facebook account. So they don’t have to sign up for just another service. They can easily share their comments with friends who might also be interested in the subject.

      Why would you prefer Disqus?

      • Aneesh

        Disques offers more authentication providers including twitter.

  • http://mikey.creativeburn.com MonkeyLeo13

    Facebook Comments for WordPress is great and get more spread out through facebook but I still prefer Disqus cuz you able to save all comments to your database if you decide to not use disqus while facbook comments don’t. But I think you able to export facebook comments but not sure how easy to mirgate facebook comments to wordpress database if you decide to not use facebook comments. Maybe someone might know and success with it.

  • http://www.ashish-patel.com/ affiliate marketing with ashish patel

    Great tutorial. thanks for the share. but i think i need to hire someone for this. these stuffs are not my things :D

  • http://jarodonline.wordpress.com Jarod Online

    Buy then you couldn’t design your comments. Right? Because, I want to design my comment. I love looking at cool looking comments!

    • Joseph Badow
      Author

      Yes, you are stuck with either the white or black version of the comments. They do fit quite well in most of the designs, but of course not in every one.

  • http://www.tutorialblogs.com enursa

    nice… amazing. Bookmark it and good job.

    Thanks

  • http://www.erjonmehmeti.com Eri Mehmeti

    I have used facebook comments only in landing pages (product websites) so fare, but I wouldn’t suggest it for a blog. We really don’t have any control over facebook comments, so unless is a way that you can import the comments into wordpress, is not a good idea.

    Anyhow is a great tutorial, thank you.

  • Fily

    Great tutorial. I have been waiting for this tutorial because I have tried this before and I just couldn’t make it work and last night I did it in a few minutes.

    Thank you for sharing the good stuff.

  • http:///www.desentupidoranorte.com.br Desentupidora Norte

    Great article!
    In fact, some blogs doesnt have a facebook comments. Some blogs have just the LIKE IT button. I wondering if I should add this in my blog, but I dont think that will increase the number of visitors. Neither think that somebody will comment. But, like the tutorial.

    THANKS!

    Cya

    DesentupidoraNorte ROCKS! :)

  • Fily

    I would like to see a tutorial that teaches how to show the pictures of the people that have pressed the like button even if a person is not loged in facebook, like in this page (wp-tuts)?

    The way I have it right now is that if you are logged you can see the pics, but if you arent you only see the number of people that have liked you page, but I noticed that here in wp-tuts you dont have to be logged to see the pics of the people that have liked the page.

  • http://forgetdbigwords.com Okeowo Aderemi

    Very nice tutorial, but i thought FBML was deprecated and FBJS SDK was the way to go about it,anyway cool tuts.

  • http://www.wpbeginner.com Syed Balkhi

    Why not just use a plugin: Facebook Comments for WordPress??

    • Joseph Badow
      Author

      Because sometimes it’s nice to see how the things work on the inside ;)

      • http://www.techlila.com/ Rajesh Namase

        I agree with you Joseph and using plugin we’ve to face some limitations, manually adding code has many advantages we can customize anything as per our need. Thanks a lot for providing this code.

  • http://www.iasava.com iasava

    great tutorial, i have use it in my blog, is easy in use. thank you very much ^^

  • http://anjungsazuwi.blogspot.com sazuwi

    I wonder if this facebook comment system can comment as page?

  • Pingback: Weekly Roundup – August 24, 2011 » Press Your Words

  • Pingback: Web Tips : micronaut.ca

  • Pingback: My Stream » Best of Tuts+ in August

  • Pingback: Best of Tuts+ in August

  • Pingback: Best of Tuts+ in August | B L O G : : E L I J A H C A R D E R . C O M

  • Pingback: Best of Tuts+ in August | Omega Pixels

  • Pingback: Best of Tuts+ in August | Freelancing Help

  • Pingback: Finest of Tuts+ in August « Fast Ninja Blog by Freelanceful – Web Design | Coding | Freelancing

  • http:/www.josemiguel.com.gt Jose

    Great article, i used it and it’s working very well.
    Just to mention that the “Web” tab is no longer on the left panel, now is on the bottom under “Select how your app integrates with Facebook”.

    Arigatooo

  • http:/www.josemiguel.com.gt Jose

    Do you guys know if it’s possible to display the number of Facebook comments? Because the counter only says “1 comment”.

  • http://www.newdevnation.com/ Adam Scoville

    By far the coolest thing I’ve seen for WP and FB. Thanks! :)

  • http://www.techomag.com antodoms

    @Joseph Badow ….. The Facebook custom comment count is working really fine for my Website…. You can try out this code instead :


    <fb:comments-count href="ID); ?>”> Comments

    Hope , it helps ….. regards…. :)

    Anto Dominic
    Techomag

    • Danny

      @antodoms – Your code is not correct???

  • Isaac

    Great article!

    When a comment is posted, an email gets sent to the author of the post.

    Is there any way to edit the content of that email?

    • http://blog.randyphotography.com Randy

      I do not get emailed when someone leaves a comment.

      Everything else is working just fine..what am I doing wrong?

  • Pingback: Add Facebook Comments To Your WordPress Theme

  • http://www.critical-mass-ms.info Istvan

    Hey,

    I am stuck at a point, and would really appreciate some help. I would like to change the design to have the light color scheme for Facebook comments(the dark scheme seems to be broken on my site). Somehow I just can’t do much, I am pretty new to web programing.

    Can I have some help please?

    Thanks,
    Istvan

  • http://funnymallus.com arulmjosef

    thanks

  • http://www.buyecigaretteskit.com/ Buy E Cigarettes Kit

    This is a very useful tip although I do not know if it would work for me. My starting slow but now would be getting up 20 minutes earlier than usual for a few days then keep on adjusting till I get to the right time.

  • http://www.buyecigaretteskit.com/ Buy E Cigarettes Kit

    Thanks for sharing. A real lot of useful info here.
    These are all great comments here. Very cool article.

  • Pingback: Dev Blog » Blog Archive » Add Facebook Comments To Your WordPress Theme

  • http://www.alovilla.com alovilla.com

    nice

  • https://www.doctle.com/ Praveen

    Here is a wordpress plugin that automates the above mentioned method and provides enough flexibility to go beyond simple integration with custom notifications and options to integrate facebook comments on a per post/page basis.

    https://www.doctle.com/users/developers/facebook-comments-with-notifications/

  • Pingback: Where to put Facebook code

  • http://www.technispace.com/ Rajiv

    Thanks for sharing, still trying to figure out, can you throw some light on why i am getting same comment for every post.

  • Pingback: Как добавить Facebook комментарии на WordPress-сайт | Wordpresso

  • http://www.webdesigninginchennai.com Daniel

    Thanks for such a nice tutorial!

  • http://www.monclerfans.co.uk moncler

    This is a very useful tip although I do not know if it would work for me.

  • lex

    Hey i got comets are closed in my comments box!

  • http://www.dailytut.com Robin

    A must have feature in todays scenario to pull crowd from facebook as well and let people join discussion easily. Nice modification suggested.

    Robin

  • http://m3mmilanogurgaonsec70a.m3mnewproject.in m3m milano

    Thanks for this wordpress information.

  • stuck with Facebook Comments for WordPress

    Hello everyone, i installed the Facebook Comments for WordPress plugin for my wordpress site. the problem is it does not show the comment box. i use local host to test it. i don’t how to solve it,

    any help will be appreciated.

    Thanks

  • http://www.entuespacio.com Berlin

    Can any tell why im seeing the normal comments box instead the moderator view.

    Thanks

  • http://sehabitat.com Ian Mason

    Thank you so much for this! I am trying to add comments on my site SEHabitat.com in the blog section.

    I got the comment form working, but I don’t see moderation/settings options, even though I added myself as a moderator in the app’s settings.

    What am I doing wrong?

  • Rohan

    These guys your plugin…it is obviously good! Check out their Facebook WordPress theme -> http://fbwordpresstheme.com

  • http://www.enemyofaverage.com Craig

    Thanks for this. Just implemented and it is working a treat!

    Saved me using a wordpress plugin to do it too!

  • http://edopeno.com Ed Penano

    Is there a way to have notifications appear in your Facebook GUI when someone comments on your site? Is this possible?

  • http://funingallery.com johnjeo

    nope it didnt work for me,it show blank after post

  • Alex

    can i limit the default number of comments to show up?

  • http://www.arablake.com بحيرة العرب

    Good plugin and help users interact with wordpress using their Facebook accounts

  • Joshua

    Does anybody know how to get an anchor tag into the permalink? Something like http://www.blogurl.com/blog-post#comments

  • http://www.realestate24greece.com buy hotel greece

    It

  • http://www.arthinfosoft.in/ Mayannk Koomar

    Nice research,
    Joseph
    I read a few things about the Breast Surgery procedures, but haven’t seen it tied together until now. I’m especially interested in the result only. I’m guessing this is to connect potential future attackers with their funding sources.

    WordPress Integration Service

  • http://www.failog.tk alex

    Oh thank you so much for this!!! was searching 3 hours to find the solution i had same comments on all of my pages this ?php the_permalink saved me!

  • http://ikonwebdesigns.com webdesigning at 10$

    i really liked the post , very nice.

  • x

    a

  • http://www.brokejumper.com/ Brokejumper

    Great post, been hard to find a tutorial on adding facebook comments without using a plug-in.

  • http://www.manjeri.net/ maanu

    is there any universal comment plug-in ?

  • http://londonmassage.info/ London Massage

    Is there any way to hide wordpress admin url
    exp my site http://www.londonmassage.info/ wp-admin
    when someone type he can see admin login page. How to hide it and put somethign like http://londonmassage.info /xyz

  • http://prayface.com James

    Is there a way to add wordpress comment count and facebook comment count? for is there are 0 wordpress comments and 5 facebook comments, it would show “5 comments” rather than “0″ I would like to combine the two for my website.

    reference: prayface.com

    • http://www.sparkus.net Sparkus

      Answering this would be a good way to round out this tut.

  • http://www.libertybloggers.com LibertyBloggers

    Can I use this plugin with blogger blog?

  • http://DiversityHuman.com Marisse

    Hi Author,

    First off, it’s a very nice tutorial you have.

    But I just want to ask one question.

    What is really the purpose of adding the facebook code into header.php? What does it do?

  • http://www.affinityseattle.com Sean

    I had a huge issue today where I found that a ton of my posts had their comments reset. I finally found out that it was specifically a category of posts. Then, I remembered that a few weeks back, I had changed the name of the post category. This totally broke the facebook comment integration…. which means that once you let facebook comments loose on your blog, you are stuck with the url convention you started with. For mine, I have custom permalinks that show /category/postname/ which is great for SEO, but if you change any of it, I don’t see a way to update facebook’s link to the post? Is there a way to update the facebook comments so that they will look to the new URL? I don’t see anything in the Moderation Tool. Thanks.

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress@smashing | seo博客大全

  • Pingback: level. graphic design boutique agency based in weymouth dorset

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | DigitalMofo

  • http://triedgeart.wordpress.com/ Kevin

    Great post, thanks!

    I am having a little difficulty though – how do you edit the header.php?

    I searched through the dashboard and I couldn’t find anywhere where I could edit the codes for header and other things. Thanks before!

    • Japh Thomson
      Staff

      Hi Kevin, you can edit your header.php file by logging into your admin Dashboard, and then under the Appearance menu, click “Editor”. You can then find the header.php file listed on the right.

      Before editing though, make sure you have a backup :)

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Welcome To My Mind

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Blogs – NG Outsourcing

  • http://www.affinityseattle.com Sean

    Concerning the section “Display the number of comments”, I can get that to correctly display the comments for the permalink, yet when you click on the “View all X comments” , it only takes you to the blog post, not the anchor #comments. How to hack that in there so it jumps down the page to the comments?

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Ruturaj Pradeep Kohok | Your Web Advisor

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Ricky Noel Diancin Jr. Webmaster | Web Designer | Wordpress Expert

  • JamesLamuy

    Are you yourself using FB comment plugin in this blog?

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Testing themes

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Wordpress Training Course Brisbane: Next Course Thur 9th Feb 2012

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Web Design Course Brisbane: Next Course Sat 10th Dec 2011

  • http://www.myexoticmaldives.com eelaf

    after commenting on one post and the comment appears on every other post on the website while using the social comments plugin. is it the shame here with this?

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Social Media Buzz

  • http://vote.thefoqusalbum.com Armando

    im trying to use your method to implement comments on a static page. i got most of the tut implicated already. i just cant figure out why my comments arent posting to FB and where exactly would they post if not on the fan page i linked it to. Would appreciate some help :) thanks!

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Top website Designing Company in India

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress : dot Key Plugins

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | CoffeeMugDesign

  • http://www.johnvarghese.com John Varghese

    As Mark Z himself said, FB is a tipping point in human history. It is comparable to the invention of the wheel, the press, and radio. It will change the face of communication like blogs did – except much better. In combination with wordpress it is an excellent tool. I have a word press blog which was constantly bombarded by spam comments. Then I turned to Facebook comments. Now only real people comment there. Here is how I did it easily for my wordpress blog. http://www.johnvarghese.com/enabling-facebook-comments-integration/

    In this post I show the benefits I already gained with this implementation of FB comments. http://www.johnvarghese.com/facebook-comments-already-proving-useful/

  • http://www.ruturaaj.com Ruturaaj

    FB comments are nice as it integrates Facebook with your blog. I also noticed a drastic decrease in the Spam comments. However, you have to compromise on some big issues in order to use FB comments. One is of course, styling. Second is, you don’t get the comments saved to your Database; everything remains with Facebook. You cannot implement functionality like “Subscribe for Comments”, a much useful thing if you want to encourage your Blog Users to subscribe and give their email address to you to fill their inbox with your offers and promotional emails! ;-)

    Personally, I prefer using WordPress comments system for Comments and use Facebook Like and Recommend for the blog Posts. I’m in the middle of redesigning my blog… I gave a thought if I should include FB comments, but again dropped the idea for above reasons. If someone knows how to define a CallBack function for Facebook comments, we may then integrate the Facebook Comments in WordPress with much better control over all the aspects, including saving a copy of comment in our database.

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress – Smashing WordPress | Smashing WordPress « Catherine Hicks Creative

  • http://temblorcreative.com/ Riley

    I replaced a WordPress plugin with this on our blog and it’s working great except for one problem: When ‘Post to Wall’ is checked, the comment never actually gets posted to Facebook. It appears as a comment on the blog post, but does not post to the newsfeed or commenters wall (timeline). Any suggestions?

  • http://www.aksohbet.com sohbet

    Thanks so much Teli. You have been my only real contact that gives me answers regarding the running of a WordPress blog platform. I’ve tried searching many forums, blogs, web sites, but your answers come fast and easy to understand.

    I’m loving the blogging world and I’m really loving WORDPRESS!!!

  • http://edutechnolife.com Edutechnoliofe

    Looking the complete tuts for adding fb comment after post.. I find it here :)
    Thanks.

  • CNN

    Is it possible to make a facebook post show up on your blog? Most explanations online are for making wordpress blog posts show on facebook.

  • http://www.mitrilgm.com PVC stolarija

    Very nice! Thanks for sharing.

  • http://www.biginjapan.co Dave

    Hey there,

    Have just got this working correctly on my blog – many thanks. Was just wondering if there’s any way of tracking comments or getting emails/notifications when Facebook comments are posted, in the same way I would get notification emails of standard WordPress comments.

    Thanks in advance :)

  • http://blog.uknow.fr W4LL

    Hi,
    I tried to use this tut, but it wont work. I have probably did it wrong or it’s because I am not using wordpress (I go through BLOGSPIRIT). Here are my codes http://www.mediafire.com/?d5pz8mrs55b5zt6
    Could someone help me ? Thanks by advance

  • http://www.pavel-kaminsky.com Pavel ‘PK’ Kaminsky

    Excellent Post! Thanks.

  • Pingback: Facebook | Pearltrees

  • http://www.seomakale.com Seo

    Im tested this code’s. But have any theme problems and not valid w3 problems. This article is good. Im researching not used “iframe” command and use some php code’s.

    Thanks.

  • http://counterforsite.com/ Counter for site

    Well adding comment through Facebook is nice idea.Facebook become one of the most popular site and most of us having its account and want to share our page with all.Thanks for such valuable post.

  • Pingback: .:Webb0lled.Com:.

  • http://ewandoo.com ewandoo

    Great Tutorial thanks but there is a little bit change in facebook system

  • Pingback: Cara Memasukkan Facebook Comment Pada Blog Tanpa Plugin | Hiblog!

  • http://www.HawaiiLoversOnlyClub.com Angela

    Hi! Does this tutorial create the same comment box on each post and or page, or is there a way to have different comment boxes?

  • http://fashion.freshaims.com lucky

    Great post, thanks!

    I am having a little difficulty though – how do you edit the header.php?

    I searched through the dashboard and I couldn’t find anywhere where I could edit the codes for header and other things. Thanks before!

  • Pingback: Tutorial: Social Media zur Verbreitung der eigenen Website » PIXELPIPE.de » Grafikblog » Design, Marketing, Werbung, Kunst, PR, Kommunikation

  • http://blog.ilovepaper.dk Maria

    Thank you very much for this post, it was very helpful and useful – I got the comments up and running in no time, without being an expert.

    One question – where should I add the Iframe code, in order for the “like button” and counter to appear like yours?

    Thank you again.

    Maria

  • http://techiesindiainc.com/ Wordpress Development

    Too much Informative !! Thanks for Sharing Mate.

  • http://www.ukashmekan.com ukash

    Have just got this working correctly on my blog – many thanks. Was just wondering if there’s any way of tracking comments or getting emails/notifications when Facebook comments are posted, in the same way I would get notification emails of standard WordPress comments.

    Thanks in advance

  • http://www.afterschoolafrica.com African Scholarship

    I’ve tried several plugins for this on my blog with none working fine on my theme. Thanks for sharing this option of manual configuration. I’ll give it a try.
    Thanks

  • http://makemoneyfromhomelionsclub.com/ mike

    Hi,

    I’ve added this exact code to my website (obviously with the xxxx replaced):

    in header.php (before /head):

    in header.php (before /body)

    (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=xxxx”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    in comments.php:

    <div class="fb-comments" data-href="” data-num-posts=”3″ data-width=”550″>

    But when I go to any of my posts, it has a bunch of comments from some other website or something, and has the following warning displayed:

    Warning: http://invalid.invalid/?php%20the_permalink();%20?> is unreachable.

    I’ve been going crazy for hours trying to get this thing to work! Another clue: I am trying to install this on an elegant theme called thecorporation. Let me know if you know what might be happening!

    Mike

  • http://lovebarrefaeli.com Maartje

    Is there any way to sort the comments by page?
    I’ve uploaded many different galleries, and I don’t want all the comments appearing on all the galleries.
    If someone responds to Gallery 1, I want the comment to appear only there.
    Is this possible, and if so, HOW?

    Thanks a lot!

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | UzairBlog

  • http://www.withwineandi.com Alex

    Hello there i have troubles with comments on my site, they dont show up allways, im using 3 fb accounts from 3 browser on my pc and on everyone of them i see different comments! How can i debug this, i havent found other way to have fb comments on my homepage.

    I have tried pretty much all FB comments integration plugins and i didint find single one of them that is able to show comments in my loop on the homepage!

    This is the only way i manage to show them on homepage but it is buggy for me and all comments wont show up.

    Any advice?

  • Pingback: How To Integrate Facebook, Twitter And Google+ In WordPress | Smashing WordPress

  • leo rapirap

    Hey man,

    Well explained. I actually had it integrated in my custom blog posts in WordPress.

    Is there anyway I can count the comments against each post? I basically want to display a list of
    blogs posts title’s order by number of comments against it.

    is it possible?

    Great Thanks,

    Leo

  • http://www.techomag.com antodoms

    Was wondering if there is any way I can import my Facebook comments to my wordpress Database…?? Any tutorial for it…???

  • http://www.bled-booking.info Bled ask

    Hello,

    if i add this script. How is about optimization on my site after that?

    Tnx

  • http://www.videomasi.com VideoMasi

    thanks for the tutorial. its work for my website.
    THanks again :))

  • http://www.gauravm.com ui design services

    Great post. This would be very interesting. It will make site more popular & visible for users. Thanks for this sharing.

  • http://www.d2kddf.com Md. Mahabubur Rahman Masum

    I have sucessfully setup facebook social login with this post: visit http://www.d2kddf.com. Thanks for your nice post . Really helpful. keep it up.

  • Pingback: Effective Comments in WordPress | E. Curtis Designs

  • Pingback: Plugins for Wordpress Comments | Pillaticos

  • Pingback: How To Integrate Twitter, Facebook, And Google+ In WordPress | Visit For Solutions

  • Pingback: WordPress Plug-ins For Managing Comments | Pillaticos

  • http://rwsd.net Matt

    So now how can we make this responsive?

  • Phil Doughty

    Matt, Responsive fb comments – This is what (appears to have)worked for me on a localhost site:

    <div class="fb-comments"data-href="” data-num-posts=”2″ mobile=”false”>

    .fb-comments,
    .fb-comments iframe[style],
    .fb-like-box,
    .fb-like-box iframe[style] {width:100% !important;}

    .fb-comments span,
    .fb-comments iframe span[style],
    .fb-like-box span,
    .fb-like-box iframe span[style] {width:100% !important;}

  • http://www.macocadas.com Vitor Urbano

    Hello! Thanks for the tutorial!

    I’ve just used it to implement the comments on my blog… but I was trying to find a way to change the colors of the text. Is it possible??

  • http://wordpress.org lakhan

    i want to show this facebook comments as recent comments………how can it happn ?
    and also i want to store the comments and details of the user to the phpmyadmin database

  • http://edutechnolife.com Edutechnolife

    I used facebook comments plugin for a year but it seems broken now. Then I just added facebook comments using this tutorial and it’s work. even my previous facebook comments not disappear :)

    Thanks.

  • http://www.techalam.com/ Nizam

    Really excellent guide on adding a Facebook comment box on blog. It is really helpful especially how to create a new app and how to get the app ID. It would be better using a plugin called “Facebook”, instead of inserting this code in theme. But knowing alternate methods is a good. Thanks
    Joseph :)

  • http://www.techtate.com Srini

    How to fetch the previous comments ? Also I want to add it as an addition to the existing comment. How do I do that ?

  • http://www.modernhomefairoz.com amira

    nice tutorial :D
    do you have any tutorial on display the facebook lists on wordpress like twitter list?
    thank you so much

  • Pingback: Tweet-Parade (No.33 Aug 2011) | gonzoblog.nl

  • http://www.acriddle.com Aaron Riddle

    Fantastic, easy-to-read tutorial! Thank you for sharing.

  • http://www.mindinventory.com/android_application_development.php android apps development

    This is really very good informatics information,I’m crating wordpress blog and i need same tutorial for mu blog.This is same thing happen in twiiter.

  • Guest

    Nice

  • http://www.facebook.com/christine.pilkington Christine Pilkington

    Nice! Thanks

  • Lindsey

    Does this mean that when I post my blog post on Facebook, when people comment right below the Facebook post (instead of on the blog), that it will show up on the blog automatically? No one is actually commenting on the blog page! Just below the post on Facebook!

  • Василий

    xvcbcfgt

  • Mubeen Khan

    Fantastic, easy-to-read tutorial! Thank you for sharing with every body, and your web site is very useful for every one.

  • http://www.facebook.com/anoniary.johnson Anoniary Johnson

    tes

  • http://www.facebook.com/nkosholkin Nikita Kosholkin

    Hello, my name is Nikita. I have a problem. Facebook Comments are work fine with no error, but they doesn’t write into wordpress Database (they doesn’t appear at “comments” in wp-admin section).

    (built-in theme comments works ok)

    Any suggestions?

  • http://www.facebook.com/tejjyassin Yassine Tejjani

    Thank you. It’s working :)

  • http://www.facebook.com/alexander.alvin.568 Alexander Alvin

    You will get one from Facebook or myspace that the site is not available, but it will still perform. And as you can see, there are feedback from other designers who used the same URL for examining.

    http://www.mobilephonedealshop.co.uk/htc-one-deals.php

  • Sireate Jones

    All in this >>> http://goo.gl/WcNjl
    เขาบอกว่าคำว่าเพื่อนมีความหมาย คุณคิดว่าจริงหรือป่าว
    หายจัยลึกๆก่อนแล้วค่อยกดนะค่ะ >>> http://goo.gl/WcNjl
    คุณอาจจะเจอคำตอบดีๆ ของคำว่าเพื่อนจิงๆก็ได้

  • http://www.sundhercse.com/ Sundher Kingmaker

    Its good http://www.sundhercse.com using it…. thank you

  • Sanobar11

    That’s because the district’s schools are dispersed over three separate bodies of land, spread over nearly 80,000 square miles. From the schools located on Little Diomede Island, you can see Russia with your naked eye. commercial skylight safety

  • yorme

    Nice one

  • Pingback: Cara Memasang Kotak Komentar Facebook di Wordpress | Seni Berpikir