Strategies in Responsive Design: Responsive Facebook Comments

Facebook gives us an awesome, easy-to-use comments section that we can plug into our site.  It's amazing for traffic since when people post, it shows up on their wall.  One of the drawbacks, though, is that it doesn't work with responsive layouts.  They make you pick a size ahead of time and don't account for fluid sizes.  There's one tiny change to Facebook's javascript load script required to make it work.  Essentially what we're going to do is check the size of the space for the comments then resize it before it loads.

Step 1: If you haven't already loaded jQuery, place it on your page between the head tags:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

 

Step 2: Place the following line where you want your comments to show up:

     
    <div class="fb-comments" data-href="http://www.example.com" data-width="600" data-num-posts="10"></div>
    <div id="fb-root"></div> 

Step 3: Place this at the end of your page in script tags, or in your .js file. This is what calls Facebook and implements the comment section.


   $(function() {
      $(".fb-comments").attr("data-width",$(".fb-comments").parent().width() + "px");
      (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";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
})

 

Note:  If you copy and paste this code, don't forget to change the URL  in step 2 to your page's url and the appID in step 3 to your app's id. (Both italicized)

Examples of usage: 

Go to any one of the wallpapers and look for the comments section in the bottom.  Resize the page, then hit refresh to see how it loads to whatever size the window is.