Comment rendre le widget de commentaires Facebook une largeur fluide?

Question

Est-il possible de donner au widget de commentaires de Facebook une largeur fluide? Leur documentation montre un champ de largeur pour le fb:comments xfbml ou iframe qui est spécifié en tant que:

• width - la largeur du plugin en pixels. Largeur minimale recommandée: 400px.

Alors peut-être que ce n'est pas possible ...

Answer 1

Alan votre solution fonctionnait bien, mais il semblerait que Facebook ait mis à jour son plugin et rompu le style. Je l'ai fait fonctionner à nouveau en utilisant le sélecteur universel:

 .fb-comments, .fb-comments * {
    width:100% !important;
}
 

Answer 2

J'ai trouvé une solution en utilisant CSS. L'inspiration est venue de cet article http://css-tricks.com/2708-override-inline-styles-with-css/

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

Answer 3

Probablement le prochain changement de FB et cette fois cela fonctionne mieux:

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

Answer 4

Aucun des CSS solutions a fonctionné pour moi en Mars 2014. Il semble que Facebook a changé le plugin maintenant définir une largeur d'un conteneur à l'intérieur de l'iFrame qui vous êtes incapable de passer outre avec les CSS.

Après un peu de creuser, j'ai remarqué que la largeur des commentaires sont en réalité contrôlée par le dernier param de l'iframe src width=XXX. Avec cela à l'esprit, voici comment je l'ai résolu:

// ON PAGE LOAD
setTimeout(function(){
  resizeFacebookComments();
}, 1000);

// ON PAGE RESIZE
$(window).on('resize', function(){
  resizeFacebookComments();
});

function resizeFacebookComments(){
  var src   = $('.fb-comments iframe').attr('src').split('width='),
      width = $('#container').width();

  $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}

#container est la largeur de votre conteneur que vous voulez que le module de commentaires pour étirer pour s'adapter à l'intérieur. Modifier ce que vous avez besoin qu'il soit et que ce code devrait fonctionner pour vous.

Je suis à l'aide d'un délai d'attente parce que je n'étais pas en mesure de l'obtenir à feu une fois que l'iframe a été chargé. Toute aide serait appréciée, mais le délai d'attente est à la hauteur.

EDIT: Cette solution provoque le bouton de retour à la pause. Je vais essayer cette solution aujourd'hui et il semble être mieux: http://stackoverflow.com/a/22257586/394788

Answer 5

Je pense avoir une solution qui améliore un peu la réponse de Ryan du 5 mars.

Plutôt que de recharger l'iframe Facebook après un certain délai, vous pouvez procéder comme suit.

Insérez une balise de commentaires Facebook classique, mais ajoutez un bit supplémentaire à la classe, de sorte que Facebook ne la détecte pas, mais vous le pouvez.

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

Ajoutez ensuite un JS qui récupère cette division, la modifie avec la largeur souhaitée, puis déclenche l’analyseur de Facebook.

 var foundFBComs = false;

$('.fb-comments-unloaded').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== 'undefined') {
    FB.XFBML.parse();
}