How to make facebook comment box width 100%?

Question

i am using this code to put a facebook comment box to my page,

<script type="text/javascript">
 (function(d, s, id) 
 {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=397337283630353";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>


<div class="fb-comments" data-href="https://apps.facebook.com/driftee/" data-num-posts="5" data-width="470" data-colorscheme="dark" style="width: 100% !important;"></div>

but i cannot make the comment box fill 100% of the page.

Freehearted

Answer 1

well i think i managed to solve it, i analysed the comment box and saw that the fb-comments div is containing a span with the width of 470px by default, and inside this span i found an iframe of the same width, so the solution is to change the span and iframe width on window resize using jquery like this:

$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});

so now on window resize the whole comment box is taking the container width (by other means it is 100% width).

Freehearted

Answer 2

You can do this by adding CSS class in style sheet of your HTML page as:

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

Amato

still the same i used this <style type="text/css"> .fb-comments, .fb-comments iframe{width: 100% !important;} </style> but the same is. the div width is 100% but the comment box is still around 550px – Freehearted

This won't work for <iframe> Facebook comment box. – Passionate

Answer 3

zeeshan your solution seems outdated and it looks like facebook updated their plugin and that broke the style.

Probably this works better for me as of now and I believe that this style will again broke when facebook update the way their plugins work.

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

I encourage other contributors to add the more recent solution to this question when time comes.

Pouched

Other solutions didn't work for me, but this one did! – Puritan

What does "iframe[style]" do? How is this different than just "iframe" in your last row? Thank you for this solution. – Didactic

Answer 4

I try the other solutions and none works for me.

Reading the fb documentation i found that width 100% is already supported adding the attribut data-width="100%" to the tag:

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

It's working right now and according to it's documentation en mobile devices this setting is set automatically.

Minta

Answer 5

Try adding the parameter data-width="{pixels}", as you’re getting when you get the code created on this page, https://developers.facebook.com/docs/reference/plugins/comments/ – that is, if you know the width of the page in pixels. I don’t know, if it works with percentages as well, but somehow doubt it.

Then your last option might be to add resp. modify that parameter dynamically once your page has loaded and you can read out the actuall width in pixels, and have XFBML only parsed afterwards (setting xfbml param to false while loading the script, and calling FB.XFBML.parse after setting the data-width parameter). Of course, that still won’t help you, if the width get’s modified later by the user resizing the browser window or else …

Thornie

Answer 6

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

This worked for me

Mendelevium

Answer 7

With jQuery you can over-write the hard-coded width before it loads the Facebook comment box.

$('document').ready(function(){
    $('.fb-comments').attr('data-width',$('body').width());
});

p.s. you can replace 'body' with any other element you want the comment box to match.

Frech

Answer 8

setTimeout(function run() {
    if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0)
        setTimeout(run, 1000);
    else
        $('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%";
}, 1000);

Infiltrate

Answer 9

This is fairly simple On your code

Add the following piece of code data-width="100%"

<div class="fb-comments" data-href="{{ post.build_absolute_uri }}"data-width="100%" data-numposts="5"></div>

Tabes