Adding Facebook Comments To WordPress (Standard Theme)

March 3, 2011 — 8 Comments

Facebook just came out with a new commenting system that has great potential for blogs. There are some “negatives” about the new service, but the massive community that is Facebook makes it very difficult to ignore the new service.

One of the “negatives” is giving up control of all your comments to Facebook. I tried using other external comments systems and always reverted back to the standard WordPress comments because of lost data and other quirks.

You don’t have to give up control. You can keep the WordPress comment system AND use the Facebook comment system too. Making this happen will require the following steps:

  1. Register for a facebook APP-ID.
  2. Create a custom PHP file to support Facebook comments.
  3. Modify Standard Theme to include the Facebook comments.

This tweak requires editing one of the original Standard Theme files (comments.php). So, as usual, backup everything before you make this modification.

Part 1 – Register for a facebook APP-ID.

  1. Log-in to Facebook
  2. Go to this page
  3. Give your app a name, agree to the terms of service, and press the “Create App” button! (see a pic of this screen)
  4. You may get a CAPTCHA page. Fill it out and submit. (see a pic of this screen)
  5. Enter details if you want – I just hit the “Save Changes” button without changing anything. (see a pic of this screen)
  6. You should have an app details page that shows you a bunch of “keys” for your app. (see a pic of this screen). You need to keep this screen open in a tab, or copy/paste the info somewhere where you can get to it later.

Part 2 – Create a custom PHP file to support Facebook comments.

  1. Open your favorite text editor and start a new file.
  2. Save it as something like, my_fb_comments.php
  3. Paste the following code into it:
    <! ###### FB Comments ###### >
    <div id="fb_comments">
    <h3>FaceBook Comments</h3>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js#appId=ENTERYOURAPPID&amp;xfbml=1"></script>
    <fb:comments migrated="1" href="<?php get_permalink(); ?>" num_posts="10" width="560">
    </fb:comments>
    </div>
    <! ###### FB Comments ###### >
  4. Replace the “ENTERYOURAPPID” text with the App-id from your Facebook app details page.
  5. Save it.
  6. Upload it to your server, in the same folder as your web pages.

Part 3 – Modify Standard Theme to include the Facebook comments.

  1. Go to the theme editor page, and edit the comments.php file (remember to back this stuff up first).
  2. You’ll need to insert code into two spots in this file.
  3. SPOT#1: Find this section of code:
    <?php if (have_comments()) : ?>
    <?php if (!empty($comments_by_type['comment']) ) : ?>
    <div id="comments">
  4. Add this code right after it, on it’s own line (IMPORTANT: you need to replace “YOUR-PATH” with the actual path to your file):
    require('/YOUR-PATH/my_fb_comments.php')
  5. SPOT#2: Find this section of code:
    <?php if('open' == $post->comment_status): ?>
    <div id="comments">
  6. Add this code right after it, on it’s own line (IMPORTANT: you need to replace “YOUR-PATH” with the actual path to your file):
    require('/YOUR-PATH/my_fb_comments.php')
  7. Save it.

Tricky, tricky.

The tricky part is getting YOUR-PATH right – it’s not a URL, it’s the server path to the file. Here’s one way to find it:

  1. Download this file: phpinfo.php
  2. Place it in the same folder as your my_fb_comments.php
  3. Run it like: http://mydomain.com/phpinfo.php
  4. On the results page, find a variable called “SCRIPT_FILENAME”
  5. That should give you the path to the phpinfo.php, which is also the path to your my_fb_comments.php
  6. Once you have everything working, I suggest you delete the phpinfo.php file.

Final Notes…

  1. You need to bookmark this URL: http://developers.facebook.com/tools/comments – you’ll need to moderate the comments. Also, make sure you use the “Settings” link that you’ll find there to set some options (including assigning additional moderators).
  2. This is adaptable to other themes, you just have to find the right place to insert the require() tags.

herbhalstead

Posts Twitter Facebook

Herb is the lead pastor at Thrive Church. Herb also does freelance web design, 3D architectural modeling, and works as an architectural designer.

8 responses to Adding Facebook Comments To WordPress (Standard Theme)

  1. I must say this is very cool, BUT I wonder how many folks now have a blocked page due to work. A month ago and this entire page would of been blocked at work, but since our patients update their families via facebook they opened it up. Cool stuff!

    Also it’s down, an error is thrown when you use it.

    • well, you always say don’t be afraid to try things (wink) – I committed to seeing how this impacts traffic for a month. Got about a week left in the experiment. We’ll see.

Leave a Reply: