How To Add Facebook Comments To Your Blog

How to add Facebook Comments to your BlogAs 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:

Facebook Developers Website

  • 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.

Create a Facebook 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.

Your App ID

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://”.

Facebook App Configuration

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”.

Your blog's integration to Facebook

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”.

Facebook Comments Tool

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

Facebook Comments Code

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.

Wordpress 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.

Insert Facebook code into your theme

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.

Add Facebook Comments code into your blog posts

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:

Facebook Comments in your blog posts

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.

Testing your Facebook Comments

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

Facebook Comments on your Wall

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.

Reply from the Facebook Timeline

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

Facebook reply on your blog post

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.

Facebook authentication from your blog post

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!

Related Posts Plugin for WordPress, Blogger...

10 Mistakes People Make on Facebook Pages and How to Fix Them

Join 10,000+ subscribers and get FREE access to my online course...

  • CREDIT TRUST FINANCIAL LOAN SE

    CREDIT TRUST FINANCIAL LOAN SERVICE

    Email: credittrustloanservice@gmail.com

    ======================

    We give out our Loan in USD($) and GBP(£) and any currency of your choice.

    Are you financially Squeezed?

    Do you seek funds to pay off credits and debts

    Do you seek finance to set up your own business?

    Are you in need of private or business loans for various purposes?

    Do you seek loans to carry out large projects

    Do you seek funding for other various processes?!

    =====================

    Loan up to $1,000,000.00

    Attractive Interest Rate & Processing charges

    Easy documentation

    Speedy loan processing

    No security/collateral required.

    Flexible repayment options

    Part Payment Option upto 25% of principle outstanding in a year

    Personalized and professional service.

    =====================

    APPLICATION FORM

    * NAME——————–

    * COUNTRY—————–

    * OCCUPATION————–

    * MARITAL STATUS———-

    * PHONE NUMBER————

    * MONTHLY INCOME———-

    * ADDRESS—————–

    * PURPOSE OF LOAN———

    * AMOUNT——————

    * DURATION—————-

    All interested persons are to fill the application form

    and send it back to us Via email: credittrustloanservice@gmail.com

    and we promise to make your dreams come true.

    THANKS AND REGARDS

    WILLIAMS BROWN

    EMAIL: credittrustloanservice@gmail.com

    CREDIT TRUST FINANCIAL LOAN SERVICE

  • manideep

    comment is not visible on facebook always…what could be the reason..maybe i am using localhost:…. as a href…and also i can not like or comment on a notification on fb ,..

  • abderblog

    Nice post that helped a lot…

  • Larry

    Awesome post! THANKS
    Now http://www.LifewithLarry.me is easier to comment on. :D

  • Ioanna Kostopoulou

    Hello! Please help!!! I am have a problem with the “trick” when i try to save it to “blogger”. I try to put this code where my blog link appears but when i click on save i have this message The value of attribute “data-href” associated with an element type “div” must not contain the ‘<' character.

  • http://www.paulgibbons.net/ Paul Gibbons

    Wow – outstanding post. I use Disqus and get zero blog comments, but my FB posts get dozens…. I suspect for low traffic blogs, this is the only way to get an interaction on posts?

    Question for you sir? You seem to allow Disqus AND Facebook posts? Is that doable – that might be ideal for me.

    LAST question – if I wanted someone to do this for me, who would you recommend?

  • تراخيص – مطبوعات – شركات

    Thank you my friend advised me of this article I hope very much to visit my site and hosted contained to thank you very much

    تراخيص

     مطبوعات

     شركات

  • شركة لرش المبيدات بالرياض
  • new
  • 260Wolskel

    This is a great tutorial. However, it is meant for WordPress. How about Blogspot? What do I do differently? Please advise…

  • http://mhskp786.blogspot.com/ Muhammad Hussain

    Hello Dear Admin Thank You Very Much For Sharing A Nice Post About The Topic Use Facebook Yahoo And Google+ Comment system together

  • http://mhskp786.blogspot.com/ Muhammad Hussain
  • Lemon Trend

    hi! amazing, thanks for the info!, i just wanted to know something, it is possible to make the box transparent? without the grey background?

  • Lemon Trend

    hi! amazing i just wanted to know if i can make transport the background of the box, instead of grey, white…?

  • Slsv

    Great tutorial but I have one question. As I am still learn to code, how can I take the data-href for website wich is not wordpres? How to take current URL?

  • Hana

    Facebook changed their user interface for developer apps, so [the "choosing how your app interacts with Facebook" step] can be tricky to find. For future people visiting:

    Click Apps and then select your app.
    Click the Settings button on the left side of the screen.
    In the Basic settings, click the Add Platform button below the settings configuration.
    Select Website in the platform dialog.
    Enter your URL (localhost works here).
    In the App Domains text input, add your domain that matches the one in the URL.
    Save your settings.
    (Original post is from : http://stackoverflow.com/questions/13552791/facebook-app-creation-app-domain-error)

  • http://spiffynewshoes.neocities.org/ Hana AlBarazi

    oops, this actually helps for the “adding your app domain” step, when you configure your app.

  • http://www.cygnismedia.com/ Cygnis Media

    As a developer at: http://www.cygnismedia.com/ I would like to know these comments are crawlable or indexed by #Google ? As client always looking forward a solution for index comments!

  • Dumitru Ursu

    I’m using blogspot, I have a problem with it , when someone comments a post ,the same comment appears to all posts, how can I solve that? thanks in advance.

  • Micheal Clark

    I really love your write-ups guys continue the good work.yahoo answer service