是否有可能使Facebook的评论小部件流畅?他们的documentation显示fb:comments
xfbml或iframe的宽度字段,指定为:
所以也许这不可能......
答案 0 :(得分:54)
Alan你的解决方案正在运行,但看起来Facebook更新了他们的插件并打破了风格。我使用通用选择器再次使用它:
.fb-comments, .fb-comments * {
width:100% !important;
}
答案 1 :(得分:43)
我找到了一个使用css的解决方案。灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
答案 2 :(得分:31)
可能是FB的下一次更改,这次效果更好:
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
答案 3 :(得分:16)
截至2014年3月,没有一个CSS解决方案适用于我。似乎Facebook已经将插件更改为现在在iFrame中的容器上设置宽度,您无法用CSS覆盖它。
经过一番挖掘后,我注意到评论的宽度实际上是由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);
}
#container
是容器的宽度,您希望注释插件可以伸展以适应。将此更改为您需要的任何内容,此代码应该适合您。
我正在使用超时,因为一旦加载了iframe,我无法触发它。任何有关这方面的帮助都会受到赞赏,但是超时会完成工作。
编辑:此解决方案导致后退按钮中断。我现在正在尝试这个解决方案,似乎更好:https://stackoverflow.com/a/22257586/394788
答案 4 :(得分:16)
我认为我有一个解决方案,可以从3月5日起对Ryan的回答略有提升。
在延迟之后,您可以执行以下操作,而不是重新加载Facebook iframe。
插入一个常规的Facebook评论标记,但在课程中附加一点,以便Facebook没有检测到它,但你可以。
<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>
然后添加一些选择此div的JS,用所需的宽度修改它,然后启动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();
}
答案 5 :(得分:11)
Facebook已解决此问题。您现在可以添加data-width="100%"
或将宽度选项设置为100%
,并根据需要删除任何疯狂的js黑客!
答案 6 :(得分:4)
我通常希望避免使用通用选择器来获得更好的性能。您应该可以使用
获得相同的结果.fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;}
如果您查看Facebook选择器,可能会有更多改进......
答案 7 :(得分:4)
在初始化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);
}
答案 8 :(得分:2)
看起来像Facebook更新了他们的文档..你现在可以使用data-width =&#34; 100%&#34;或宽度=&#34; 100%&#34;
答案 9 :(得分:2)
我还不能评论,因为我的声誉还不够高,但截至2014年12月21日有解决方案
这可以在CSS中使用:
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
你必须在FB插件代码中将data-width =“”部分设置为100%,即
<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
流动运动的工作实例:http:www.unitedbiker.org
希望这可以帮助所有人,想法是将iframe样式覆盖为父元素的100%,并将实际的FB插件设置为iframe的100%。这是我的工作。
答案 10 :(得分:1)
这对我有用,但我需要添加span标记才能正常工作:
.fb-comments, .fb-comments iframe[style], .fb-comments span { width: 100% !important; }
答案 11 :(得分:1)
我认为这对每个人都有用。适合我2013年12月26日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;
}
下面没有一个对我有用,但无论如何我把它留在了那里。
.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,
答案 12 :(得分:1)
我知道这是一个老问题,但这可能对某人有所帮助。
您可以使用以下代码使评论更加流畅
.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;}
可以在这里查看代码,因为这里的pre函数删除了一些东西。我是新来的。此致
答案 13 :(得分:1)
花了一些时间来调查这个问题。虽然FB建议以像素为单位指定绝对宽度,但如果只将其设置为“100%”,它看起来就有效。注意下面的数据宽度。
<div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>
是的,这很容易,没有onresize回调没有iframe src修改。
答案 14 :(得分:1)
经过一段时间的努力,我找到了一个小问题,可以帮助你弄清楚这个页面上的哪些CSS技巧将有助于你的特定网站/版本/年的Facebook评论插件。在浏览器中查看您的网站并检查facebook评论插件周围的元素。你应该找到一个你添加的片段,现在由facebook的javascript小部件修饰,看起来像这样:
<fb:comments href="http://mywebpage.com"
fb-xfbml-state="rendered" class="fb_iframe_widget">
注意说:
class="<whatever class your version is using>"
这是您要使用的类 - 所以在上面的示例中,您需要添加以下样式:
<style>
.fb_iframe_widget,
.fb_iframe_widget iframe[style],
.fb_iframe_widget span[style],
.fb_iframe_widget * {
width: 100% !important;
}
</style>
答案 15 :(得分:0)
如果你的Facebook Comments Plugin的代码看起来像(XFBML):
<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>
然后以下CSS应该完成工作:
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe {
width: 100% !important;
}
答案 16 :(得分:0)
.fb-comments, .fb-comments iframe[style], .fb-comments > span {width: 100% !important;}
答案 17 :(得分:0)
这是我唯一能正常使用的东西!
$(".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);
}
答案 18 :(得分:0)
无需覆盖css,请使用data-width="100%"
<div class="fb-comments" data-width="100%" data-href="yourURL"></div>