How to make Facebook comments widget a fluid width?

Question

Is it possible to make Facebook\'s comments widget a fluid width? Their documentation shows a width field for the fb:comments xfbml or iframe which is specifie

Answer 1

None of the CSS solutions worked for me as of March 2014. It seems that Facebook has changed the plugin to now set a width on a container within the iFrame which you are unable to override with CSS.

After a little digging, I noticed that the width of the comments are actually controlled by the last param of the iframe src width=XXX. With that in mind, here's how I solved it:

// ON PAGE LOAD
setTimeout(function(){
  resizeFacebookComments();
}, 1000);

// ON PAGE RESIZE
$(window).on('resize', function(){
  resizeFacebookComments();
});

function resizeFacebookComments(){
  var src   = $('.fb-comments iframe').attr('src').split('width='),
      width = $('#container').width();

  $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}

#container is the width of your container that you want the comments plugin to stretch to fit within. Change this to whatever you need it to be and this code should work for you.

I'm using a timeout because I wasn't able to get it to fire once the iframe was loaded. Any help on that would be appreciated but the timeout does the job.

EDIT: This solution causes the back button to break. I'm trying out this solution now and it seems to be better: https://stackoverflow.com/a/22257586/394788