How To Add Facebook Comments To Your Blog

As you have probably noticed, more and more blogs, e-commerce websites and all kinds of applications online are taking Facebook integration more seriously. One of those popular elements is Facebook Comments.

But what you probably don’t know is that it’s not that complicated to add them to your blog yourself. In fact, I’m pretty sure you can be rocking Facebook Comments on your blog in the next hour or so. I’ll tell you how to do it in just 5 steps.

Before we start this mini-tutorial, let’s go over a couple of things…

What are the Pros?

There are a few reasons you might be considering the possibility of integrating Facebook Comments into your blog posts.

Exposure

• Comments are easily published on the commenter Facebook Wall Timeline. This helps increase awareness, you are now in front of that user’s network of friends
• The comment is posted on the user’s Timeline along with a thumbnail, headline and excerpt from the blog post as if the user was sharing your post

Engagement

• Replies to those comments can take place either on the same post in your blog or on that user’s Facebook Timeline. This motivates conversation not only inside your blog but also on Facebook
• Those comments can also be Liked by other users

Authentication

• Most people are on Facebook and are already signed up to their account, which means they don’t need to authenticate to any commenting system. Users that are not logged to Facebook can log in from your post comments
• Most people are familiar and trust Facebook

And the Cons?

The issue for me is not that this is a 3rd-party solution living in your blog. If you think about it, most of us bloggers already use 3rd-party apps to support our comments. I use Disqus in this blog but you’ve seen others like Livefyre or IntenseDebate. Very few blogs still rely on the WordPress native comment system.

But in this case you need to consider that your comment system belongs and it is a vital element of a social network.

• Not everybody is in love with Facebook, some people actually prefer Google+, some are hardcore Twitter users. The invitation to interact via a network that is not their preference might not be welcomed with open arms
• Totally depending on Facebook might not be such a good idea, you know how they change things around from time to time. What if tomorrow they dramatically change one of those elements you have deeply integrated into your blog? #goodtimes

That’s why some blogs offer the the possibility to comment through Facebook while they still have a more universal commenting system.

So there you have it, advantages and disadvantages I see and share with you to help you make a better decision.

Are you ready to get started? Let’s do this thing then!

1. Become a Facebook Verified Developer

Becoming a Facebook Verified Developer is very easy, don’t let the fancy terminology scare you. Let me take you step-by-step:

• Go to the Facebook Developer website
• click on “Apps” on the top blue navigation
• Click on “Create an App” (this will be as far as you can go without being a developer)
• You will see a “Your account must be verified to perform that action” message and you will be offered two methods: Phone or Credit Card
• If you go with the phone option, you will provide your number, Facebook will send you a code via text and you will submit that code back to them. Boom! You’re in business
• If you choose Credit Card just provide your information and follow the instructions. Sometimes this is the best option, specially if you’re outside the US

That’s it, you wanted more? Call your spouse and share the news: You are a Facebook Verified Developer…

Cool, now we can move on to more important things…

2. Create a Facebook App

Since you are now a verified developer, you can continue to create a Facebook App. The first thing you’ll see is a little popup so you can indicate the name of your app.

App Display Name is simply the name that is displayed for others to see and the App Namespace is used for Open Graph and Canvas Pages. Do NOT sweat this stuff because we are not really building an actual App and we don’t need to display anything to anybody. Just come up with a name that represents what we’re doing so you can quickly identify it in the future.

Good example: “your website comments”.

And we need to make sure these names are valid and available, as you can see in green text on the previous image. If they’re not, just come up with something different.

Your App ID

This will give you the most important piece of information you will need: your App ID and your App Secret. Save them for your records.

Configure your App

Now we just need to do a little configuration for your App. On the same page, scroll down to the “Basic Info” section. Since we already have a Display Name and a Namespace, all we need to add here is the contact email and the App Domain, which is your blog’s domain (yourdomain.com) without the “http://”.

Scroll down a little more to the section “Select how your app integrates with Facebook”. Select “Website” and add your blog’s URL, this time including the “http://” so it looks like this: “http://www.yourdomain.com”.

Save Changes. And we’re done configuring the Facebook App. Congrats!

3. Get Your Code

