Add Facebook comment to wordpress comment template

I was so interested with some blogs that I have visited, because they did add facebook comment to wordpress blogs, and the visitors or readers of those blogs can actually comment via facebook with just easy way, logging in and then comment, or another way, syncing Facebook comments, that will display all comments from Facebook account in your wp comment template.

Because of that interest, I was curious and tried this video tutorial how to add Facebook comment to wordpress, and it did work.

Strange enough, I actually made one video of Add facebook comment to wordpress last year, but I did not have time to make a post because this kind of video tutorial requires longer time to write in a post or article :), and now everything is different again with the new FB layout interface 2011.

I wonder, why I did post a lot of video tutorials in my first year of blogging journey, I guess because I did love what I am doing.

This interesting feature of facebook that will allow you to add Facebook comment to wordpress is actually nice to implement, but I decide not to use it or apply it in this blog, and I will tell you why later on..

Add facebook comment to wordpress – Preparation

Before we jump into the how to add facebook comment to wordpress video tutorial, you might want to prepare anything you will need, which are not complicated either.

You will need, Facebook account obviously, and ability to access developer page. I mention this, because I personally experience, unpleasant experience with FB developer page, while I could not create any FB applications.

You might want to check out my problem while accessing the developer page in this Facebook your account must be verified error post.

Another post which is related to this post, how to get Facebook API key article.

Additionally, in this tutorial and demo how to add facebook comment to wordpress, we will add the FB comment box only in the single post page. This means, we will need to edit a wordpress theme file, called single.php file.

So when you click in the home page, this FB comment box will not appear, because that’s not a single.php file, but index.php.

It also depends on the current theme you are using for your blog, in the demo, I am using Twenty Ten default theme (related: add logo to twenty ten), and this file has loop-single.php file. If you have some other themes (free themes or premium), for example like the theme I am using in this blog, Thesis theme (reasons why I use Thesis), this tutorial is not going to work unless we edit in another file.

Add facebook comment to wordpress Video tutorial

This is the screenshot result of this video tutorial. In the picture, the demo post only has one comment, it will change accordingly depends on the total numbers of your comment numbers in the option of configuration.

Add facebook comment to wordpress Video

• Is my site loading fast? I use this shared hosting
• Try my theme >

Add facebook comment to wordpress Steps

These are the steps that I do in the Add facebook comment to wordpress video tutorial above. To me personally, watching video is much faster, however, it needs a while to follow.

The Add facebook comment to wordpress steps:

1. Go to this Facebook comment developer page

2. You will see many stuff you can actually use, but today, we are going to choose “Comments” Click on the pic or link as shown as the below screenshot.

3. You will be brought to this page (see screenshot) where you can add following:

– URL to comment on : Type the URL of your blog domain.

– Number of posts: By default, it gives you 2, you can modify it as you like.

– Width : it is referring to the width of your Facebook comment box, you can use any reasonal numbers. By default it is 500 px, in this demo, I left it as it is.

– Color Scheme : light or dark, you can choose the color by expanding the pull down menu.

4. Once you’re done with the step 3 above, click “Get code” button.

5. More and less, you will get these following code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://yourblog.com/" num_posts="2" width="500"></fb:comments>

6. After getting the code in step 5 above, we will go back to the dashboard. Now as stated earlier, it depends on your theme, if your theme has single.php file, then follow this tutorial, if not, ask the theme developer.

Twenty Ten has it on loop-single.php.

7. To reach loop-single.php, you can find it in Appearance → Editor → loop-single.php

8. Paste the step 5’s code before this code line:

<?php comments_template( '', true ); ?>

See image where I pasted the code.

9. Update the file.

Now, you can test by commenting your own post by logging into FB account, and your comment will be displayed as shown in the demo of Add facebook comment to wordpress picture result above.

The reasons why I don’t want to add Facebook comment to wordpress blog, this blog, because it slows down my site loading speed, my server has to connect to Facebook server to display this FB comment box.