How to make Facebook comments widget a fluid width?

G

19

36

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

Gonfalon answered 16/9, 2011 at 16:2 Comment(1)

Please see the comment by @blues-driven below for a Facebook solution https://mcmap.net/q/275852/-how-to-make-facebook-comments-widget-a-fluid-width – Straitlaced 20/5, 2014 at 18:14

S

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

Shoemaker answered 17/10, 2011 at 11:5 Comment(7)

Beautiful! Worked perfectly! @Gonfalon You should seriously accept this answer. =) – Unsnarl 9/11, 2011 at 0:7

To ensure this CSS works the width (data-width attribute) must not be specified. – Kbp 14/3, 2012 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 – Molton 12/6, 2012 at 12:48

I had to add .fb_iframe_widget > span[style] as well. – Marlea 7/8, 2012 at 16:55

Mine works with @porneL's addition but mobile is still wonky. – Querida 11/12, 2012 at 8:17

this worked for me -> .fb-comments, .fb-comments iframe[style], .fb-comments span[style] {width: 100% !important;} – Gipsy 17/10, 2013 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. https://mcmap.net/q/275852/-how-to-make-facebook-comments-widget-a-fluid-width – Forearm 3/4, 2014 at 13:4

P

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

Potbellied answered 18/4, 2012 at 15:29 Comment(2)

This one worked for me, the chosen answer on this question did not. – Godolphin 11/4, 2013 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. – Invitation 12/9, 2013 at 15:31

S

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

Shoemaker answered 17/10, 2011 at 11:5 Comment(7)

Beautiful! Worked perfectly! @Gonfalon You should seriously accept this answer. =) – Unsnarl 9/11, 2011 at 0:7

To ensure this CSS works the width (data-width attribute) must not be specified. – Kbp 14/3, 2012 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 – Molton 12/6, 2012 at 12:48

I had to add .fb_iframe_widget > span[style] as well. – Marlea 7/8, 2012 at 16:55

Mine works with @porneL's addition but mobile is still wonky. – Querida 11/12, 2012 at 8:17

this worked for me -> .fb-comments, .fb-comments iframe[style], .fb-comments span[style] {width: 100% !important;} – Gipsy 17/10, 2013 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. https://mcmap.net/q/275852/-how-to-make-facebook-comments-widget-a-fluid-width – Forearm 3/4, 2014 at 13:4

O

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

Oas answered 31/10, 2012 at 17:3 Comment(2)

We're the 22nd of february 2013 and this is the only one that works with the current version of the fb:comments. – Dockage 22/2, 2013 at 9:2

Still Works as of 6th of February 2014. – Inconclusive 7/2, 2014 at 5:59

L

16

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://mcmap.net/q/276786/-responsive-facebook-comments-css-hack-broken

Lumisterol answered 5/3, 2014 at 13:54 Comment(2)

Good stuff. Here is the bug report on FB for this: developers.facebook.com/x/bugs/256568534516879 – Honebein 6/3, 2014 at 17:20

very good solution! instead of $('#container').width(); I put $('.fb-comments iframe').parent().width() its even more dynamic! – Landaulet 6/3, 2014 at 20:56

F

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

Forearm answered 11/3, 2014 at 14:33 Comment(7)

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

Really like this solution. Intuitive, and letting FB do the work by providing the correct width when the plugin is loaded. – Siesta 12/3, 2014 at 1:15

Tested and working as of March 27th, 2014. Great solution, does exactly what you expect. Thanks for this answer Gav! – Glover 27/3, 2014 at 12:9

@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? – Bunns 30/4, 2014 at 14:1

@Bunns 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. – Forearm 30/4, 2014 at 19:30

As of today you can now use 100% as the width attribute, so javascript or CSS should no longer be necessary. – Forearm 15/5, 2014 at 19:28

@Forearm As of June 7, data-width="100%" works for IE11, Chrome, Firefox, and Safari. It still does not work for IE10. – Credent 7/6, 2014 at 12:33

B

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!

Barnet answered 16/5, 2014 at 14:12 Comment(1)

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 – Haletta 16/4, 2019 at 9:17

P

4

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

Passim answered 30/5, 2012 at 11:16 Comment(0)

S

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

Shallow answered 14/3, 2014 at 14:15 Comment(1)

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. – Ravelin 15/6, 2014 at 4:1

G

2

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

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

Godsey answered 29/5, 2014 at 3:32 Comment(1)

Just done it in my html. works like a charm no CSS requires. copy & paste. – Bottleneck 29/9, 2016 at 10:18

A

2

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.

Aleph answered 21/12, 2014 at 20:14 Comment(0)

M

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

Mohamed answered 30/8, 2013 at 4:11 Comment(0)

A

1

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,

Adjoint answered 26/12, 2013 at 18:42 Comment(0)

B

1

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

Basil answered 29/12, 2013 at 22:27 Comment(0)

D

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.

Dol answered 4/8, 2014 at 13:56 Comment(1)

this is the best solution – Turnsole 20/11, 2016 at 17:46

L

1

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>

Lacustrine answered 12/8, 2015 at 22:28 Comment(0)

A

0

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

Algeria answered 21/8, 2013 at 23:52 Comment(0)

C

0

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

Couple answered 17/12, 2013 at 17:14 Comment(0)

S

0

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

Sower answered 16/5, 2014 at 19:7 Comment(0)

A

0

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

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

Abyssal answered 9/2, 2017 at 9:13 Comment(0)

Recommended topics

Hot tags