Contents
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:
- Creating a Facebook application
- Adding XML namespace and Open Graph tags
- Adding the SDK script
- 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.
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:
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 property="fb:admins" content="YOUR FACEBOOK USER ID"/>';
echo '<meta property="fb:app_id" content="YOUR APP ID" />';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="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 property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
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.
<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:
<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.