Ответственные комментарии Facebook CSS Hack Broken

Я использовал:

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

Сделать комментарии Facebook отзывчивыми на моем сайте. На днях это прекрасно работало и денди. Сегодня я смотрю, и они изменили свой код. Возможно ли возобновить эту работу?

Ответ 1

Здесь новое решение только для CSS. Это было для проекта, над которым я работаю сегодня (16 июля 2014 года), и он прекрасно работает.

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;

Ответ 2

Я тоже этим занимался. Я включил JS-хак. В основном привязывается к событию изменения размера окна и перерисовывает виджет комментариев при его запуске (использует jquery, если вы хотите, чтобы я мог отправлять сообщения без):

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

В приведенном выше примере .comments находится контейнер, для которого требуется расширить ширину fb-comments. Недостатком этого является то, что при изменении размера окна виджет комментариев повторно инициализируется.

Если вы используете подчеркивание, оберните обработчик изменения размера, используя debounce, чтобы он не загорелся часто.

Ответ 3

Эта проблема теперь исправлена Facebook (Комментарии Плагин теперь принудительно фиксирует ширину)

Вы должны использовать data-width="100%"

Смотрите документацию: https://developers.facebook.com/docs/plugins/comments

Ответ 4

Ниже мое решение. Этот script является лишь обходным путем для этой ошибки

Решение, вдохновленное:

выше ответы
эта ссылка

Код ниже (просто замените .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>

Ответ 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 Plugin

Ответ 6

Адаптивный подход чистый CSS можно найти здесь:

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

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>

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

Немного взломать, но прекрасно работает

Ответ 7

попробуйте использовать этот код Это может быть немного иначе

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

Ответ 8

У меня была такая же проблема (вчера были реализованы отзывчивые комментарии, сегодня они больше не работали).

У меня недостаточно очков для голосования, но приведенный выше ответ работает. Я использую плагин facebook для wordpress. Я также устанавливаю таймаут, когда страница загружается, чтобы сразу получить нужную ширину.

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

Ответ 9

Решение для отказов от Ka. это хорошо, но это может быть более простым и запоминать узлы. Удостоверьтесь, что вы завершаете свои fb-комментарии в каком-то контейнере:

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

Ответ 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);

Ура!

Ответ 11

Вот небольшое решение.. попробуйте...

Добавьте этот jQuery:

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

Ответ 12

Хорошо, это то, что я до сих пор основывал на одном комментарии Тимофея.

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

Очевидно, это временный взлом. Размер окна должен иметь таймаут.

Ответ 13

Добавление к ответам здесь. У вас действительно должен быть тайм-аут, чтобы вы не обновляли комментарии десятками раз в секунду. Кроме того, действительно неудобно продолжать сканирование 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();
});

Ответ 14

Это единственное решение, которое сработало для меня. (Вам также нужен бит корня 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>

Ответ 15

Я думаю, что 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>

base на https://gist.github.com/dineshcooper/2111366

Ответ 16

Я пробовал data-width="100%" и работал у меня, но когда я изменяю размер экрана, контейнер остается того же размера, он не меняется, я пытался использовать плагин Ripple для хром, и он выглядит хорошо, но я должен нажать или щелкнуть дважды, чтобы прокомментировать.

Ответ 17

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

работает с новой 100% шириной данных.