Facebook Social Plugins Pt 3: Install and Customize the Comment Box

If you’ve been following our series on the Facebook Social Plugins, then your WordPress site should be rocking the Like Button. Check out part 1 and part 2 of this series if you’re just now joining us.

In this post, we’ll be showing you how to install the comment box. With the Facebook (FB) comment box, visitors to your site have the option of clicking the Like Button, and leaving a comment on your blog that will also be re-posted in their newsfeed. This is a great way to promote conversation and engagement on your blog.

For this tutorial, we’re assuming that you’re using version 2.9 or later of WordPress and version 1.7 or later of the Thesis Theme, and that you’ve gone through the steps in part one of this series.

We’ll also be editing the Thesis Custom_Functions.php file again. Check out part 1 of this series for more details on how to do that.

Add Comments the Bottom of Each Post

To add a Comment Box to the bottom of each of your posts, copy and paste this code to your Thesis Custom_Functions.php file.

/* BEGIN: Facebook Comment Box On Posts */
function add_fbpost_comment_box () {
	?>
		<fb:comments numposts="10" width="550"></fb:comments>
	<?
}

add_action('thesis_hook_after_post', 'add_fbpost_comment_box');
/* END: Facebook Comment Box On Posts */

The Numposts parameter in the code lets you control how many comments are visible at a time. You can also adjust the width of the box so that it matches the width of your blog posts.

Hide The Comment Box On The Home Page

The downside to adding a comment box to the bottom of every post is if you’ve got your home page set to display full posts, there will be lots of boxes cluttering up the page. It’s not a problem if your home page is set to only display teasers.

Use this code instead if you want to add a box to the bottom of each blog post that can only be seen when someone is viewing the post on it’s own page. Now, you won’t see any comments on your home page, but you will see them if you click on the link to read an individual post.

/* BEGIN: Facebook Comment Box On Posts Hidden On Home Page */
function add_fbpostpage_comment_box () {
  if (is_single()) {
	?>
		<fb:comments numposts="10" width="350"></fb:comments>
	<?
  }
}

add_action('thesis_hook_after_post', 'add_fbpostpage_comment_box');
/* END: Facebook Comment Box On Posts Hidden On Home Page */

If you’d still like to give visitors looking at your home page the opportunity to leave a comment after you’ve hidden them from the home page, use the code below. This code will add a link, that is only visible on the home page, to the bottom of your posts, prompting users to leave a comment for that post. When they click on the link, they’ll be taken to that post’s page, where they’ll be able to see the comment box.

/* BEGIN: Facebook Comment Link To Posts */
function add_fb_comment_plug() {
  if (!is_single() && !is_page()) {
	?>
	  <p class="fb-comments"><a href="<?php echo get_permalink(); ?>#fb_comments">Add a comment</a></p>
	<?
  }
}

add_action('thesis_hook_after_post', 'add_fb_comment_plug');
/* END: Facebook Comment Link To Posts */

For more info on the FB Comment box, check out Facebook’s developer site.

In part 4 of our Social Plugins series, we’ll show you how to install a Like Box to your blog.

Tagged as: blog, blogging, comment box, comments, Facebook, Fan Page, how to, howto, social plugin, tutorial, wordpress