如何使Facebook评论小部件流畅？

Question

是否有可能使Facebook的评论小部件流畅？他们的文档显示了fb:commentsxfbml或iframe 的宽度字段,其指定为:

• width - 插件的宽度(以像素为单位).建议的最小宽度:400px.

也许这不可能......

Answer 1

Alan你的解决方案正在运行,但看起来facebook更新了他们的插件并打破了风格.我使用通用选择器再次使用它:

.fb-comments, .fb-comments * {
    width:100% !important;
}

Answer 2

我找到了一个使用css的解决方案.灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

Answer 3

可能是FB的下一次更改,这次更好用:

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}

Answer 4

截至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

Answer 5

我想我有一个解决方案,可以从3月5日开始改善Ryan的答案.

您可以执行以下操作,而不是在延迟后重新加载Facebook iframe.

插入一个常规的Facebook评论标签,但在课程中附加一点,以便Facebook不会检测到它,但你可以.

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

然后添加一些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();
}

Answer 6

这个问题已经被Facebook解决了.您现在可以根据需要添加data-width="100%"或设置宽度选项100%并删除任何疯狂的js hacks!