Question

看起来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没有选项，只有百分比而非像素。我的意思是...是一个响应小部件太多要求？

Answer 1

请点击此错误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));

Answer 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你想要的宽度。

Answer 3

您可以使用“data-mobile”属性。（https://developers.facebook.com/docs/plugins/comments/）

但是这只适用于移动设备，如果你想在调整浏览器宽度时调整大小，你需要使用Javascript，我会使用$（“＃element”）。attr（“data-width” ，“你想要的尺寸”）;并在加载和调整大小时调用它。

如何更改Facebook评论小部件的宽度？

3 个答案: