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

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

Answer 2

I found a solution using css. Inspiration came from this article http://css-tricks.com/2708-override-inline-styles-with-css/

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

Answer 3

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

Answer 4

I know this is old question, but this maybe can help to someone.

You can use the following code to make your comments fluid

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

Can check the code here, because the pre function here delete some things. I'm new here. Regards

Facebook Comments Fluid

Answer 5

This is the only thing that worked correctly for me!

$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $(".fb-comments").`enter code here`parent().width();

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

Answer 6

I generally want to avoid using the universal selector for better performance. You should be able to get the same result with

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

Could probably be improved upon more if you check the facebook selectors...