• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • The Famous Blog
    • Blogging
    • Social Media
    • SEO
    • Marketing
    • Design

Famous Bloggers

How To Blog and Start a Business

  • Contribute
    • Submit News
  • Login

Home » The Famous Blog » How to Add Facebook Comments to Thesis Theme

How to Add Facebook Comments to Thesis Theme

April 25, 2011 - Last Modified: December 26, 2012 by Hesham Zebida 4,252

Add Facebook Comments to Thesis Theme

I’ve tried Facebook comments on our blog since a few days back, and so far results are great, our blog visitors are actually using it as an easy way to add a comment, of course if’s easy because they are logged in to their Facebook accounts, so it takes nothing to comment, I mean you don’t have to add your name and other details that you must add if you are commenting using the default WordPress commenting system on the blog.

I’ve got a question today from one of our blog readers asking about how to add Facebook Comments Box to Thesis Theme, so I am going to put together an answer in this post hopefully it will help someone out there.

So, let’s begin to use the Facebook social plugins to do this task, it’s pretty easy! I am going to include the codes you need below as I’ve done this many times on my other Thesis Skins, and to make it even easier, we will go a step by step, and the results will display the Facebook comment box on each single post of your Thesis blog, remember this codes is written for Thesis Theme, and probably it won’t work for any other WordPress theme than Thesis.

Display Facebook comments on Thesis Theme

Step 1 : Get the basic code from Facebook social plugins

Visit Facebook comment box social plugin page to get the basic code, this is important step as you will get an ID that will be used to make the comment box works on your blog.

facebook comment box codeLet’s say that you will:

  1. URL to comment on (Your blog URL)
  2. Number of posts (Comment to display), maybe something around 5 comments.
  3. Then you will display a width of 500px for the comment box

We will need to make a small modification here as the code you’ve got will not grab your blog posts, it will only read your blog home page.

So, we need to change your website URL “URL to comment on” to something more dynamic, for example you will need to tell the Facebook comment box to use the URL of your blog posts.

Step 2 : Place the code in your Thesis Skin custom function file

Here is the code you will need to add to your custom_functions.php file:

Note: We’ve changed the URL so when the code runs it will check and place the right post URL. You will need to change the ID where it says “ADD_YOUR_ID_HERE” to your ID.


// Add facebook comments
function fb_comments(){
if (is_single()) { ?>
<div class="fb_comments">
<div id="fb-root"></div><script src="https://connect.facebook.net/en_US/all.js#appId=ADD_YOUR_ID_HERE&amp;xfbml=1"></script><fb:comments href="<?php the_permalink(); ?>" numposts="5" width="500" publish_feed="true"></fb:comments>
</div>
<?php }
}
add_action('thesis_hook_after_post_box', 'fb_comments');

Again, don’t forget to use your own ID where it say “ADD_YOUR_ID_HERE” in the code above!

Cool! Let’s do some light styling!

Step 3 : Add CSS if necessary

In most cases you will not really need to add styles, but let’s say we just need to give a little space on the top and bottom of the Facebook comment box to make things look better, so this is a very simple CSS stuff, one line of code could do the job as we will need to set some margins for the comment box, so feel free to play with it if it doesn’t show the way you like it.

Add this code to your Thesis Theme custom.css file:

[css]
/* Facebook comments */
.fb_comments { margin-top:20px; margin-bottom:20px; clear:both;}
[/css]

Awesome! Update your files and you are done!

It’s time to clear your cache and refresh your page!

How to display Facebook Comments count in WordPress

This is a quick update, I’ve got a question in the comments asking how to do display Facebook comment count, so here is some code that you can make use of, add the code where you want to display the count in your theme:

[php]

<fb:comments-count href=”<?php echo get_permalink($post->ID); ?>”></fb:comments-count> Comments

[/php]

Oh! Just in case.. If you come by this post after 3 years from now and the code didn’t work for you, then check the Facebook social plugins page to get information you need to make it work, I predict they maybe the Facebook developers changed something 😉

Want to see more nice posts and tutorials for Thesis Theme?

  1. What Top Niche Web Designers Say about Thesis Theme for WordPress
  2. How to Create Tabs using JQuery Tools For Thesis Theme
  3. Linkify Twitter usernames, add Twitter Anywhere in Thesis Theme TwitterLink Comments
  4. I Lost Twitter Id field after upgrading to Thesis 1.7, solve Twitter ID after upgrade to Thesis 1.7
  5. Thesis 1.7 is Installed and Running on Famous Bloggers
  6. Thesis 2.0 will Hit the Market with Higher Price for Developer Edition
  7. Thesis 1.7 A New Generation of Website Optimization
  8. What is the Best Page Navigation Plugin for Thesis Themes
  9. How to add a stylish sidebar image buttons to Thesis Theme, get PSD and Sample Files for FREE
  10. How to add Page Navigation to Thesis Theme and CSS Style it using Thesis OpenHook and WP-PageNavi Plugins

