Facebook Comments on Your WordPress Blog

March 2, 2011

Adding Facebook Comments System to your Site

So check this out… You know the cool commenting feature on Facebook that allows you to comment on status updates, pictures, other people’s comments and Facebook Pages? Well, how would you like to have that capability on your own wordpress site? Now you can!

What Facebook Comments Is All About

Facebook’s comment box feature is another social plugin (like the “Like” button) that you can use to gather feedback on your site, but better yet allow your WordPress commenters to share their comments with their Facebook friends. More about that later. In this post, I will show you step by step how to add this feature to your own WordPress Site, and let you know what I think the pros and cons are for using Facebook’s new social commenting plugin. First let’s talk about how it works.

How it Works

Just like the comment feature on Facebook itself, really. All you have to do is paste a simple code snippet in the source of your website’s template to show Facebook’s comment form and let site visitors comment on your blog post through their Facebook account. Whoa – hold on a minute here… Do what?! Code, snippet, source… Take a deep breath, I’ll show you step by step – later.

If a site visitor is logged in to Facebook, Their picture will show up next to the comment box, just like on Facebook. If they aren’t, they will be given the option to login via Facebook or Yahoo. According to Techcrunch, both Twitter and Google declined to allow their sites as ways to log in. But I do think that eventually there will be other ways to login to use this feature.

Once the code is added, you have a Facebook style comment section, yoo-hoo!

What We Like About It

Come on… Pure cool factor alone makes this a great addition. It’s familiar, unless you’ve been living in a cave. No more typing in your name, email address, website URL, and the comment in the comment box. If a visitor is already logged into his Facebook account, they can simply type in the comment and hit the “comment” button. That’s it!

You, or a visitor can comment as your profile or any Facebook that you are an administrator for. If you have a business page and would rather post a comment on a business blog as your business… Now you can!

According to Facebook, their comments box uses “social signals” to rank quality comments for each user. The comments are automatically ordered so that the user sees the most relevant comments from his Facebook friends, friends of friends and so on. A user can quickly spot whether any of his Facebook friends has commented on this specific blog post and if they have, this will probably help that visitor with their decision to add there own comment. Love this idea!

As a default choice, your new Facebook Comments feature, has a checkbox reading “post to Facebook” checked. This is great! When your visitor comments, the comment will appear on their friend’s wall saying that they commented on YOUR page!

Less Spam. Ability to easily delete comments.

How to Install the Facebook Comments Plugin

1. Follow this link: http://developers.facebook.com/docs/reference/plugins/comments/ – you are about to become a Facebook Developer. In order for this to work on your site, you must let Facebook know. You do this by clicking the link above. You will go to a page that looks like the image below. All you have to do is fill out the 3 fields in the form and click “Get Code”.

Setting Up Facebook Comments

2.  This will give you a pop up window with the code taht you will need to make this work. Highlight and copy the code.

3.  Next, you paste the code into your comments.php template (in most WordPress themes). Erase everything on that page and replace it with the Facebook Comments Code.

HINT: Here’s what I did. I opened my theme’s comments.php file and saved a copy as comments2.php. Then I closed that file and re-opened coments.php. You can also make a copy (highlight the file and Command+d on the mac, copy and paste file on PC). I like to keep a back up, just in case.

4.  Upload the new comments.php file.

Alternate: You can also do all of this in your WordPress Admin. Go to Appearance –> Edit

Select the file comments.php from the right column (your file must be writable). Then highlight and delete all the code from comments.php and paste in your Facebook Comments code.

5.  Once you have pasted in your Facebook Comments code, look for your URL in the code:

<fb:comments href=”yoursite.com” num_posts=”5″ width=”600″>

You must replace the URL to your website with the following:  <?php the_permalink(); ?>, so it looks like this:

<fb:comments href=”<?php the_permalink(); ?>” num_posts=”5″ width=”600″>

This will tell your new comments plugin which page or post to attach the comments to. This is very helpful, so people can click back to your site from Facebook.

That’s it. If you have any questions about this process, please post them below in my new Facebook Comments section.

More to Explore

Specialized ServiceMore Good Stuff!