Facebook comments are the cleanest and most exciting way to manage comments on your blog today.
Read on if you’d like to know how to add Facebook comments to your self-hosted WordPress blog. I’ll also show you a cool extra trick that will keep page load time high and make the comments section of your blog even more engaging.
Why use Facebook Comments?
- No need for a paid plugin to filter WordPress comment spam (like Akismet).
- Readers that are logged into Facebook can comment immediately without the need to login or enter an email.
- Moderate comments on your blog easily using your Facebook account.
- Facebook algorithm ranks the best comments to show at the top.
- Most of your blog readers are already on Facebook anyway.
How to Add Facebook Comments without a Plugin
This will involve editing files in your WordPress theme folder. If you’re considering this I’d highly recommend creating your own child theme to play with.
When you have a child theme created head into the folder wp-content/themes/your-child-theme-name and edit single.php. Search for the part in the file that loads comments on your blog. In the default Twenty Seventeen theme it’s this line you’ll need to replace:
comments_template();
Replace the code that loads comments with this new code:
<?php echo '<div class="fb-comments" data-href="' . get_permalink() . '" data-numposts="5" data-width="100%"></div>' ?>
<div id="fb-root"></div>
<script>
function showComments() { // Custom function called on click
(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.8&appId=[YOUR-FACEBOOK-APP-ID]";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
</script>
Replace [YOUR-FACEBOOK-APP-ID] the the app ID of the Facebook app you’ll create in the next step.
Creating a Facebook App for your Comments
The next step is to head over to Facebook Developers and create a simple app to manage the comments on your site. Use all the default settings and the copy the app ID into the code on your WordPress site replacing [YOUR-FACEBOOK-APP-ID].
You should now have Facebook comments working on your WordPress blog without the need for a plugin!
How to Hide Comments Using a Click to View Button
This will not only speed up page load time on your website but it will also encourage your readers to engage with comments more. They’ll need to click a button to see comments and that means they’re half way to writing their own comment once they’ve clicked the show comments button.
A button can be added using some simple Javascript in your WordPress theme template. You can make it so that the button automatically disappears once clicked.
Here’s the code you’ll need to insert in single.php in the comments section. It’s similar to the code above with some clever script to do the button magic:
<button id="submit" class="submit" onClick="showComments();">show comments</button>
<?php echo '<div class="fb-comments" data-href="' . get_permalink() . '" data-numposts="5" data-width="100%"></div>' ?>
<div id="fb-root"></div>
<script>
function showComments() { // Custom function called on click
(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.8&appId=[YOUR-FACEBOOK-APP-ID]";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
document.getElementById("submit").style.display = "none"
}
</script>
Facebook Comments Plugin
If you’d like to keep things simple and use a plugin for Facebook comments there is an official Facebook comments plugin available. The downside is that it hasn’t seen an update in many years.
How Do You Manage Comments on WordPress?
Are you using a Facebook, WordPress comments or another commenting platform? What works best for you? Leave a comment and let me know.