Want to add Facebook Comments to WordPress but don’t want to use a plugin? Just add these two code snippets and it’s a done deal.
This mod also works with Simple:Press the WordPress forum plugin.
Plugins are a quick easy way to add Facebook comments to WordPress but some add extra bloat to your site. That added bloat eats up system resources slowing your blog down.
It’s easy to save those resources by adding Facebook Comments manually by adding two small snippets of code to your theme.
Before you start head over to Facebook Developers site and create your app. Be sure when adding your sites url it is proper. http / https and using www if that’s how your WordPress site is set up.
All that’s necessary is adding the below code snippets in two of your theme files.
We suggest downloading your original theme files for safe keeping just in case a placement error takes your site offline. Yes it does happen – been there done that!
Copy this snippet into your header.php file immediately after the <body> opening statement. Be sure to add your Facebook App ID!
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourFacebookAppIDHere',
xfbml : true,
version : 'v2.8'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Add this snippet in your single.php theme file. Preferably just before WordPress comments are called, to use both functionalities. This can also be added to page.php to add functionality to your blogs static pages.
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="10" data-order-by="social" data-colorscheme="light"></div>
This snippet is optionally for adding Facebook Comments to Simple:Press Forum. If you share Simple:Press forum posts to Facebook i suggest utilizing this modification to encourage engagement with your Facebook visitors.
if ($spThisPost->post_index == 1) { echo ('<div class="fb-comments" data-href="'.$spThisTopic->topic_permalink.'" data-width="100%" data-numposts="10" data-order-by="social" data-colorscheme="light"></div>'); }
The ability to moderate your Facebook comments is also easy. It’s required to add your FB App ID to the sites header in a meta tag. If your running Yoast SEO click the social > Facebook tab. You’ll see a place to paste your app id. That’s the easy way.
Have questions? Comment below 😉
FidoSysop
I'm a former Auto Dealer and Mechanic born in the 50s. In 1991 Doc's Place Bulletin Board System was born on the Fidonet Network. Since the net went public I've been studying and mastering it becoming a tech-savvy hobbyist webmaster. I.blog my opinion about many worthy subjects and maintain a large conservative archive!
