How To Add Facebook Comments To Your WordPress Blog

Have you ever wanted to add Facebook comments to your WordPress blog, but didn’t know how to?

Now, you can! I am going to show you exactly how to add Facebook comments into your WordPress blog.

1. Creating An App

If you want to have Facebook comments, then you have to have an application id. To create a Facebook app id, you will need to go to Facebook’s Developers area.

You should see a “Create New App” button. Then, you will be asked to create an App Name, just use the name of your blog and you have a new app id.

Your new app information should look like this, refer to the pic below:



As you can see in the above image, I highlighted the area where your numerical app id will be. I had to black out my information, for security reasons. There is addition fields that Facebook asks you about your application. You can leave them blank or fill them out.

Make sure you write down your new Facebook app id, you will need it later on.

2. Connect Domain To App

Now you have to connect your blog to your new app, if you don’t, Facebook will send an error, saying it can be reached. Basically, that means that you haven’t connected your blog / web site to the app id it is assigned to.

To connect your domain to your app, you need to edit your app, and off to the left, you will see “Web“. After you click on Web, you should be brought to where you can enter your site url and site domain. When you enter your url, you have to end it with a forward slash, or you will get an error.

When you enter your site domain, you don’t have add “http://www.” or the ending forward slash.

So, they will look like this:

Site Url: http://www.YourDomain.com/
Site Domain: YourDomain.com

If you are not sure, use the image below as a reference:



3. Admin ID

To have Facebook comments, you will need an admin id. You need this to moderate all your comments. The good news is, if you have a valid Facebook account, then you already have an admin id.

Your admin id is actually your numerical Facebook user id, on your personal Facebook account. Your user id are the numbers in your Facebook url, see example below:

http://www.facebook.com/profile.php?id=100000000000000

Moreover, if you are using a customized username, like me, then it can be a little tricky. No worries, it’s easy.

Go on your Facebook profile, underneath your default picture you will see, “Upload a Photo“. Hover over the link, right click and select “copy link location“.

If you did it correctly, it should look like this:

http://www.facebook.com/ajax/profile/picture/upload.php?id=100000000000000&hide_feedform=1

The numbers that are highlighted is your Facebook user id.

So remember, when it is time to get your admin id, that it is your Facebook user id.

We are basically done with this process, now, we have to make some adjustments to your WordPress theme. All files will be in your current WordPress theme.

4. WordPress Theme – header.php – Part 1

Go to your current WordPress theme and find the file header.php. Once you have located it, make sure you open it with a text editor, so it does get corrupt. With that said, make sure you make a copy, in case you make a mistake or it gets messed up. You should always make a copy when doing this sort of work.

Now that you have it open, you will need to enter the following meta tags, listed below. The meta tags have to be before the closing head tag, which looks like this: “</head>“.

Here are the meta tags you have to enter:

<meta property=”fb:admins” content=”ADMIN_ID“/>
<meta property=”fb:app_id” content=”APP_ID“>
<meta property=”og:title” content=”<?php wp_title(”,true,’right’); ?>”/>
<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>”/>
<meta property=”og:url” content=”<?php the_permalink();?>” />

I have highlighted the app id and the admin id needs to go. Just enter your id numbers in the appropriate places. If you want to add more than one admin to moderate your comments, you just need to add a comma, and add their Facebook user id.

If using more than one admin, your admin meta tag will look like this:

<meta property=”fb:admins” content=”ADMIN_ID, ADMIN_ID2, ADMIN_ID3“/>

After you have made those changes, I would close what you have done, and save it.

5. WordPress Theme – header.php – Part 2

Reopen, your header.php with your text editor, and place Facebook’s javascript code below, right after the open body tag, which looks like this, “<body>“.

Here is the javascript:

<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘APP_ID‘, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

Make sure you replace the highlighted APP_ID, with your numerical Facebook app id. Do not alter or change Facebook’s javascript, or it won’t work.

After you have done that, you can save and close it. We are done with that file, and can move on to the next one.

6. WordPress Theme – index.php & archive.php

Find the file index.php, open it with your text editor and remove the following code:

<?php comments_popup_link(__(‘No Comments »’, ‘kubrick’), __(’1 Comment »’, ‘kubrick’), __(‘% Comments »’, ‘kubrick’), ”, __(‘Comments Closed’, ‘kubrick’) ); ?>

You will be able to locate it about a third of the way down. After you have removed it, you need to add the code below in place of it. It has to be in the exact location, or it’s not going to display in the right location.

Here is the code you need to use:

<fb:comments-count href=”<?php the_permalink();?>”>
</fb:comments-count>
<a href=”<?php the_permalink();?>#comments”>Comments</a>

Now you can close and save it. You will have to repeat the process, for the file name archive.php.

7. WordPress Theme – single.php

Find the file single.php, open it with your text editor and remove the following code:

<?php comments_template(); ?>

You will be able to locate it towards the end of the file. It’s near the bottom. After you have removed it, you need to add the code below in place of it. It has to be in the exact location, or it’s not going to display in the right location.

Here is the code you need to use:

<div id=”comments”>
<div id=”fb-root”>
</div>
<script src=”http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1″>
</script>
<fb:comments href=”<?php the_permalink();?>” num_posts=”10” width=”550” style=”background-color: white;”>
</fb:comments>
</div>

I have highlighted 3 areas.

1. Make sure you remove APP_ID, and put in your numerical app id.
2. The number of posts. You can adjust this number to the amount of comment post to show up. If the number is 10, then anything 11 on, will be visible in an expansion module style.
3. The width of the comment box. You can adjust this number higher or lower depending on what size you want Facebook’s comment box.

That’s it!

You are done!


Powered by WordPress and created by Rich Hamilton, Jr.