CSS 如何使 Facebook 评论小部件具有流畅的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7447483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Facebook comments widget a fluid width?
提问by at.
Is it possible to make Facebook's comments widget a fluid width? Their documentationshows a width field for the fb:commentsxfbml or iframe which is specified as:
是否可以使 Facebook 的评论小部件具有可变宽度？他们的文档显示了fb:commentsxfbml 或 iframe的宽度字段，指定为：
- width - the width of the plugin in pixels. Minimum recommended width: 400px.
- width - 插件的宽度（以像素为单位）。最小推荐宽度：400px。
So maybe it's not possible...
所以也许是不可能的...
回答by AJ Savino
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:
艾伦你的解决方案正在运行，但看起来 facebook 更新了他们的插件并打破了风格。我使用通用选择器让它再次工作：
.fb-comments, .fb-comments * {
width:100% !important;
}
回答by Alan
I found a solution using css. Inspiration came from this article http://css-tricks.com/2708-override-inline-styles-with-css/
我找到了一个使用 css 的解决方案。灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
回答by Danka Stawarz
Probably next change from FB and this time this works better:
可能是 FB 的下一个变化，这次效果更好：
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
回答by Ryan
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.
截至 2014 年 3 月，没有任何 CSS 解决方案对我有用。似乎 Facebook 已将插件更改为现在在 iFrame 内的容器上设置宽度，您无法使用 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:
经过一番挖掘，我注意到注释的宽度实际上是由 iframe src 的最后一个参数控制的width=XXX。考虑到这一点，这是我解决它的方法：
// 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);
}
#containeris 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.
#container是您希望评论插件拉伸以适应的容器的宽度。将此更改为您需要的任何内容，此代码应该适合您。
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.
我正在使用超时，因为一旦加载 iframe，我就无法触发它。对此的任何帮助将不胜感激，但超时可以完成这项工作。
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
编辑：此解决方案导致后退按钮中断。我现在正在尝试这个解决方案，它似乎更好：https: //stackoverflow.com/a/22257586/394788
回答by Gav
I think I have a solution which improves a little on Ryan's answer from March 5th.
我想我有一个解决方案，可以从 3 月 5 日起对 Ryan 的回答有所改进。
Rather than re-loading the Facebook iframe after a delay, you could do the following.
您可以执行以下操作，而不是在延迟后重新加载 Facebook iframe。
Insert a regular Facebook comments tag, but append an extra bit to the class, so that Facebook doesn't detect it, but you can.
插入一个常规的 Facebook 评论标签，但在类中附加一点，这样 Facebook 就不会检测到它，但您可以。
<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.
然后添加一些 JS 来选择这个 div，用所需的宽度修改它，然后触发 Facebook 的解析器。
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();
}
回答by blues_driven
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!
Facebook 已经解决了这个问题。您现在可以添加data-width="100%"或设置宽度选项，100%并根据需要删除任何疯狂的 js 黑客！
回答by spider inside
insert this code before initialize facebook plugin and you will have fluid fb comments :):):)
在初始化 facebook 插件之前插入此代码，您将获得流畅的 fb 评论:):):)
$(".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);
}
回答by Jesper
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...
如果您检查 Facebook 选择器，可能会改进更多...
回答by thirdtiu
looks like facebook updated their documentation..you can now use data-width="100%" or width="100%"
看起来 facebook 更新了他们的文档..你现在可以使用 data-width="100%" 或 width="100%"
回答by dav3ydark007
I can't comment yet because my reputations not yet high enough, however there is a solution to this as of Dec 21, 2014
我还不能发表评论，因为我的声誉还不够高，但是截至 2014 年 12 月 21 日有一个解决方案
for this to work in CSS:
为此在 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
您必须在 FB 插件代码中将 data-width="" 部分设置为 100%，即
<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
流体运动的工作示例：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.
希望这对大家有帮助，想法是将 iframe 样式覆盖为父元素的 100%，并将实际的 FB 插件设置为 iframe 的 100%。这是我的工作。
