8

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.

9 Answers 9

20

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; }
2
  • 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
    – medo ampir
    Jun 2, 2012 at 15:01
  • This won't work for <iframe> Facebook comment box.
    – p3nchan
    Sep 29, 2015 at 14:11
9

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.

2
  • Other solutions didn't work for me, but this one did!
    – johna
    Dec 14, 2013 at 1:15
  • What does "iframe[style]" do? How is this different than just "iframe" in your last row? Thank you for this solution.
    – Mario Awad
    May 14, 2014 at 16:32
3

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

0
2

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.

1

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 …

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

This worked for me

1

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.

1
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);
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.