March 5, 2012 Comments are off

Recently, I had to add Facebook comments to the pages in the Blog category for Semper Fi Fund. Using Facebook comments is nice because almost all visitors will have an account. It automatically grabs their profile picture instead of having to worry about an avatar and protects from spam. Setting it up was quick, painless and achievable in just a couple of steps.

Creating a Facebook Application

Don’t let this fool you. You don’t have to publish the application and it doesn’t have to live anywhere except in your development environment. I know you already have a facebook account so just make sure you are signed up as a developer: developers.facebook.com/apps. Once you’re in, the default landing page will have a “Create an App” button. Fill out the fields like the demonstration. Just be sure to make a display name and then type the name of your website into the website column.

Adding-Facebook-Comments-1

Super simple, huh? Then we can move along to the website. Note that we will not the APP ID because we are specifying the website as the type of application.

Adding the Comments to WordPress

Finding the Category ID

For this particular site, they only wanted the comments to show up on the Blog category. No problem. Here, I just logged into the WordPress admin and found the Posts -> Category called “Blog”.

Adding-Facebook-Comments-2

When hovering over the category you will notice the category ID at the bottom of the page in the Chrome browser. It may show up elsewhere in others but you can always right click on it and grab the link. Notice where it says tag_ID=641? Well 641 is our category ID.

Adding-Facebook-Comments-3

Placing the Comments in Single.php

Finally, open single.php found in your WordPress theme.  Your theme may have a comments_template function if its the default theme. In place of it, add the following code:


<?php if(in_category('641')): ?>
  <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="625"></fb:comments>
<?php endif;>

The in_category() function will look only in the specified category. I have set the argument to 641, which is my Blog category. Finally, you adjust with width of the comments frame to your column’s container, or remove it altogether. A quick test should confirm the comments are working!

Also, as a plus – the user can quickly “Share” the comment to his or her Facebook wall with the “Post to Facebook” button.