HTML

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来调整resize处理程序，以防止它经常触发。

Answer 3

此问题现已由Facebook（Comments Plugin Is Now Forcing Fixed Width）

修复

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

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

Answer 4

以下是我的解决方案。此脚本只是this bug

的变通方法

解决方案的灵感来自：

以上答案
this link

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

Answer 6

可以在此处找到自适应 纯 CSS方法：

http://jsfiddle.net/bennyaarup/5gyp6/

HTML

我添加FB注释代码块一式两份 - 相当于我需要的自适应阶段（数据宽度）的数量。我在CSS中添加了额外的class = .fb-1，.fb-2，.fb-3等等。

<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

我使用媒体查询设置自适应阶段的样式，并显示：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;
}
}

这有点像黑客，但效果很好

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;
}

Answer 8

我有同样的问题（昨天实施了响应性评论，今天它不再起作用了。）

我没有足够的投票数，但上述答案有效。我正在使用facebook插件进行wordpress。我还在页面加载时设置超时以立即获得正确的宽度。

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

Answer 9

这是一个小解决方案..试试吧......

添加此jQuery：

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

Answer 10

希望这会有所帮助：

/* resize facebook comments */
(function(window){
    var dh = null;
    $(window).on("resize",function(){
        if ( dh ) {
            clearTimeout(dh);
        }
        dh = setTimeout(function(){
            var $fbc = $(".fb-comments");
            var $stc = $(".comments-container");
            dh = null;
            if ( $fbc.attr("data-width") != $stc.width() ) {
                $stc.css({height:$stc.height()});
                $fbc.attr("data-width", $stc.width());
                FB.XFBML.parse($stc[0],function(){
                    $stc.css({height:'auto'});
                });
            }
        },300);
    }).trigger("resize");
})(this);

干杯！

Answer 11

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();
  });  
});

Answer 12

在这里添加答案。你真的应该暂停，所以你不会每秒刷新评论数十次。此外，每次触发函数时继续为元素抓取DOM真的不是很好的做法，这应该更有效：

$(function() {
  // cache some selectors so we're not looking up divs over and
  // over and over on resize

  var facebook_comment_resize, 
    comment_resize_timeout,
    $window = $(window),
    $comments_container = $('#comments'),
    $comments = $('.fb-comments');

  var facebook_comment_resize = function() {
    // define a function to get the width of the comment container
    // then set the data-width attribute on the facebook comment div
    $comments.attr("data-width", $comments_container.width());

    // Reinitialize the comments so it can grab the new width from
    // the data element on the comment div
    FB.XFBML.parse($comments_container.get(0));
  }

  // Set a timeout that can clear itself, keeps the comments
  // from refreshing themselves dozens of times during resize
  $window.on('resize', function() {
    clearTimeout( comment_resize_timeout );
    comment_resize_timeout = setTimeout(facebook_comment_resize, 200);
  });

  // Set the initial width on load
  facebook_comment_resize();
});

Answer 13

这是唯一对我有用的解决方案。（你也需要FB根位）原文在此处找到：http://jsfiddle.net/PZD54/4/

        <script>
        setTimeout(function(){
          resizeFacebookComments();
        }, 1000);
        $(window).on('resize', function(){
          resizeFacebookComments();
        });
        function resizeFacebookComments(){
          var src   = $('.fb-comments iframe').attr('src').split('width='),
          width = $('#comments').width();
          $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
        }
      </script>
      <div id="comments">
        <div class="fb-comments" data-href="http://www.url-here.com"></div>
      </div>

Answer 14

我认为css hack现在无法解决我们的问题，这个javascript解决方案解决了我的问题：

 <div id="commentbox"></div>


<script type="text/javascript">    
        $(function () {
            $(window).bind("load", function () {
                var containerwidth = $('#commentbox').width();
                $('#picture_comment').html('<fb:comments ' +
                'href="http://yourlink"' +
                ' width="' + containerwidth + '" numposts="5" ' +
                'colorscheme="light"></fb:comments>');
                FB.XFBML.parse(document.getElementById('commentbox'));
            });
        });
    </script>

基于https://gist.github.com/dineshcooper/2111366

Answer 15

好的，这是我迄今根据蒂莫西的评论所做的。

function resizeFbComment(){

  if (typeof FB === 'undefined')
    return;

  $(".fb-comments").attr("data-width", $(".fb-comments").width());

  FB.XFBML.parse($(".comments")[0]);

}

$(window)
  .load(resizeFbComment)
  .resize(resizeFbComment);

显然，这是一个暂时的黑客攻击。窗口调整大小应该超时。

Answer 16

我尝试了data-width="100%"并为我工作，但是当我调整屏幕大小时，容器保持相同的大小，它没有改变，我尝试使用Ripple插件进行镀铬，它看起来不错但我必须点击或者点击两次进行评论。

Answer 17

.fb-comments, .fb-comments span, .fb-comments iframe {
    min-width: 100% !important;
    max-width: 100% !important;
}

使用新的100％数据宽度。

响应式Facebook评论CSS Hack Broken

17 个答案:

HTML

CSS