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...
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;}
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;
}
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;}
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://stackoverflow.com/a/22257586/394788
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();
}
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!
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...
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);
}
looks like facebook updated their documentation..you can now use data-width="100%" or width="100%"
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.
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; }
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,
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
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.
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>
.fb-comments, .fb-comments iframe[style], .fb-comments > span {width: 100% !important;}
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;
}
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);
}
No need to override the css, Use data-width="100%"
<div class="fb-comments" data-width="100%" data-href="yourURL"></div>
来源：https://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width