Facebook commenting system can be easily integrated to our WordPress website. You do not have to install any additional plugins for this. All you have to do is get some code from Facebook. Then copy and paste that code in your WordPress template file.
The native commenting system present in WordPress isn’t that bad but some people prefer to integrate Facebook commenting system. When you add Facebook commenting system to your website, people will be able to use their Facebook account to comment. Instead of entering their name and email to comment, they can just use Facebook.
Step 1: Getting the Comments Code from Facebook
You will need a Facebook application in order to be able to get the codes required to run Facebook commenting system for your website. Do not worry, as this process is fairly quick, easy and free. Skip this step if you already have created a Facebook application that you can use.
- Go to http://developers.facebook.com/apps/
- Click on the “Create New App” button present on the top right.
- Give your app a Display Name, a unique namespace, a category and then click on “Create App” button.
- Visit https://developers.facebook.com/docs/plugins/comments and input certain values such as width, number of posts and color scheme. Don’t worry about URL to comment as we will configure it later.
- After basic configuration, click on “Get Code” button.
- Make sure that your app is selected on the next screen and you will get the following lines of code:
<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/sdk.js#xfbml=1&appId=1418685111739188&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Note that your appId will be different.
Edit the data-href section to be data-href=”<?php the_permalink(); ?>”.
Your updated code will be:
<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/sdk.js#xfbml=1&appId=1418685111739188&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light"></div>
Step 2: Adding Commenting Code to WordPress
Now all you have to do is paste this code in your commenting section of your WordPress blog. For that open single.php file located in /wp-content/themes/<yourthemename>/ folder. Every template is designed differently so you will have to locate the default WordPress comment code and replace with the code that you generated above.
The comment code will be something like:
<?php comments_template(); ?>
or
<?php comments_template( '', true ); ?>
Basically, search for the line that has the function comments_template(). Replace it with the code that you generated from Facebook and then you are good to go. You will have successfully added Facebook commenting system to your WordPress blog.
Other Things That You Can Do
Displaying Comment Count
In WordPress templates, you can also display the comment count for your posts. For that use the following code:
<fb:comments-count href=<?php the_permalink() ?> /></fb:comments-count>
For single posts (wp-content/themes/<yourthemename>/single.php) you will paste the above code instead of:
<?php comments_number();?>
Setting Admin Account(s)
You can also set an admin account which can moderate the comments made in your website via Facebook. For that add the following code before the </head> part of your WordPress blog. You can find </head> in /wp-content/themes/point/header.php file.
<meta property="fb:admins" content="<YOUR_FACEBOOK_USER_ID>"/>
or
<meta property="fb:app_id" content="<YOUR_APPLICATION_ID>"/>
Use your application id when you have to specify more than one comment moderators. If you use your application id, all the administrators of your Facebook app can moderate comments.
You Might Be Interested In: