响应式Facebook评论CSS Hack Broken

Question

我用的是:

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

使Facebook评论在我的网站上响应.前几天工作正常,花花公子.今天我看,他们已经改变了他们的代码.是否有可能再次使用？

Answer 1

这是一个新的CSS解决方案.这是我今天(2014年7月16日)正在进行的一个项目,它的工作非常精彩.

HTML

<div class="fb-comments"
     data-href="http://example.com/comments"
     data-numposts="10"
     data-width="100%"
     data-colorscheme="light"></div>

CSS

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

诀窍是data-width: 100%和min-width: 100% !important; width: 100% !important;

Answer 2

我也有点喜欢这个.我加入了JS hack.基本上绑定到窗口的resize事件并在它触发时重绘注释窗口小部件(如果你想我可以发布,则使用jquery):

$(window).resize(function(){
 $(".fb-comments").attr("data-width", $(".comments").width());
 FB.XFBML.parse($(".comments")[0]);
});

在上面的示例.comments中,您希望fb-comments扩展的宽度为容器.这样做的缺点是,当调整窗口大小时,注释窗口小部件将重新初始化.

如果你使用下划线包装调整大小处理程序,debounce以防止它经常被触发.

Answer 3

这个问题现在由Facebook修复(评论插件现在强制固定宽度)

你应该用 data-width="100%"

请参阅文档:https://developers.facebook.com/docs/plugins/comments

Answer 4

以下是我的解决方案.此脚本只是此错误的解决方法

解决方案灵感:

• 以上答案
• 这个链接

下面的代码(只需.comments-area用您自己的容器类名替换)

<script>
    (function($,sr){
       // debouncing function from John Hann
       // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
      var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null;
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100);
          };
      }
      // smartresize 
      jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

    })(jQuery,'smartresize');


    $(document).ready(function(){
        if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
            $(".fb-comments").attr("data-width", $(".comments-area").width());
        }
        $(window).smartresize(function(){
            if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
                $(".fb-comments").attr("data-width", $(".comments-area").width());
                FB.XFBML.parse($(".comments-area")[0]);
            }
        });
    });
</script>

Answer 5

添加data-width="100%"属性到您的fb-comments元素.它会将容器设置为流体宽度.

例如:

<div 
    class="fb-comments" 
    data-href="http://www.someurl.com/somepage/" 
    data-num-posts="10"
    data-width="100%"
></div>

这似乎是Facebook最近在Facebook评论插件上的更新