Sensible Facebook Commentaires CSS Hack Cassé

Je me suis fait piquer par cette trop. Je l'ai mis dans un JS hack. Fondamentalement lier à l'événement de redimensionnement de la fenêtre et de redessiner les commentaires widget lorsqu'il se déclenche (utilise jquery si vous voulez je peux poster sans):

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

Dans l'exemple ci-dessus .comments est le récipient dans lequel vous souhaitez que la largeur de la fb-comments de l'étendre à d'. L'inconvénient de cette est que lorsque la fenêtre est redimensionnée les commentaires widget est réinitialisé.

Si vous utilisez le trait de soulignement envelopper le redimensionner à l'aide de gestionnaire de debounce pour l'empêcher de tir à souvent.

Ci-dessous est ma solution. Ce script est juste une solution de contournement pour ce bug

Solution inspirée par:

• réponses ci-dessus,
• ce lien

Code ci-dessous (il suffit de remplacer .comments-area avec votre propre conteneur nom de la classe)

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

Un adaptative pur CSS approche peut être trouvé ici:

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

HTML

- Je ajouter FB commentaire de blocs de code en double - soit le nombre d'adaptation, les étapes de données (largeur) j'ai besoin. - Je ajouter de la catégorie " extra = .fb-1, .fb-2, .fb-3 etc... dont j'ai besoin dans le 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

J'style de l'adaptation des étapes en utilisant les media queries et display:none pour afficher la section des commentaires au champ

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

C'est un peu un hack, mais il fonctionne à merveille

J'ai eu le même problème
(mis en œuvre les observations en réponse, hier, aujourd'hui, il ne marchait plus ).

Je n'ai pas assez de points de vote, mais la réponse ci-dessus fonctionne.
Je suis en utilisant le facebook plugin pour wordpress.
J'ai également définir un délai d'attente lors du chargement de la page pour obtenir la bonne largeur immédiatement.

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

Espère que cela aide:

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

Cheers!

Ok c'est ce que j'ai jusqu'à présent en fonction d'un Timothy commentaire.

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

Évidemment, ce n'est que temporaire hack. Le windows redimensionner devrait avoir un délai d'attente.

C'est la seule solution qui a fonctionné pour moi. (Vous devez le FB de la racine peu trop)
Trouvé Original ici: 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>

J'ai essayé data-width="100%" et a travaillé pour moi, mais quand j'ai redimensionner l'écran le conteneur reste de la même taille, elle ne change pas, j'ai essayé avec une Ondulation de plugin pour chrome et ça a l'air bien mais je dois appuyez ou cliquez deux fois pour commentaire.