In the WordPress plugin directory, you can find different plugins that help you to install and set up Facebook comments to WordPress. Installing plugins can make your task easier but be aware that some of the Facebook comments plugins have not been actively maintained or updated. Installing so many plugins also can affect the page load time of your website.
Here is the tutorial for adding Facebook comments to WordPress posts without installing a plugin. In this article I will be elaborating following key topics:
- A step-by-step guide for adding Facebook comments with code.
- Making the Facebook comment box responsive.
- Moderating Facebook comments without a plugin.
Let’s dive right in.
Table of Contents
1. Create a Facebook App for Facebook Comments
The first step is to create a Facebook App before editing your theme’s files. Facebook App lets you create your own applications or services and easily connect Facebook users to your website.
Follow the steps mentioned right below to create a Facebook App.
Step1: First, login to your Facebook account and then visit the site of Facebook developers.
Step2: Click on + sign in Add a New App section.
Step3: Tell Facebook how are you using your app? You can see 3 different options available but we are selecting the last one (“For Everything Else”). The third option helps us to integrate Facebook login, building an instant app or game that will access user data.
Step4: Give a name to your new Facebook App. Add your email address to recover your app if it’s been deleted. If you have a verified business manager account then connect it to your new App but is optional in this step.
Once you fill necessary information, click on the create App ID button.
Once you complete the security verification, this will take you to the App Dashboard where you can manage your new App.
Step5: Now you need to add the URL of the website where you want to add Facebook comments. To add the URL, click on the “Settings” tab and go to the “Basic” option. Enter your site’s URL in the App domains field, choose a category, and save the changes.
2. Add Facebook SDK code to WordPress
After creating a Facebook App, the next step is to add Javascript SDK (Software Development Kit) code in your theme.
Follow the steps mentioned right below to integrate Facebook comments code in your WordPress website.
Step1: Go to https://developers.facebook.com/docs/plugins/comments. Scroll down and find out the Comments Plugin Code Generator section.
Step2: Add the URL of your website, enter an approx number of posts and click on Get Code button.
Step3: A pop-up with your code will be shown on your screen. Now select the App you just created from the dropdown menu, as shown in the image below.
Step4: Include the following Javascript SDK code on your theme once, ideally right after the opening body tag in header.php. Or, you can directly paste the first Javascript SDK code generated in the previous step without making any changes.
Make sure you are using your own App ID.
Check the image below to find out the exact place in header.php where you need to place the above code.
Step 5: Since we want to display Facebook comments in blog posts so we have to add the second code in single.php. Add the second code above the WordPress comments code.
Check the image below to find out the exact place in the signle.php file to add the second code.
You can also increase or decrease the number of Facebook comments to display by editing “data-numposts“.
Make sure you have replaced the default data-href link by a WordPress function i.e, <?php the_permalink();?>. It will automatically get the URL of the current page.
3. Moderate Facebook Comments
You can easily moderate WordPress comments but to moderate Facebook comments without a plugin you need to go through the official Facebook comments moderation tool.
You will find all the latest Facebook comments under moderation under the Review tab and all the moderated comments under the Public tab.
Conclusion:
Don’t skip even a single step if you want to add Facebook comments to your WordPress website. If you have any problem while creating Facebook App or adding SDK code on your website then feel free to mention your problem in the comment section.
