问题
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...
回答1:
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;}
回答2:
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;
}
回答3:
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;}
回答4:
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
回答5:
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();
}
回答6:
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!
回答7:
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...
回答8:
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);
}
回答9:
looks like facebook updated their documentation..you can now use data-width="100%" or width="100%"
https://developers.facebook.com/docs/plugins/comments/
回答10:
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.
回答11:
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; }
回答12:
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,
回答13:
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
Facebook Comments Fluid
回答14:
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.
回答15:
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>
回答16:
.fb-comments, .fb-comments iframe[style], .fb-comments > span {width: 100% !important;}
回答17:
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;
}
回答18:
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);
}
回答19:
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