Responsive Facebook Comments and Like Box

Now-a-days Responsive Web Design is in fashion. Right from microsoft.com to nokia.com everyone is adapting responsive web design. When designing a responsive site for PriceBaba.com I was able to code almost every element on site responsive but I faced an issue with facebook comments and facebook like box.

I later coded a work around, a hack to make it responsive. You may not find it responsive when resizing the browser but you can see effects when page is loaded.

Follow 2 Steps below and get responsive facebook comments or like box:

Step1: Your html page will have

<div id="facebook-comments">
    <div id="fbcomments">
    </div>
</div>

Step2: Add this to javascript file

$(document).ready(function() {
    var width_comments = $('#facebook-comments').width();
    var fb_comments = '<div class="fb-comments" data-href="' + APP_URL + '" data-width="' + width_comments + '" data-num-posts="10"></div>';
    $('#fbcomment').append(fb_comments);
});

Rather than just pasting the facebook’s comments code on page we are appending it using document ready function. We have a wrapper with id #facebook-comments and inside that div one other div which will contain the actual facebook comments.

Now when the page is loaded and document gets ready our function will get the width of the div with id equals to #facebook-comments and will assign that width to fbxml_comments. And finally we will append that fbxml_comments to the div with id #fbcomment.

Thats it! Now you have it – Responsive Facebook Comments!