How to 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.
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.
Let’s say that you will:
- URL to comment on (Your blog URL)
- Number of posts (Comment to display), maybe something around 5 comments.
- 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&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?
- What Top Niche Web Designers Say about Thesis Theme for WordPress
- How to Create Tabs using JQuery Tools For Thesis Theme
- Linkify Twitter usernames, add Twitter Anywhere in Thesis Theme TwitterLink Comments
- I Lost Twitter Id field after upgrading to Thesis 1.7, solve Twitter ID after upgrade to Thesis 1.7
- Thesis 1.7 is Installed and Running on Famous Bloggers
- Thesis 2.0 will Hit the Market with Higher Price for Developer Edition
- Thesis 1.7 A New Generation of Website Optimization
- What is the Best Page Navigation Plugin for Thesis Themes
- How to add a stylish sidebar image buttons to Thesis Theme, get PSD and Sample Files for FREE
- How to add Page Navigation to Thesis Theme and CSS Style it using Thesis OpenHook and WP-PageNavi Plugins
Enjoy!
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 }