Select Page

Instaling Facebook Comments to replace your standard wordpress comment system can drive more engagement and shareability to your blog articles.

I will explain below, how to add Facebook Comments to WordPress without a plugin, in 3 easy steps.

Here are some reasons why you might want to do that:

  1. Less additional code – With more and more plugins on your wordpress instalation you are adding more unnecessary code that may slow down your website. Less plugins you have the better, especially if you already have lots of plugins installed.
  2. It is more secure – Every time you add a plugin, you might open up to malware injections and hackers will exploit every security hole, espepcialy if the plugin is not up-to-date, and this can cause alot of problems for you. If you don’t trust the author, do not install that plugin. Research first if the plugin is trusted by others, of it has a good support community etc. NOT ALL PLUGINS ARE CERATED EQUAL.
  3. Fast and easy installation – The thing is that manualy setting up facebook comments is easier then you think and all it takes is a couple on minutes. See the proccess below.

 

STEP 1: The Setup of Facebook Comments

Go ahead to the official Facebook Comment developer page and setup your own settings. Type the path to your blog page ex: https://mywebsite.com/blog, insert the desired width (% – for responsive full width, px – for specific width), number of desired post, and hit “Get Code” to generate the code.

Your code will look like this

1
2
3
4
5
6
7
8
<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&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Inside your WordPress Dashbord go to Appearance> Editor and look for the file header.php and right below the < body > tag, insert the generated facebook code.

For Divi and Extra Theme users: Go to Divi>Theme Options> look for the Integrations tab, Enable Body Code if you didn’t do that already and insert the code on the right of “Add code to the < body >”.

You can also achive this with FTP if you know your way around.

Note! – You should use a child theme.

STEP 2: Installing the Facebook Comment Code

Place the code below (or the oneyou got generated from facebook) where you want the comments to appear (usualy at the end of your posts). This code utilizes dynamic functions to make Facebook Comments unique for each page. You should look for single.php file to edit inside your theme/child theme folder.

1
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="5" data-mobile="Auto-detect" data-colorscheme="light" data-order-by="time"></div>

Here is an example where i’ve put the code for this blog

How to addFacebook Comments to WordPress without a plugin

To see the full list of display options and tags, visit the Facebook Comments settings.

STEP 3: Testing your setup

So you’ve got to this part of the tutorial. You’ve placed the two code in the right places, and now is time to check if your implementation works. Now you can visit a few of your blog posts to verify if everything is functioning and shows properly.

That is it!

Feel free to leave a comment and share with your friends.