Adding Facebook Comment to Genesis Without a Plugin

I’ve been working on a radio website built on WordPress over the last few weeks and I decided not to use WP default comment box. As a matter of fact, I disabled it and used Facebook comment box instead. I always believed that you don’t really need a plugin for things that can be manually done on WordPress and went ahead to consult the post I initially wrote on how to how Facebook comment form to Blogger.

I had to make some changes to the code in order to work on WordPress. This code can be used in other WP themes too but since I use Genesis Theme Framework, you need to know what to do to make it work on a different theme.

Basically, the steps are about 4:

  1. Creating a Facebook application
  2. Adding XML namespace and Open Graph tags
  3. Adding the SDK script
  4. Adding the comment box code

1. Creating a Facebook application

a. Head on to facebook developer page, you should create a new app by clicking the button at the top right.

b. Enter your application name and namespace,input the captcha code and proceed.

c. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.

For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:

d. Scroll down a bit and hit the Save Changes button. Now you’re done with creating your facebook application but there’s one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.

Well, that’s that.

2. Adding XMNL and Open Graph tags

The open graph meta tags won’t just work for Facebook comments alone, they also make your site appear properly when shared on Facebook. This code adds the required XML namespace and Open Graph Meta Tags. Instead of putting it all together, this code on WPBeginner does it perfectly.

a. Go to Appearance > Editor > functions.php

b. Go to the end of the code and paste this:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '<meta >YOUR FACEBOOK USER ID"/>';
echo '<meta >YOUR APP ID" />';
echo '<meta >YOUR SITE NAME"/>';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://your-site.com/image.jpg"; //replace this with a default image on your server or an image in your media library
echo '<meta >

c. Be sure to change these:

YOUR FACEBOOK USER ID – Replace this with your Facebook user ID. More details here.

YOUR APP ID – Replace this with your app ID

YOUR SITE NAME – Put your site name here

http://your-site.com/image.jpg – Replace with a default image, perhaps your logo

3. Adding Facebook SDK script

a. You have to do this through Genesis hooks and to make things a lot easier, install Genesis Simple Hooks.

b. Go to Simple Hooks, locate genesis_before Hook and paste the code above right there.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

c. Save your change.

4. Adding the comment box code

– Here is the last part of the whole thing. Go to Simple Hooks and locate genesis_after_post_content Hook.

– Copy this code and paste it in the box:

<?php if ( is_single() || is_page()) {?>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<div><fb:comments href='<?php the_permalink(); ?>' num_posts='10' width='450'></fb:comments></div>
</div>
</p>
<?php }?>

Save the change.

If done right, the comment box should appear below post content and static pages but you can change this by manipulating the conditional statement if you want the comment box to appear on posts only.

This post was last modified on December 19, 2016 9:02 PM

Don Caprio: @doncaprio Husband, superdad, ubergeek, lazy writer, serious gamer, gadget collector, amateur photographer, web designer. I'm on Facebook, Google+, Twitter, LinkedIn and Instagram.

View Comments (13)

  • please bro it not working on mobilepress theme n carrington please is the any help about it?

    plz m waiting

  • Hi Don Caprio, thanks for this tutorial article about creating a Facebook apps for adding Facebook comments to genesis without a plugin, this post is very helpful for me. thanks for share this.

  • Don,

    This is something I'm sure I'll be needing soon. Though my two blogs are better off without the Facebook plugin (spam avoidance), I'll be needing this for a project I'm handling at the moment.

    Thanks for these awesome tips of yours.

    - Terungwa

  • Thanks Doncaprio for the great post, I want to ask, can this facebook comment form work along side with wordpress default comment box?
    What I mean is that, can both of them be left on a post so that anyone that want to comment using the default comment can use that and anyone that prefer the facebook comment can also go for the facebook commenting system on the blog.
    Welcome boss.