Enjoy!

ShareTweet

Filed Under: Thesis Theme

About Hesham Zebida

Follow @hishaman

I create websites with WordPress, and I develop Schema Plugins to help SEOs. I am a social network lover. I am also the night creature who works hard to keep this project up. Owner and founder of the Famous Blog.

Reader Interactions

Related Posts

  • Is There a Movement to Take ‘Social’ out of Social Sites? For Some There Is!
  • 10 Things You Need to Cease Doing on Social Media
  • Lessons from the Failed Facebook Creators
  • Google Hangouts – The Fall of Babel

{ 68 Responses }

  1. Toufiq says:
    I am using thesis with new Facebook plugin, the problem is default Comment box is not showing anymore, any help in this issue?
  2. Ari Herzog says:
    Thanks for this, Hesham. In an effort to remove spammy/salesy names who comment on my blog and to increase my productivity when reviewing pending comments, I'm trying out your code in implementing this instead of the vanilla WP commenting options. Ideally I'd like to offer what Mashable does -- the choice of FB or Twitter only, not the social plugin that also gives email sync options. Is this doable in Thesis?
  3. Frank says:
    I had added facebook comments with moderation to my site when I realised it was the same box that appeared everywhere. I was relieved to find your post and it did fix the issue of having one different comment box per post BUT I lost the moderation option... Have you run into this issue? Do you know if your code would/could tamper with comment moderation? Thanks for your help!
    • Frank says:
      Turns out adding comments adds the moderation link to the box... It won't appear without comments... Weird... Anyway, thanks a lot for fixing my issue :)
  4. Paul says:
    P.S - This is an addition to my previous post. You're code actually messed up my sidebar on all my posts. It moved all my content on my sidebar to the bottom of the page, below the post, and the sidebar has nothing in it. Not sure why.
    • Hesham Zebida says:
      The code was missing a close div, I've edited it! Sorry about that, I think I forgot it when I changed the code highlight plugins I am using.
  5. Paul says:
    I have tried so many things to get a facebook comments box on my thesis-themed blog, and nothing has worked. I have tried 3 or 4 different plugins, followed the instructions exactly, and none of them added a facebook comments box to my blog. I then found these instructions, and I followed them exactly, and still no facebook comments box on my blog posts. I have a facebook app with the app ID inserted into your code above. You are not very clear in you language, but, as I understand it, that is the only thing that needs to be changed. If something else besides the app ID needs to be changed, please let me know. If the app ID is all I need, why can't I just get that from my app settings on the FB developers page? Why do I have to generate a separate code, and then just pick out the app ID from that code (which I already have) and put it into your code? Seems strange to me. I must be missing something. Hopefully I'm being clear enough. Someone please help, I'm wasting too much time with this!
    • Hesham Zebida says:
      Paul, the whole code is just an example, I wanted to be complete so anyone can understand it! However, Facebook has a slightly different way now! I will update this post on the first chance.
  6. Jordan Reasoner says:
    Thank you for this tutorial! I have a tricky question for you... what if I've already had Facebook comments on my thesis theme for a while, but never had my FB ID in them, so the plugin has been working fine independently? I created an ID and I'd like to change my code to include it so that I can moderate and get notifications of comments, but I'm afraid I'll lose all the previous comments. Any ideas on what implications adding my FB ID to the thesis code will do? Thanks, Jordan
    • Hesham Zebida says:
      Hi Jordan, I really don't know the answer to your question! So, probably you need to test things out first, for example, you can setup the same plugin on your test site (if you have one), then add a few comments, then use your ID, this will get you an answer! I wish I could help!
  7. Nathan says:
    Good tutorial, however integrating comments also mean replacing comment counts in the various places e.g. in the post bylines on the homepage (or am I missing something?). Any tip on how to achieve this using FBML? Been struggling for a while now... Thanks for any help, Nathan.
    • Hesham Zebida says:
      Try adding this line of code where you want the count to show! P.S. I've updated the post and added the code!
  8. Haru says:
    i tried on my other blog and it's works :D thanks..
  9. Jordan says:
    I saw the Thesis BlogSkin (demo) using Facebook comments and it looks nice. I do like how users are already logged in showing their FB profile photo and can just comment. Is there a you choose not to use it for FamousBloggers?
  10. Kristin says:
    I must be missing something here. There is absolutely no-where in the code that is generated that says "app=" Have they changed something since you posted these instructions? Thanks for any help! Here is the code I get: *** code removed by the editor!
    • Hesham says:
      No sure if they have changed something, but this code still working on my blogs! Anyways, you can visit the Facebook comment box page and grab a fresh code!
  11. Jagan Mangat says:
    Thank you very much for this piece of help,full credit goes to you and FB..........
  12. Nick says:
    I followed the instructions to generate the Comments code from Facebook, but no APPID number was present in the code it generated ... This is the code it generated: I must be missing something here ...
  13. Haru says:
    why its not work 4 me??? i cant find any apps id in the http://developers.facebook.com/docs/reference/plugins/comments/ ..whyy???
    • Hesham says:
      Probably because you haven't created an app yet!
  14. Johanna says:
    Hi Hesham, I've been looking into some instructions regarding how to add FB comments to Thesis. I've tried adding it before on my blog, but it messed up my site. Thanks for sharing with us this tutorial. I will bookmark this and try it out on my blog once again.
    • Hesham says:
      No problem, glad you like it!
  15. Vijayraj Reddy says:
    this is cool tutorial man, i always wanted to add facebook comments to my blog...
    • Hesham says:
      Hope if you had a chance to try it, please share you experience with us!
  16. kbharath says:
    Thanks for sharing this clean and easy tutorial Hesham i will give it a try and are you working on any new skin for thesis.
    • Hesham says:
      Yes, I am always working on developing new skins for Thesis, but not sure when I can release a new one :)
  17. Alex says:
    Hesham my good man! I just wanted to say thanks again. I managed to figure it out. The ID only applies if you have a developer ID already, so if you do not this is the code I mangled together out of what you gave me to make it work: (obviously change the URL to your own people) // Add facebook comments function fb_comments(){ if (is_single()) { ?> <fb:comments href="alexwhalley.com" num_posts="5" width="500"> <?php }} add_action('thesis_hook_after_post_box', 'fb_comments'); // End of adding facebook comments
    • Hesham says:
      Great Alex, I haven't notice that because I do a lot of testing stuff and I actually have few Facebook application since some time, thanks for explain it!
  18. Ian says:
    I'm getting ready to install thesis on a new niche site I'm building out. Been on the fence about the facebook comments but will give it a whirl now bc it looks pretty easy to instal. Thanks!
    • Hesham says:
      Great, I hope you will enjoy Thesis and the Facebook comments, good luck!
  19. Icechen1 says:
    Hmm, I wonder if Thesis is really work the buck? I use free themes, for now.
    • Hesham says:
      Thesis has a wide membership, more than 30.000 people are using it! I can not use free themes after I enjoyed a premium service!
  20. Alex says:
    Hesham, you never cease to amaze me with your technical brilliance and genuine nature! Thankyou so much for putting this (really) easy to follow guide together. I see that even in the comments thread you continue to provide value and help, no surprise there :) I know you did this because I asked so again, thanks Hesham, you're a champ!
    • Hesham says:
      Hey mate, it's not a problem, you gave me a nice idea for a blog post :) So thank you, and I hope you you enjoy it!
    • Alex says:
      Hey mate, I have been looking everywhere for the app ID? It is not provided in the link you gave in the post (and to one commentator who asked). Looked everywhere for it? Can you point me in the right direction my good man?
      • Hesham says:
        Hey Alex, Visit the Facebook comment box page, fill the necessary fields then click on get the code, you will find your ID in the code!
  21. John says:
    Hi Hesham, I had used this on site, didn't tried for my blog. Hope it will improve visitors on my blog Thanks for awesome post John
    • Hesham says:
      No problem, glad to help!
  22. tonyknuckles says:
    Hey, Hesham..would this work on a site built on the Genesis framework? I tried fooling with this before and it hoarked things up something fierce.
    • Hesham says:
      Hi Tony, you will need a very simple change in the code, it's basically in the hook, change the add action from Thesis to Genesis! Change this: thesis_hook_after_post_box To be this: genesis_after_post_content I hope this helps!
  23. LA Juice says:
    So I feel like an idiot- I don;t know what to replace "ADD_YOUR_ID_HERE” with- what ID are we talking about Do I have to get a special facebook developer ID to use this?
    • Hesham says:
      No worries, you can get your ID by vising this page on Facebook, read the code, and pick your ID where it says #appId=xxxxxxxxx I hope this help!
      • LA Juice says:
        I think it did- I saw the code, and the ID, so hopefully everything goes well after that! thanks again!
  24. Fran Aslam the Onlinewriter says:
    Thanks for sharing this Hesham. As you said you will be able to drive traffic from face book links directly. Cool trick. keep focused and add to your success Fran A
    • Hesham says:
      That's true Fran, you are welcome!
      • ipunk says:
        This tutorial doesn't work
  25. Prasenjit says:
    The problem with this that i noticed is that if somebody is logged into facebook, then only the comments which are made using facebook are being shown and other comments are not shown. but anyways great tutorial.
    • Hesham says:
      I just think that commenters should be logged in to their Facebook account when commenting on the Facebook comment box, if not then simple they should use the default WordPress commenting system or we will miss their comments!
  26. Trung says:
    Nice tip Hesham! I think it can apply for Genesis Framework too, thanks for share, I will do it for my site on Genesis (If I can)
    • Hesham says:
      Yes it can be added to any theme or framework, for Genesis you need to look at one of these tow hooks , the "genesis_after_content" or "genesis_before_comments".
    • tonyknuckles says:
      I've simply logged into Facebook on sites where the plugin is installed and then it gives me the option of commenting as a page admin or private profile. Works like a charm on the site that I own.
  27. Paul Salmon says:
    Nice post Hesham. I am seeing more and more blogs that include Facebook comments. I have also seen blogs that only include Facebook comments, and not the native blog commenting system.
    • Hesham says:
      Ah! This is also very popular on products sales pages, I think they do it to reduce spam and spread the word!
  28. Nasif says:
    Yaaah ! Finally a tutorial to add facebook comment on thesis theme. But is there any way to remove spammy comments posted through Facebook ? Would be glad if some help me in this
    • Nasif says:
      *if someone
    • Hesham says:
      When you mouse over any comment you will notice a "x" on the right, click it to remove any spammy or unwanted comments! There is no automated way that I know!
  29. Ileane says:
    Hi Hesham, Facebook comments seems to be an important feature for any blogger with a Fan Page. When I publish my page I'll be sure to add this feature and I'm sure it will look great with the Thesis Awesome BlogSkin! Thanks for the instructions my friend. Have a great day!
    • Hesham says:
      Hey Ileane, The BlogSkin has this option, you just need to get your Facebook ID and paste it in the BlogSkin options to make it work! You actually don't need this code at all :) Find the option under Edit BlogSkin > Facebook
      • Ileane says:
        SWEET!!! That's another bonus for using ThesisAwesome Blogskin. Now I just need to publish my Fan Page. :) Btw - did you notice that CommentLuv isn't working properly. I thought it was just me but I see the some other commenters are missing CommentLuv too. What's really strange is that when I left the first comment, I had my other laptop on and the CommentLuv worked fine.
        • Hesham says:
          Yeah! I notice that, however it's working for some people, I am trying to discover why!
  30. Jane Cooper says:
    this is realy good way to reach some audience, people fell that they don't have to do anything to post comment and it's realy easy for them so they just comment, and facebook has so big database of users that it's also great ad if someone see link to your site on facebook.
    • Hesham says:
      It's your lucky day if you can drive traffic from Facebook ;)
  31. Tuan says:
    Thanks for sharing the tutorial. I will try and see if it could work on my site running on Genesis.
    • Hesham says:
      Great, you just need to find the right hook for Genesis , maybe one of these two hooks , the “genesis_after_content” or “genesis_before_comments”.
  32. Tinh says:
    Nice tip Hesham. I will think about this for my new site on Thesis
    • Hesham says:
      It's working well so far, maybe give it a try!

Primary Sidebar

Our Newsletter

Our Newsletter

Join our mailing list to receive the latest news and updates from our blog.

You have Successfully Subscribed!

Popular Articles

  1. Top 10 Sites Where You Can Get Paid to Write 115,645 views
  2. How to Get Targeted Twitter Followers Fast 92,035 views
  3. How to Set Half Rating Scale 1-5 (Poor to Excellent) by Words 86,539 views
  4. 66 Awesome Social Media Quotes 78,368 views
  5. 50 Traffic Sources You Should Milk Like Crazy 75,080 views
Schema Structured Data for wordPress
  • Blog
  • Contribute
  • About Us
  • Contact Us
  • Disclosure Policy

Copyright ©2020 · FamousBloggers - All Rights Are Reserved · Powered by Genesis Framework

  • Login
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.
Go to mobile version