看起来facebook再次更改了评论小部件的代码。我们过去常常改变宽度的旧箍不再起作用。
不再有效的示例:
.fb-comments * {
width: 100% !important;
}
.fb-comments, .fb-comments span, .fb-comments iframe {
width: 100% !important;
}
使用内联CSS设置宽度的div具有随机生成的ID,如feedback_0GsySnrdOA4KOODKY,因此您无法使用CSS覆盖它。那些混蛋。
任何人都有一个不需要javascript的解决方案?
我不明白为什么create the widget没有选项,只有百分比而非像素。我的意思是...是一个响应小部件太多要求?
答案 0 :(得分:2)
请点击此错误https://developers.facebook.com/x/bugs/256568534516879/
你可以使用的一些解决方案......我在帖子中找到了。
DEMO:http://jsfiddle.net/PZD54/1/
function fbCommentsWorkaround() {
function resizeFacebookComments(){
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $('.fb-comments').parent().parent().width();
$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
$('.fb-comments iframe').css({width: width});
$('.fb-comments span').css({width: width});
}
FB.Event.subscribe('xfbml.render', resizeFacebookComments);
$(window).on('resize', function(){
resizeFacebookComments();
});
$('.fb-comments iframe').on('load', function() {
resizeFacebookComments();
$('.fb-comments iframe').unbind('load');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : "596895303735715",
status : true,
cookie : true,
oauth : true,
xfbml : true,
logging : false
});
fbCommentsWorkaround();
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
答案 1 :(得分:2)
这对我有用: 添加到fb-comments div data-width =“100%”
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
当您调整浏览器大小时它会响应。
你可以将fb-comments div放在另一个div中,然后给那个div你想要的宽度。
答案 2 :(得分:0)
您可以使用“data-mobile”属性。 (https://developers.facebook.com/docs/plugins/comments/)
但是这只适用于移动设备,如果你想在调整浏览器宽度时调整大小,你需要使用Javascript,我会使用$(“#element”)。attr(“data-width” ,“你想要的尺寸”);并在加载和调整大小时调用它。