Add the Facebook comments box plugin to WordPress. Facebook social plugins are easy to add to the Thesis theme, Genesis framework, Woothemes Canvas, etc.

Add Facebook Comments Box to WordPress

Written by in Tutorials |

This is part 5 of 7 in the Facebook Social Plugins series:

Comments Box is a social plugin that enables user commenting on your site. Features include moderation tools and distribution.

Facebook DevelopersComments

We’re chugging right along in this series. By now you should have your Facebook app ID, the JavaScript SDK added to your page(s), and the Open Graph protocol <meta> tags added to your <head> tag. Now, we’re going to replace the default WordPress comments with the Facebook Comments Box. The cool part? You can do this on any page, single post, multiple posts or even add them without removing your WordPress comments.

The Comments Box Attributes

The standard code that Facebook provides looks like this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="yoursite.com" num_posts="10" width="500"></fb:comments>

The following are the attributes that can be changed:

  • href – this is the URL for the comments plugin. Any news feed stories posted on Facebook will link bac to this URL.
  • width – the width of the comments box. Minimum is 500px.
  • num_posts – number of comments to show. The default is 10.
Facebook Comments Box Plugin

Facebook Comments Box Plugin

Add Comments Box to WordPress

For General WordPress Users

The standard code shown below can be added to your themes single.php file or equivalent right after the post and before where the standard comments appear.

If you don’t want the standard WordPress comments area to appear as well, you must uncheck the “Allow comments” option under “Discussion” in the post editor (for single posts only) or disable comments on all posts by going to “Settings” then “Discussion” and then uncheck “Allow people to post comments on new articles” within your WordPress admin dashboard.

<div class="fb-comments"><fb:comments href="yoursite.com" num_posts="10" width="500"></fb:comments></div>

For Thesis Theme Users

open the custom_functions.php file and add:

//ADD FACEBOOK COMMENTS TO SPECIFIC PAGE
function add_facebook_comments() {
	if (is_single('438')) { ?>
<div class="fb-comments"><fb:comments href="<?php the_permalink(); ?>" num_posts="20" width="580"></fb:comments></div>
	<?php }
}
add_action('thesis_hook_after_post', 'add_facebook_comments', '99');

The above code is how I got the comments box to show up ONLY on this post. I disabled the default WordPress comments by unchecking the “Allow comments” option under “Discussion” in the Posts Editor. Then I added the specific post ID to the code above (if (is_single('438')) { ?>).

Want to use Facebook Comments on all posts? Remove the ID like so: if (is_single()) { ?>

Show Facebook Comment Count

The fb:comments-count tag will display the number of comments on a particular page that has the Comments Box installed. For instance:

<div class="fb-comments"><div class="fb-count">There are currently <fb:comments-count href=<?php the_permalink(); ?>></fb:comments-count> comments.</div><fb:comments href="<?php the_permalink(); ?>" num_posts="20" width="580"></fb:comments></div>

By adding the extra code (in red), the Comments Box will now display the message you see at the top of the comments below.

Style Your New Facebook Comments

I added the following to my custom.css file (or equivalent) to style the new code:

/*======FACEBOOK COMMENTS PLUGIN======*/
.fb-comments {
	margin-top: 20px;
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	padding: 8px 10px;
}
.fb-count {
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: 400;
	color: #888;
}
.fb_comments_count {
	font-weight: 600;
	color: #333;
}

Comments Moderation Tools

Since you already have your Open Graph meta tags setup to provide your App ID and Admin ID, you can navigate to the Comment Moderation Tool and tweak visibility settings, blacklist words, and turn on/off the grammar filter.

There are currently comments.

Enjoy this post? Consider sharing it: