How to make facebook comment box width 100%?
Solution 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).
Solution 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; }
Solution 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.
Solution 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.
Solution 5
.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
width: 100% !important;
}
This worked for me
medo ampir
Updated on April 28, 2020Comments
-
medo ampir about 4 years
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.