Deprecated: Creation of dynamic property WP_Term::$meta is deprecated in /var/www/wptbox/wp-content/themes/genesis/lib/admin/term-meta.php on line 187

Deprecated: Creation of dynamic property WP_Term::$meta is deprecated in /var/www/wptbox/wp-content/themes/genesis/lib/admin/term-meta.php on line 187

Deprecated: Creation of dynamic property WP_Term::$meta is deprecated in /var/www/wptbox/wp-content/themes/genesis/lib/admin/term-meta.php on line 187

How to Add Facebook Comments on WordPress Without Using A Plugin

By Ryan Bradley on May 21, 2015

Around 75% of the adult population in the United States has a Facebook account, so installing Facebook Comments to your website can be a great way to increase the engagement and “shareability” of your blog posts. If you use WordPress as your website’s main content management system, it’s even easier to setup Facebook Comments onto your website.

The simple 3-step process below is the best way to manually add Facebook Comments to your WordPress website without using a plugin.

Why is it better to manually install Facebook Comments rather than use a plugin?

Here are just a few reasons:

Plugins tend to have unnecessary code in addition to serving their core functions, which may slow down your site. Especially if you have a lot of WordPress plugins installed already. It’s always best to limit the amount of plugins you have, when you can.
It’s more secure. Plugins, especially non-updated plugins, are prone to hacker attacks and malware injection. Which can cause nightmares for your site if not protected properly.
And lastly, it’s not that hard. As you’ll discover below, the whole process only takes a few minutes to complete.

Step 1: Initial Setup of Facebook Comments

The first step is to visit the official Facebook Comments Plugin developer page and setup your comments settings. While you don’t need to generate the code from this page as we provide it all below, it’s good to test it out and get a feel for what it will look like on your website.

Once you’re done testing… go to Appearance > Editor inside your WordPress backend.

Place the code below right after the opening <body> tag (usually located in the header.php file).

Without Facebook APP ID:

<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0'; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>

With Facebook App ID (Required if Using Comment Moderation Tool):

<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=YOURAPPID'; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>

This is an example of what the code could look like when adding it to WordPress:

Facebook Comments code for WordPress header file — Example of header.php code

Step 2: Installing Facebook Comments Code

Place the code below where you would like the Facebook Comments to show up on your website.

Unlike the code given to you from the official Facebook Comments site, the code below utilizes dynamic URL functions within WordPress to make the FB Comments code unique for each page of your website. Most themes use a file named single.php to manage the blog post section.

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="10" data-order-by="social" data-colorscheme="light"></div>

Here’s an example of what the code could look like when you add it to WordPress:

FB Comments code for WordPress single post — Example of single.php code

For dynamic URLs, edit the data-href section to include <?php the_permalink(); ?>
For mobile and/or responsive comments, change data-width to a percentage such as 100% to make it have a fluid/responsive width and/or use the boolean attribute data-mobile to use the mobile-optimized version of FB Comments when detected (auto-detected).
Use data-numposts to control the amount of comments that show up per comments page.
The order of comments can either be displayed by the user’s social status “social” or by the latest date/time it was given (“time“, “reverse_time“) through the data-order-by tag.
Edit the color theme through the data-colorscheme tag. Make it either light or dark.

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

Step 3: Test and Verify

Once you are finished placing the two snippets of code on your site, visit a few of your blog posts to verify that the Facebook Comments are functioning and displaying properly. Each page/post should have its own unique set of comments and be generating them automatically.

The final product should look something like this:

Facebook Comments example on WordPress site — Example of Facebook Comments working properly

That’s it!

I hope this post was helpful for you in installing Facebook Comments on your WordPress website.

Deprecated: Creation of dynamic property WP_Query::$comments_by_type is deprecated in /var/www/wptbox/wp-includes/comment-template.php on line 1525

Comments

Philip says

February 11, 2016 at 10:33 AM

Are you able to put the script in there from an external JavaScript file?

Reply
- Ryan Bradley says
  
  February 12, 2016 at 12:51 PM
  
  Yes, thanks for pointing that out Philip.
  Could look like this:
  
  <div id="fb-root"></div>
  <script src="fb-javascript-file.js" type="text/javascript"></script>
  
  Reply
