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...

Please see the comment by @blues-driven below for a Facebook solution http://stackoverflow.com/a/23697427/84162 — MECU, May 20 '14 at 18:14

score 52 · Answer 1 · answered Apr 18 '12 at 15:29

52

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

answered Apr 18 '12 at 15:29

AJ Savino

529
4
2

4

This one worked for me, the chosen answer on this question did not. – Apr 11 '13 at 15:46
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. – superluminary Sep 12 '13 at 15:31

score 42 · Accepted Answer · answered Oct 17 '11 at 11:05

42

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

answered Oct 17 '11 at 11:05

Alan

1,084
11
5

1

Beautiful! Worked perfectly! @at. You should seriously accept this answer. =) – Nathan Arthur Nov 09 '11 at 00:07
4

To ensure this CSS works the width (`data-width` attribute) must not be specified. – Dean Taylor Mar 14 '12 at 17:12
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 – Jorre Jun 12 '12 at 12:48
6

I had to add `.fb_iframe_widget > span[style]` as well. – Kornel Aug 07 '12 at 16:55
Mine works with @porneL's addition but mobile is still wonky. – Simpleton Dec 11 '12 at 08:17
3

this worked for me -> .fb-comments, .fb-comments iframe[style], .fb-comments span[style] {width: 100% !important;} – Extelliqent Oct 17 '13 at 21:21
@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. http://stackoverflow.com/a/22328835/2544386 – Gav Apr 03 '14 at 13:04

score 31 · Answer 3 · answered Oct 31 '12 at 17:03

31

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

answered Oct 31 '12 at 17:03

Danka Stawarz

319
3
2

5

We're the 22nd of february 2013 and this is the only one that works with the current version of the fb:comments. – Mathijs Delva Feb 22 '13 at 09:02
Still Works as of 6th of February 2014. – Nate Feb 07 '14 at 05:59

score 16 · Answer 4 · edited May 23 '17 at 10:29

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

Good stuff. Here is the bug report on FB for this: https://developers.facebook.com/x/bugs/256568534516879/ — kel, Mar 06 '14 at 17:20
very good solution! instead of $('#container').width(); I put $('.fb-comments iframe').parent().width() its even more dynamic! — Matthias Scholz, Mar 06 '14 at 20:56

Gav · Answer 5 · 2014-04-23T15:02:52.687

16

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

edited Apr 23 '14 at 15:02

answered Mar 11 '14 at 14:33

Gav

431
5
12

1

Prefer this answer, doesn't rely on CSS that changes every month, and is a lot quicker than setting a timeout and reloading elements. – SteveEdson Mar 11 '14 at 14:37
1

Really like this solution. Intuitive, and letting FB do the work by providing the correct width when the plugin is loaded. – michaelxor Mar 12 '14 at 01:15
1

Tested and working as of March 27th, 2014. Great solution, does exactly what you expect. Thanks for this answer Gav! – MLK.DEV Mar 27 '14 at 12:09
@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? – ReynierPM Apr 30 '14 at 14:01
@ReynierPM If you go to Facebook's doc page on this: https://developers.facebook.com/docs/plugins/comments/ and click 'Get Code', you'll see they give you something like `
` - 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 Apr 30 '14 at 19:30
As of today you can now use 100% as the width attribute, so javascript or CSS should no longer be necessary. – Gav May 15 '14 at 19:28
@Gav As of June 7, `data-width="100%"` works for IE11, Chrome, Firefox, and Safari. It still does not work for IE10. – eat-sleep-code Jun 07 '14 at 12:33

score 11 · Answer 6 · answered May 16 '14 at 14:12

11

This problem has been addressed by Facebook. You can now add data-width="100%" or set the width option to100% and delete any crazy js hacks as appropriate!

answered May 16 '14 at 14:12

blues_driven

331
2
7

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 – user1169629 Apr 16 '19 at 09:17

score 4 · Answer 7 · answered May 30 '12 at 11:16

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...

score 4 · Answer 8 · answered Mar 14 '14 at 14:15

4

insert this code before initialize facebook plugin and you will have fluid fb comments :):):)

 $(".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").parent().width();

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

answered Mar 14 '14 at 14:15

spider inside

41
2

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. – Andrew Jun 15 '14 at 04:01

score 2 · Answer 9 · answered May 29 '14 at 03:32

2

looks like facebook updated their documentation..you can now use data-width="100%" or width="100%"

https://developers.facebook.com/docs/plugins/comments/

answered May 29 '14 at 03:32

thirdtiu

91
1
5

Just done it in my html. works like a charm no CSS requires. copy & paste. – Raitis Kupce Sep 29 '16 at 10:18

score 2 · Answer 10 · answered Dec 21 '14 at 20:14

I can't comment yet because my reputations not yet high enough, however there is a solution to this as of Dec 21, 2014

for this to work in CSS:

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

you MUST have the data-width="" section set to 100% within the FB plugin code i.e

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

working example with fluid motion: http:www.unitedbiker.org

Hope this helps everyone out, the idea is to override the iframe style to be 100% of the parent element, and to set the actual FB plugin to 100% of the iframe. This was my work around.

score 1 · Answer 11 · edited Aug 30 '13 at 04:29

1

This worked for me, but I need to add span tag to work correctly:

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

edited Aug 30 '13 at 04:29

pb2q

58,613
19
146
147

answered Aug 30 '13 at 04:11

Fernando Nunes

17
3

score 1 · Answer 12 · answered Dec 26 '13 at 18:42

I think this will work for everyone. Works for me Dec 26, 2013 at http://eddie11.com/dj-eddie-talks/

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

None of the below worked for me but I left it there anyway.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,

Quimbo · Answer 13 · 2013-12-29T22:35:41.817

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

score 1 · Answer 14 · answered Aug 04 '14 at 13:56

1

spent some time investigating this issue. Though FB proposes to specify absolute width in pixels, looks like it works if you just set it to '100%'. Note data-width below.

<div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>

Yeah yeah, that's easy, no onresize callbacks no iframe src modifications.

answered Aug 04 '14 at 13:56

Boris Mossounov

4,032
2
15
11

this is the best solution – Lawrence Weru Nov 20 '16 at 17:46

score 1 · Answer 15 · answered Aug 12 '15 at 22:28

After grappling with this for quite some time I found a tidbit that should help you to figure out which of the CSS tricks on this page will help for your particular site/version/year of facebook's comment plugin. Look at your site in a browser and inspect the elements around the facebook comment plugin. You should find a snippet that you added and is now embellished by facebook's javascript widget that looks something like this:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

take note of the part that says:

class="<whatever class your version is using>"

this is the class you want to use - so in my example above, you would want to add the following styles:

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

score 0 · Answer 16 · answered Aug 21 '13 at 23:52

0

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

answered Aug 21 '13 at 23:52

Leo

578
9
15

score 0 · Answer 17 · answered Dec 17 '13 at 17:14

If your Facebook Comments Plugin's code looks like (XFBML):

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

Then the following CSS should get the job done:

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

score 0 · Answer 18 · answered May 16 '14 at 19:07

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

score 0 · Answer 19 · answered Feb 09 '17 at 09:13

0

No need to override the css, Use data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>

answered Feb 09 '17 at 09:13

Murhaf Sousli

12,622
20
119
185

How to make Facebook comments widget a fluid width?

19 Answers19

Linked