Now we’re going to a different section on the Developer’s site. Click here so you can get your comments code. If you’ve added the Like button or the Like Box on your blog, you’ll probably be familiar with how this tool looks. If you’ve never seen this, don’t worry, this is very easy.

First thing is to configure how the comment box is going to look on your blog:

• Start by adding your blog’s URL again (http://www.yourdomain.com)
• Specify the number of comments you want to display on your blog post
• Set the width of the box depending on how wide the content area is on your blog
• The “Color Scheme” will usually stay as “Light” unless you have a dark background on your site and prefer to go that way

The section on the right of the screen (see image below) gives you a preview of how things are going to look once you install on your site. As soon as you’re happy with it, click on “Get Code”.

And a new box will pop up, this one is to grab your code but before you do:

• You get 2 options for code: HTML5 and XFBML. My preference is HTML5
• And very important, Select the correct App from the dropdown menu, specially if you have more than one

Now you’re ready to copy the code from the first box, there is no need to change anything since Facebook already integrated the App ID in the code for you. Your code should look a little something like this:

<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]“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

4. Adding the Code to your Site

Two more steps and we’re golden.

Now we are going to have to paste this code into your PHP code, inside your “header.php” file to be more exact. I know it sounds like we’re stepping into another dimension but it’s actually pretty easy. Stay with me…

There are two ways you can do this, if you’re comfortable connecting and managing files on your server via a FTP Client you can do that. Connect to your server and locate the “header.php” file.  

The second option is from your WordPress Dashboard. This sounds more human, right? Most themes have a section called “Editor” under the “Appearance” tab on the left menu. Again, that’s WordPress Dashboard > Left Menu > Appearance > Editor.

On the right side of your screen you’ll see a list of all the theme files, find and click on “Header (header.php)”, that will display the actual code in the file in the center of your screen.

Now, paste your piece of code right after the <body> tag as shown in the following image.

Save when you’re done.

5. Adding the Facebook Code to Your Comments

Let’s go back to Step 3 to grab the other code from Facebook which should look like this:

<div data-href=”http://yourdomain.com” data-num-posts=”10″ data-width=”550″></div>

In this case we do need one minor tweak. What happens with this code is that Facebook is providing it ready to work for that specific domain but, what we want to do is install the comments on every post in our blog. So we’ll replace the section that contains your domain (http://yourdomain.com) for this: <?php the_permalink() ?> and now you’re code will look like this:

<div data-href=”<?php the_permalink() ?>” data-num-posts=”10″ data-width=”550″></div>

That will do the trick. Now your Facebook Comments will automatically appear on every blog post you publish.

We need to go back to our WordPress Editor now. Locate the file named “comments.php” from the menu on the right.

In this case the positioning of our code really depends on where we want the comment box to go, I wanted them on top of the WordPress native comment system so that’s where I placed it (above image).

Don’t forget to save.

And with that, we are done. No high fives yet…

Results

It’s the moment of truth, we need to go to our site and see if the Facebook Comment Box is showing up in our posts. And this is what you should see:

Let’s Test It!

Let’s test the comment system just to make sure everything is working properly. First just add a comment right there in your blog post and make sure you checkmark the “Post to Facebook” option right below the comment box.

Now check if the comment is displayed on your Facebook Timeline.

As you can see, besides the comment, the post image, headline, and the meta description for the post are also displayed on the Facebook Timeline. Very similar to a share. Shiny!

Reply from the Timeline

Now try interacting with that same comment right from the Timeline to see if it also gets displayed on the blog post page. In this example, I’m replying with my wife’s account, check it out.

And back to your blog post, things should be looking like this.

And now you have a conversation about your post that is happening in two different places. Isn’t the Internet beautiful? I think so too…

Authentication

Remember, if the user is not currently logged into his/her Facebook account, they will be presented with the option to sign in right from your blog post. So let’s sign out of Facebook and go back to your post to see if this works.

Now you’re rocking Facebook Comments on your blog posts.

Questions?

Do you have any questions? Let’s do this, use the comments section to ask any questions but also, please provide feedback. Share with me if you were successful or if you did it in a different way, anything that might also help other folks.

Happy Facebooking!