[UPDATE (July 1/11): While the below information is still valid, I have started using the Disqus comment system. Some of the comments on this post were, however, originally posted using the SFC plugin, then exported later to Disqus.]  

PART 1: IDENTIFYING THE PROBLEM

I have almost no experience with coding. Luckily, I do have the ability to follow simple instructions, an ability which has served me well during this project.

FB_Comments_300x300
FB_Comments_300x300

I spent several evenings doing research on how to add Facebook comment integration to this site. There are a large number of articles and resources for this subject, but many are either too simple (and don’t have enough customisation options) or too complex (and are hard to implement if you lack the ability to code). A simple, flexible solution was more difficult to find. This was perhaps because, while many solutions work for generic Wordpress themes, there are fewer resources for my current theme, SimplePress by ElegantThemes.

PART 2: RESEARCH

My first reflex was to find a plugin to do the coding work for me. Two plugins seemed promising:

  • Simple Facebook Connect (SFC) plugin: I couldn’t get this working at first, not realizing that it requires a small amount of coding for integration with SimplePress. More on this in Part 4!
  • Facebook Comments plugin: This plugin slowed down my theme and wouldn’t integrate properly. It is still worth checking out if you are using a theme other than SimplePress.

Since I could not, at first, get either of these plugins to work, I started reading the Facebook Developers documentation. They have well-documented articles, for beginners and experts alike, on how to use Facebook comments with your website.

PART 3: THE FACEBOOK COMMENTS BOX

FB_Comments_A
FB_Comments_A

The benefit of this solution is how easy it is to implement. The downside is that all user comments are shared across your entire site. For example, a comment about a “shark logo” was easily understood in its intended post, but was incomprehensible when viewed from other articles.

A prerequisite for having Facebook comments in your blog posts, no matter whether you use a plugin or you code everything yourself, is to create your own app. It only takes a few minutes, and at the end, you’ll get your APP ID and your App Secret. This gives you administrative control over comments once people start posting.

Following the instructions on the Facebook Developers Page, I started by searching comments.php (from the WP Dashboard, go to Appearance -> Editor) for the following lines.

[php]<!-- You can start editing here. --> <div id="comment-wrap"> <?php if ( have_comments() ) : ?>[/php]

I inserted several lines, with this result:

[php]<!-- You can start editing here. --> <div id="comment-wrap">

<!--START FACEBOOK COMMENTS --> <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:comments href="YOUR_CANONICAL_URL"></fb:comments> <!--END FACEBOOK COMMENTS --> <?php if ( have_comments() ) : ?>[/php]

I discontinued this implementation once I learned that I couldn’t set up separate comment walls for separate posts, and that I could not store any of the comments on this site. For a more detailed discussion, read this post by the Facebook Developers (how-to video included).

PART 4: THE SFC PLUGIN

Before giving up, I decided to try one last shot in the dark: e-mailing the author and asking him for help. I e-mailed him the “comments.php” form last night before going to bed. When I checked my e-mail this morning, he had already modified the file so it worked perfectly. I’m sure there’s an important lesson to be learned somewhere in this experience.

I read the author’s notes in this blog post, but I had trouble figuring out how to implement it exactly with my theme. For SimplePress (and possibly other ElegantThemes), here are screenshots of what to change. Here is the first code to add. The left side is the original, and the right side has been modified.

[php]<div id="comment-user-details"> <?php do_action('alt_comment_login'); ?>[/php]

FB_Comments_B
FB_Comments_B

Here is the second part of the code to add.

[php] </div> [/php]

FB_Comments_C
FB_Comments_C

I still have a lot of testing to do, trying to figure out how all the SFC sub-modules work. But installing SFC is a much better solution than either using Facebook’s comments box or writing all the code from scratch. Comments are stored on-site, people can still comment seamlessly, using their Facebook profile, and coding requirements are minimal.

[UPDATE: April 3rd, 2011:] For those of you who are looking for a way to use the actual "Facebook Social Comments" plugin, try looking at David's WordPress Plugins. I haven't tried to use his "Simple Facebook Comments" with an ElegantThemes template, but if you want to implement the Facebook comment system only (without storing comments on your blog) it might be what you're looking for.