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 specified as:

• width - the width of the plugin in pixels. Minimum recommended width: 400px.

So maybe it's not possible...

Solution 1

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;}

Solution 2

Alan your solution was working however it looks like facebook updated their plugin and broke the style. I got it working again using the universal selector:

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

Solution 3

Probably next change from FB and this time this works better:

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}

Solution 4

I think I have a solution which improves a little on Ryan's answer from March 5th.

Rather than re-loading the Facebook iframe after a delay, you could do the following.

Insert a regular Facebook comments tag, but append an extra bit to the class, so that Facebook doesn't detect it, but you can.

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

Then add some JS which picks this div up, modifies it with the desired width, then triggers Facebook's parser.

var foundFBComs = false;

$('.fb-comments-unloaded').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== 'undefined') {
    FB.XFBML.parse();
}

Solution 5

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

View more solutions

Comments

[Nathan Arthur]

Beautiful! Worked perfectly! @at. You should seriously accept this answer. =)

[Dean Taylor]

To ensure this CSS works the width (data-width attribute) must not be specified.

[Jorre]

What about the mobile comments. The CSS works fine on desktops, but not in iPhone or mobiles where Facebook automatically switches back to mobile comments

[Kornel]

I had to add .fb_iframe_widget > span[style] as well.

[Simpleton]

Mine works with @porneL's addition but mobile is still wonky.

[Mathijs Delva]

We're the 22nd of february 2013 and this is the only one that works with the current version of the fb:comments.

[Admin]

This one worked for me, the chosen answer on this question did not.

[superluminary]

This should continue to work as it targets the div, the nested span and iframe, and any other elements FaceBook might add in the future, and overrides the inline style attributes.

[Extelliqent]

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

[Nate]

Still Works as of 6th of February 2014.

[kel]

Good stuff. Here is the bug report on FB for this: developers.facebook.com/x/bugs/256568534516879

[Matthias Scholz]

very good solution! instead of $('#container').width(); I put $('.fb-comments iframe').parent().width() its even more dynamic!

[SteveEdson]

Prefer this answer, doesn't rely on CSS that changes every month, and is a lot quicker than setting a timeout and reloading elements.

[michaelxor]

Really like this solution. Intuitive, and letting FB do the work by providing the correct width when the plugin is loaded.

[MLK.DEV]

Tested and working as of March 27th, 2014. Great solution, does exactly what you expect. Thanks for this answer Gav!

[Gav]

@Green a pure CSS solution no longer works, because Facebook have set a fixed width inside the iframe. See my solution below for a JS solution which doesn't rely on CSS at all. stackoverflow.com/a/22328835/2544386

[ReynierPM]

@gav I'm not a WP expert so I'm lost at this point "Insert a regular Facebook comments tag" what you mean with that? where I should insert this tag?

[Gav]

@ReynierPM If you go to Facebook's doc page on this: developers.facebook.com/docs/plugins/comments and click 'Get Code', you'll see they give you something like <div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div> - this is the comments tag I'm referring to. You should insert it wherever you wish the comments plugin to appear in your page.

[Gav]

As of today you can now use 100% as the width attribute, so javascript or CSS should no longer be necessary.

[eat-sleep-code]

@Gav As of June 7, data-width="100%" works for IE11, Chrome, Firefox, and Safari. It still does not work for IE10.

[Andrew]

Simple and works, the 100% width that facebook have introduced works for the initial size only, and does not continually adjust, so if you have a fluid layout a user re-sizes the window it overflow or look small. This code fixes this nicely.

[Raitis Kupce]

Just done it in my html. works like a charm no CSS requires. copy & paste.

[Lawrence Weru]

this is the best solution

[user1169629]

This only works from 350px and upwards. So for example on a iPhone SE you can't make responsive embeds and have to use horizontal scrolling