Fatal编程技术网

Responsive design 回应Facebook评论CSS黑客破解

responsive-design

Responsive design 回应Facebook评论CSS黑客破解,responsive-design,facebook-comments,Responsive Design,Facebook Comments,我使用的是： .fb-comments, .fb-comments span, .fb-comments iframe[style] { width: 100% !important; } 使Facebook评论在我的网站上响应。就在前几天，这一切都很顺利。今天我看了看，他们已经改变了他们的代码。有可能让它再次工作吗？我也被它咬了一口。我加入了JS黑客。基本上绑定到窗口的resize事件，并在触发时重新绘制comments小部件（如果需要，使用jquery，我可以不发布）： 在上面的示

我使用的是：

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
    width: 100% !important;
}
使Facebook评论在我的网站上响应。就在前几天，这一切都很顺利。今天我看了看，他们已经改变了他们的代码。有可能让它再次工作吗？

我也被它咬了一口。我加入了JS黑客。基本上绑定到窗口的resize事件，并在触发时重新绘制comments小部件（如果需要，使用jquery，我可以不发布）：

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

如果使用下划线，请使用
debounce
对调整大小处理程序进行换行，以防止其频繁触发

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

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

setTimeout(function(){
    $(".fb-comments").attr("data-width", $(".comments-area").width());
     FB.XFBML.parse($(".comments-area")[0]);
}, 1000)
下面是我的解决方案。这个脚本只是一个解决方案

解决方案的灵感来自：

  • 以上答案
下面的代码（只需用您自己的容器类名替换.comments区域）


（功能（$，sr）{
//约翰·汉恩的去抖函数
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce=函数（函数、阈值、execAsap）{
var超时；
返回函数去抖动（）{
var obj=this，args=arguments；
函数延迟（）{
如果（！execAsap）
应用函数（对象，参数）；
超时=空；
};
如果（超时）
clearTimeout（超时）；
否则如果（请尽快执行）
应用函数（对象，参数）；
超时=设置超时（延迟，阈值| | 100）；
};
}
//智能调整大小
jQuery.fn[sr]=函数（fn）{返回fn？this.bind（'resize'，debounce（fn））：this.trigger（sr）；}；
})（jQuery，'smartresize'）；
$（文档）.ready（函数（）{
if（$（“.comments area”）.width（）！=document.getElementsByClassName（“fb comments”）[0].getAttribute（“数据宽度”））{
$（“.fb comments”）.attr（“数据宽度”，$（.comments区域”）.width（）；
}
$（窗口）。smartresize（函数（）{
if（$（“.comments area”）.width（）！=document.getElementsByClassName（“fb comments”）[0].getAttribute（“数据宽度”））{
$（“.fb comments”）.attr（“数据宽度”，$（.comments区域”）.width（）；
FB.XFBML.parse（$（“.comments区域”）[0]）；
}
});
});
Ka的去盎司溶液。这很好，但这可能更简单，应该记住节点。确保将您的fb评论包装在某个容器中：

<div class="comments">
  <div class="fb-comments" data-href="..." data-numposts="5" data-colorscheme="light"></div>
</div>
然后在文档准备就绪且窗口调整大小时调用此函数：

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

  $(window).resize(function() {
    resizeComments();
  });  
});
希望这有助于：

/*调整facebook评论的大小*/
（功能（窗口）{
var-dh=null；
$（窗口）.on（“调整大小”，函数（）{
若有（卫生署）{
清除超时（dh）；
}
dh=设置超时（函数（）{
var$fbc=$（“.fb注释”）；
var$stc=$（“.comments容器”）；
dh=null；
如果（$fbc.attr（“数据宽度”）！=$stc.width（））{
$stc.css（{height:$stc.height（）}）；
$fbc.attr（“数据宽度”，$stc.width（））；
FB.XFBML.parse（$stc[0]，function（））{
$stc.css（{height:'auto'}）；
});
}
},300);
}).触发（“调整大小”）；
})（本条）；
干杯

尝试使用此代码 这可能有点不同

#fbcomments, .fb_iframe_widget, 
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span,
#fbcomments iframe [style]
{
  width: 100% !important;
}
好的，这是我到目前为止根据蒂莫西的一个评论得出的结论

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);
显然，这是一个暂时的黑客行为。窗口大小调整应该有一个超时。

在此处添加答案。你真的应该有一个超时，这样你就不会每秒刷新评论几十次。此外，在每次启动函数时继续对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();
});
这里可以找到一种自适应的纯CSS方法：

HTML

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

<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>
这有点像黑客，但它工作得很好

这里有一个小解决方案。。试试看

添加此jQuery：

$(document).ready(function(){
    $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
});
这是唯一对我有效的解决方案。（您也需要FB root位） 原件可在此处找到：


setTimeout（函数（）{
调整FaceBookComments（）的大小；
}, 1000);
$（窗口）.on（'resize'，function（））{
调整FaceBookComments（）的大小；
});
函数resizeFacebookComments（）{
var src=$（'.fb comments iframe'）.attr（'src'）.split（'width='），
宽度=$（“#注释”）.width（）；
$（'.fb comments iframe'）.attr（'src'，src[0]+'width='+width）；
}
我认为css黑客现在无法解决我们的问题，这个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>


$（函数（）{
$（窗口）。绑定（“加载”，函数（）{
var containerwidth=$（'#commentbox'）.width（）；
$（'picture_comment'）.html（''）；
parse（document.getElementById（'commentbox'）；
});
});
基于将
data width=“100%”
属性添加到
fb comments
元素中。它将容器设置为流体宽度

例：
这似乎是Facebook最近在他们网站上的更新

本期 
<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>

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

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

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

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

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

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

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

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