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

时间:2014-03-07 19:34:22

标签: css facebook

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

3 个答案:

答案 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” ,“你想要的尺寸”);并在加载和调整大小时调用它。