响应式Facebook评论CSS Hack已失效。

Question

我使用的是：

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

我希望能够使得我的网站上的Facebook评论具有响应性。就在前几天这还很好用，但今天我发现他们改变了代码。请问还有可能再让它正常工作吗？

- user2407910

---

看起来Facebook现在支持data-width="100%"，但我认为为了使其更好地适应窗口大小调整，仍需要使用JS。https://developers.facebook.com/docs/plugins/comments - stephen.hanson

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;

- jonsuh

---

给一些肯定吧，这是这里最好的工作答案之一，而且它不需要使用JavaScript来重新渲染评论...有时需要几秒钟，这真的很烦人。 - Tomas

不错的工作!！我需要具有响应性的Facebook类似框 =(我尝试了代码，但它并不相同，问题是最大宽度为500px。我需要978px。https://developers.facebook.com/docs/plugins/page-plugin - KingRider

你是救世主！ - Narc0t1CYM

运行完美！非常感谢。 - Anonymous

Answer 2

我也遇到了这个问题。我使用JS进行了修补。基本上绑定窗口的调整大小事件，当它触发时重新绘制评论小部件（如果需要，可以使用jQuery）。

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

在上面的示例中，.comments是您希望fb-comments的宽度扩展到的容器。但这样做的缺点是当窗口大小调整时评论小部件会重新初始化。

如果您使用underscore，请使用debounce包装调整大小处理程序，以防止它触发太频繁。

- Timothy Huertas

---

运行得非常好。我只是想知道为什么Facebook选择这样阻碍他们的产品... - Jody Heavener

我尝试了这个，但是有一个问题。只有在我调整屏幕大小时，评论框才会重新调整大小。它不会在页面初始加载时自动调整大小。你有什么想法吗？ - a1anm

你应该添加以下函数：$(document).ready(function(){ $(".fb-comments").attr("data-width", $("#comments").width()); } 这个函数的作用是将 .fb-comments 元素的 data-width 属性设置为 $("#comments").width() 的值。 - Ka.

或者只需在页面加载时触发 $(window).trigger('resize') 以避免重复执行该函数。 - Jody Heavener

Answer 3

这个问题现在已经被Facebook解决了（评论插件现在强制固定宽度）

您应该使用data-width="100%"

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

- intCoffee

Answer 4

以下是我的解决方案。这个脚本只是一个解决这个bug的临时方法。

灵感来源于：

• 上面的答案
• 这个链接

下面的代码（只需用你自己容器类名替换.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>

- Ka.

---

这对我非常有效。还必须将＃fb-comments-block更改为.comments-area（或任何您的容器） 。 - a1anm

Answer 5

请在您的 fb-comments 元素中添加 data-width="100%" 属性。这将设置容器的宽度为流体宽度。

例如:

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

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

- Josh

Answer 6

这里有一种纯CSS的自适应方法：http://jsfiddle.net/bennyaarup/5gyp6/ HTML 我将FB评论代码块复制并添加了额外的class = .fb-1, .fb-2, .fb-3等，以达到所需的自适应阶段（data-width）的数量。

<div class="fb-comments fb-1" data-href="http://yourdomain.com" data-width="900" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-2" data-href="http://yourdomain.com" data-width="800" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-3" data-href="http://yourdomain.com" data-width="700" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-4" data-href="http://yourdomain.com" data-width="600" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-5" data-href="http://yourdomain.com" data-width="500" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-6" data-href="http://yourdomain.com" data-width="400" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-7" data-href="http://yourdomain.com" data-width="300" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-8" data-href="http://yourdomain.com" data-width="200" data-numposts="5" data-colorscheme="light"></div>

CSS

我使用媒体查询和display:none来样式化自适应阶段并显示相应的评论字段。

@media all and (min-width: 400px), (max-width: 300px) {

.fb-8{
display: none !important;
}
}

@media all and (min-width: 500px), (max-width: 400px) {

.fb-7{
display: none !important;
}
}


@media all and (min-width: 600px), (max-width: 500px) {

.fb-6 {
display: none !important;
}
}


@media all and (min-width: 700px), (max-width: 600px) {

.fb-5 {
display: none !important;
}
}

@media all and (min-width: 800px), (max-width: 700px) {

.fb-4 {
display: none !important;
}
}


@media all and (min-width: 900px), (max-width: 800px){

.fb-3 {
display: none !important;
}
}


@media all and (min-width: 1000px), (max-width: 900px){

.fb-2 {
display: none !important;
}
}


@media all and (max-width: 1000px) {

.fb-1 {
display: none !important;
}
}

虽然有些取巧，但它的效果非常好。

- Aarup.me

Answer 7

尝试使用这段代码 这可能会有些不同

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

- Ardian Tokotua

Answer 8

Ka的去抖动方案不错，但这可能更直接，并且应该记忆化节点。确保将fb-comments包装在某个容器中：

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

如果使用jQuery，则设置一个调整大小的操作，以减少请求次数。此外，请确保缓存您正在检查的节点以加快速度：

var $comments = null;
var $fbComments = null;
var resizeTimeout = null;

function resizeComments() {
  if (resizeTimeout) clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function() {
    resizeTimeout = null;
    if (typeof FB === 'undefined') return;
    // The class of the wrapper element above is 'comments'
    $comments = $comments || $('.comments');
    $fbComments = $fbComments || $(".fb-comments");
    if ($comments.width() !== parseInt($fbComments.attr("data-width"), 10)) {
      $fbComments.attr("data-width", $comments.width());
      FB.XFBML.parse($comments[0]);
    }
  }, 100);
}

然后在文档准备就绪时和窗口调整大小时调用此函数：

$(document).ready(function() {
  resizeComments();

  $(window).resize(function() {
    resizeComments();
  });  
});

- Jeff Rafter

Answer 9

我遇到了同样的问题（昨天实现了响应式评论，今天它不再工作）。

我没有足够的积分来投票，但上面的答案有效。我正在使用WordPress的Facebook插件。我还在页面加载时设置了一个超时以立即获取正确的宽度。

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

- Karel Cardinaels

Answer 10

这里有一个小解决方案...试一下...

添加这个jQuery：

$(document).ready(function(){
    $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
});

- Maruf Hasan Bulbul