Advertisement
Creative Coding

The Ultimate Guide to Implementing Facebook Comments on your Blog

by

Using Facebook Comments on your blog offers your readers a way to instantaneously comment on posts, as well as to share them without having to do any work. If you think this type of commenting system will suit your audience, read on to find out how you can implement it the right way.


Step 1: Create A Facebook App

Before you actually generate the Facebook Comments code and implement it on your blog, you need to create an app for your site.

  1. Go to developers.facebook.com
  2. Click Apps
  3. Click Create New App
  4. Enter an App Display Name and Namespace

On the next screen, you'll see your newly created app's App ID and App Secret Key. You won't need the secret key, but the App ID will be used later. Take note of it.

Below these keys, go ahead and fill out the Contact Email and App Domain (your blog's domain). Go down and click on Website. Fill in the same domain that you used for the App Domain. Click Save Changes.


Step 2: Insert the Facebook Comments Code into Your Theme

In this tutorial, we'll be implementing Facebook Comments alongside the default WordPress comment system instead of replacing it. If you want, you can head over to the Facebook Comments code generator to get the code you'll need for inserting the comment system; however, I've included it here so you can just copy it. You'll need to customize a few parts of it, however; I'll note which parts those are for each block.

The code block below should be placed in your theme's header.php file. Find the opening <body> tag and paste the block directly below it. On the 6th line, replace "Your App ID Here" with your App ID.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your App ID Here";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

While you're still in your header.php file, go up into the <head> section and paste this block of code somewhere. It will ensure that the Facebook Commenting system on your blog posts knows it's owned by the app you created before. Replace the "Your App ID Here" bit with your App ID (leave the quotes in place).

<meta property="fb:app_id" content="Your App ID Here"/>

The next code block should be placed in your theme's comments.php file. Since we're implementing Facebook Comments alongside WordPress comments, you'll just be pasting it where you want the Facebook Comments box to appear, and you won't be deleting any of the original code.

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="2" data-width="470" data-colorscheme="light" data-mobile="false"></div>

If you generate your Facebook Comments code from the link I gave you earlier, instead of just grabbing it from this tutorial, remember to change the data-href attribute from the original URL to <?php the_permalink() ?>, otherwise Facebook Comments won't work.

You can also edit the data-num-posts, data-width, and data-colorscheme attributes to your liking. The first defines how many comments will be shown on each post before a user needs to click "See More", the second defines the width of the commenting system (set it to something slightly smaller than your content area's width), and the last is the color scheme, which can be set to "light" or "dark".


Step 3: Display the Combined Facebook and WordPress Comment Count

Your theme most likely has several areas where it will show the number of comments there are on a post. By default, it will only show the number of WordPress comments. Since you're implementing Facebook Comments alongside WordPress comments now, you'll want to display the sum of the comments from both systems on each post.

To do this, first open up your theme's functions.php file. Paste the code shown below at the bottom of the file and save it.

// Get combined FB and WordPress comment count
function full_comment_count() {
global $post;
$url = get_permalink($post->ID);

$filecontent = file_get_contents('https://graph.facebook.com/?ids=' . $url);
$json = json_decode($filecontent);
$count = $json->$url->comments;
$wpCount = get_comments_number();
$realCount = $count + $wpCount;
if ($realCount == 0 || !isset($realCount)) {
    $realCount = 0;
}
return $realCount;
}

Note: This code was built off of a function written by Viceprez on the WordPress Stack Exchange. I've simply added a couple of lines to his original function that add in the WordPress comment count. Thanks Viceprez!

Now that you have the function added to your theme, you can use it to replace the original comment count functions used throughout your theme. In my theme, the comments are called using this code:

<?php comments_popup_link('0','1','%'); ?>

Your theme may use this function to display the comment count, or it may not. Once you've found whatever does display it, replace it with this code:

<?php echo full_comment_count(); ?>

There will likely be several places within your theme that you'll need to insert this code. Here's a list of the most common ones:

  • The comments.php file
  • Near the top of your single.php file
  • The index.php - it'll be located in the loop that calls each post
  • Any archive files like archive.php, category.php, author.php, etc. In this, it'll be located in the loop that calls each post as well.
  • On search.php
  • On page.php if you allow comments on pages

If the comment count in your comments.php is diplayed as a sentence, instead of just a number, you can use the code below instead of the one line function call in order to allow for words like "no comments" and "one comment". I've customized mine to be more inviting - I'd recommend that you do the same instead of being generic :)

<?php 
	$commentCount = full_comment_count();
	if ( $commentCount == 0 ) {
		echo '<h5>No comments yet - you should start the discussion!</h5>';  
	} 
	else if ( $commentCount == 1 ) {
		echo '<h5>One comment so far - add yours!</h5>';
	}
	else {
		echo '<h5>' . $commentCount . ' comments so far - add yours!</h5>';	
	} 
?>

Step 4: Get Immediate Notifications of New Comments

The last part of the tutorial will show you how to get Facebook Notifications whenever someone comments on your blog.

First, you'll need to access your comments moderation panel. You can do that by pasting the following URL into your browser, substituting "Your App ID Here" with your App ID. You might also want to add this page to your bookmarks once you're at it.

https://developers.facebook.com/tools/comments/?id=Your App ID Here

Once you're at your comments moderation panel, hit the Settings button in the top right corner. A window will come up, and you should see a Moderators field in the middle of it. Simply add yourself as a moderator, and you'll start getting notications whenever someone comments on a blog post.


Conclusion

If you've followed all the steps in this tutorial, your blog should now have Facebook Comments implemented right alongside the default WordPress comment system. I believe this is an ideal setup, as it gives your readers the best of both worlds; Facebook Comments is probably the most convenient commenting system out there, if a reader is signed in to Facebook (they most likely are), then there's absolutely no authentication or identification fields to fill out. They can just comment away. However, if a reader doesn't want to use Facebook, or wants to add their link or get CommentLuv benefits, you can still let them use WordPress comments.

You also now have a comment count for each post that shows the sum of the comments from each system, and since you're a moderator for your app, you'll get immediate notifications of new comments. I hope you enjoy your new and improved commenting solution!

Related Posts
  • Code
    Creative Coding
    Advanced Use of Attachments in WordPress: Creating Custom Queries for AttachmentsAdvanced use of attachments in wordpress 400
    This tutorial is the second in a four part series in which you'll learn some techniques for working with images in attachments in WordPress which give you advanced options.Read More…
  • Code
    Articles
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    WP101 Training
    Beginning With WordPress: Editing the Structure of Your SiteBeginning with wordpress
    So, you've got your CSS chops up to speed, and your site should now at least be a fair way down the track to being customised with a colour scheme and maybe even some custom fonts to make it really start to feel like it's much more 'you' than it was. But, you're thinking you'd also like to make some other changes and those changes aren't exactly style related. So it's likely you're going to have to to start getting into editing some of the hard-coded, inbuilt structure, and that means starting to dig into the PHP files of your site.Read More…