How to make facebook comment box width 100%?

Question

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

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

Answer 2

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>

Answer 3

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 …