Kuda says

February 28, 2016 at 2:37 PM

Always place mine in the footer right before . Moved to header. Thanks

Reply
Ferri says

March 12, 2016 at 12:29 PM

Hi, when I view my source, my “http:” was gone and ended up like this:
data-href=”//localhost:3000/wordpress/living-room-set-up/”
As you can see its start with “//” only… any idea why this happened?
Btw I’m still running on a localhost server for development. Thanks!

Reply
- Ryan Bradley says
  
  March 14, 2016 at 3:28 PM
  
  This is most likely due to the localhost server you’re using. It should be fixed/updated automatically when you make the site live on the main website hosting server.
  
  Reply
Ted says

May 2, 2016 at 6:49 AM

Thanks Ryan, this guide is really useful.

Reply
David says

May 10, 2016 at 4:43 PM

Mine first gave me an error in “a red box” that said: “href not supported” and now it does not show up on any post. Any ideas on how to fix this pls?

Reply
- Ryan Bradley says
  
  May 10, 2016 at 5:39 PM
  
  Hi David, are you placing the Facebook Comments code in the text editor section of WordPress or in the actual theme file? If it’s in the text editor section of a post or page it won’t work properly as WordPress doesn’t allow PHP to be inserted there.
  
  Reply
Liam says

May 30, 2016 at 11:55 AM

Work great, thanks Ryan!

Reply
Ginnie says

September 2, 2016 at 12:41 PM

Thank you for this great step-by-step guide!

Reply
Gulshan says

September 29, 2016 at 10:11 AM

I have used the same structure as said above…
1) Placed the snippet in the header.php file just below body tag.
2) and after that in single.php file placed that div as well (fb-comments) whole section as above..
But it’s not working.

