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” >
width_comments = $('#facebook-comments').width();
fbxml_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 actual facebook comments.
Now when the page is loaded and document gets ready our function will get the width of the div with id #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! You have it Responsive Facebook Comments!