Add Facebook Comments to Your Mobile Responsive WordPress Site

Simple, two-step instructions for adding the Facebook Social Comments plugin to your WordPress site with mobile responsive, 100% width!

I like to avoid plugins because I think I can always add the code faster, and in a more-efficient way, by myself. The problem here wasn’t all the fussing with Facebook’s code, it actually was the CSS to override their fixed pixel widths.

I won’t ramble on about this. Let’s just get to activating Facebook Comments and making it 100% wide so we maximize space and satisfy our mobile needs as well. You’ll need a Facebook App ID if you want to make use of comment moderation features. Create an App ID →

Step 1: The Functions

Open functions.php, or if you’re using my Flint theme, open your skin’s functions.php file, and insert the following code at the bottom of the file.

// FACEBOOK COMMENTS -------------------------------- //

add_action('genesis_before','insert_xfbml');
function insert_xfbml() { ?>
	<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID_HERE";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<?php
}

add_action('wp_head','facebook_stuff');
function facebook_stuff() { ?>
	<meta property="fb:app_id" content="YOUR_APP_ID_HERE"/>
	<?php
}

add_action('genesis_after_post', 'insert_facebook_comments');
function insert_facebook_comments() {
	global $post; ?>
	<h3 class="fbcom"><fb:comments-count href="<?php the_permalink(); ?>"></fb:comments-count> Comments</h3>
	<div class="fb-comments" data-href="<?php the_permalink(); ?>" mobile="false" order_by="time" data-width="470" data-num-posts="10"></div>
	<?php
}

Notice that within that code there are two instances of YOUR_APP_ID_HERE. You need to replace both of those with the app ID you created at Facebook.

Also note the phrases order_by="time" and data-num-posts="10". You can change time to social if you want comments to reorder by most recent or reverse_time to place the latest comments at the top. Set data-num-posts to the number of posts you show by default.

Step 2: The CSS

Now we have to insert to CSS into our style.css file, or for Flint users, style.css in your skin folder. Open that file and insert the following in a logical area.

.fb-comments,
.fb-comments span, 
.fb-comments iframe[style],
.fb-comments iframe span[style] {
	width: 100% !important;
}

That CSS overrides Facebook’s default pixel widths, making your comments box the full-width of the content area in which it sits.

That’s it!