Reply
- Ryan Bradley says
  
  October 10, 2016 at 10:57 AM
  
  Hi Gulshan, when you say it’s not working do you mean it’s showing an error or it’s just not appearing? Having not seen the site my best guess is that you may be placing the comments code in the wrong spot (your #2). Most themes have the comments section in the single.php file but I have seen other themes with the comments located somewhere else. So I would just double check to make sure that your comments code is in the correct place, and file.
  
  Reply
Arif says

October 10, 2016 at 3:33 AM

Great post! Thank you very much 🙂

Reply
Cemoro says

October 15, 2016 at 2:49 PM

Thanks mate, it works perfectly.

Reply
Lusmo Digital says

November 23, 2016 at 2:54 AM

Thanks mate, now I know how to install Facebook comments on WordPress sites. I was confused with all of this. But you make me understand with a step by step guide.
Great articles! Keep doing it.

Reply
Cem says

November 23, 2016 at 5:58 AM

How can I change the language? I have changed this line:
“js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8″; fjs.parentNode.insertBefore(js, fjs);”
From en_US to tr_TR but it didn’t work. Thank you.

Reply
- Ryan Bradley says
  
  November 23, 2016 at 11:38 AM
  
  Hi Cem, according to Facebook’s language guidelines for Comments, it looks like you did it perfectly. Maybe the error has to do with the other half of the code? If not, I would check out their guidelines again to make sure there’s nothing else that needs to be implemented or changed for your country and/or language. Hope that helps.
  
  Reply
Ken Billington says

December 26, 2016 at 1:22 AM

Great article on how to set up Facebook Comments without a plugin. My only concern is that Facebook Comments are not being imported to the WordPress database.

Do you know of a way to get Facebook Comments imported into the WordPress database?

This would be a great achievement of it could be done!

Reply
- Ryan Bradley says
  
  December 28, 2016 at 1:02 PM
  
  Hi Ken, I don’t know if that would be possible as we’re using FB’s code which is outside of WordPress. With that being said, if you’re able to figure it out please let me know!
  
  Reply
Pam says

March 3, 2017 at 3:37 AM

Hi Ryan, if I insert this code, will it replace the existing WP comments box?

Reply
- Ryan Bradley says
  
  March 7, 2017 at 8:03 PM
  
  Hi Pam – No, you would have to turn off comments in the Settings > Discussion section if you don’t want the original WP comments box to show.
  
  Reply
Duc Nguyen says

March 28, 2017 at 6:40 AM

Great post, thanks. 😀

Reply
VP says

March 28, 2017 at 11:36 AM

So this is how simple it is to add Facebook comments to your WordPress blog.

Reply
Rahul Akurati says

April 1, 2017 at 1:22 PM

This post is so helpful and made the task easy. Thank you

Reply
Tom says

April 4, 2017 at 9:11 AM

Thanks VERY much for this article, and for continuing to support it. I’ve struggled a long time trying to overcome the problem of each Facebook comment appearing in the comments list of EVERY post on my site.

QUESTION:
This is my first WordPress site, and I’m building it in a localhost environment (MAMP virtual server on Win7). After posting a comment, the FB comment box does not reset and is not ready to accept the next comment. I find it necessary to REFRESH the page in my browser.

Have you encountered that?
Do you know it to be a factor related to the localhost environment?
Are you aware of any other complications related to the localhost environment?

Thanks

Reply
- Ryan Bradley says
  
  April 11, 2017 at 7:30 PM
  
  Hi Tom – I’ve had others comment about encountering errors when dealing with a localhost (MAMP) environment as well. It appears the website has to be live in order to properly call the dynamic URL function of WordPress (the_permalink). Hope that helps, good luck!
  
  Reply
Tay says

June 7, 2017 at 1:54 AM

Thank you for your guide, I’m really happy I could implement Facebook comments without a plug-in. However, in my case the second statement did not work, as my single.php that came with the theme was already populated with PHP and variety of hooks.

So instead of using <?php the_permalink(); ?> I had to use ‘. get_permalink() .’
(Careful, there are double and single quote operators in the second statement!)
I hope this help those who have issues.

PS: This method also worked on my localhost install, but that might be due to my setup.

Reply
- Ryan Bradley says
  
  June 18, 2017 at 5:04 PM
  
  Hi Tay – Thanks for sharing your situation and your fix as well. I hope this helps anyone else who may experience this issue.
  
  Reply
Hamza says

September 1, 2017 at 1:22 PM

Nice information, easily added the Facebook comment box to my website. Thanks 🙂

Reply
Ian says

November 6, 2017 at 12:27 PM

Hi Ryan – this is an interesting post but I’m confused. Where does the App ID go?

Reply
- Ryan Bradley says
  
  December 6, 2017 at 4:37 PM
  
  A Facebook App ID is not required but I just added a snippet to this post to include one for those that want to utilize an App ID for their comments. Thanks for pointing this out.
  
  Reply
Giacomo says

February 19, 2018 at 3:28 AM

Hey there, I was wondering: is there a way (that you know of) that would make the dynamic URL function available on a RapidWeaver website?

Reply
- Ryan Bradley says
  
  February 26, 2018 at 4:29 PM
  
  Hi Giacomo – I’m not too familiar with RapidWeaver but I would just try to find the "<?php the_permalink(); ?>" equivalent, as seen in Example 2.
  
  If none exists, you may just have to try a traditional PHP fix such as $_SERVER[‘REQUEST_URI’] or something similar depending on your setup.
  
  Reply
Bryan says

March 7, 2018 at 1:28 PM

Thanks! This was driving me crazy going through the terrible plugins out there to do something that ended up being so simple.

Reply
Kiran says

August 1, 2018 at 11:28 PM

After reading this article, I was enable to add Facebook comments to my WordPress site very easily without using any plugins. Thank you for sharing this.

Reply
Ali says

January 8, 2019 at 1:31 AM

This was so helpful to get Facebook comments without having to use a plugin. Thanks!

Reply
Meenakshi says

March 14, 2019 at 2:47 AM

Code works awesome, but I am getting a link on the bottom that says “Facebook Comments Plugin”. How to remove this link?

Reply
- Ryan Bradley says
  
  June 17, 2019 at 12:40 PM
  
  I don’t think you can.
  
  Reply

Step 1: Initial Setup of Facebook Comments

Step 2: Installing Facebook Comments Code

Step 3: Test and Verify

Reader Interactions

Comments

Leave a Reply Cancel reply

Pin It on Pinterest