web-dev-qa-db-fra.com

Comment rendre le widget de commentaires Facebook une largeur fluide?

Est-il possible de donner au widget de commentaires de Facebook une largeur fluide? Leur documentation affiche un champ de largeur pour fb:comments xfbml ou iframe, spécifié comme suit:

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

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

cssfacebookcommentsfacebook-social-pluginsxfbml
35
at.

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

Alan votre solution fonctionnait bien, mais il semble 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;
}
54
AJ Savino

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;}
31
Danka Stawarz

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

Aucune des solutions CSS ne fonctionnait pour moi depuis mars 2014. Il semble que Facebook ait modifié le plug-in pour définir une largeur sur un conteneur dans iFrame que vous ne pouvez pas remplacer par CSS.

Après avoir creusé un peu, j'ai remarqué que la largeur des commentaires est en fait contrôlée par le dernier paramètre de l'iframe src width=XXX. Dans cet esprit, voici comment j'ai résolu le problème:

// 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 sur laquelle vous souhaitez que le plug-in de commentaires s'étende. Changez cela en ce que vous voulez et ce code devrait fonctionner pour vous.

J'utilise un délai d'attente parce que je ne pouvais pas le déclencher une fois que l'iframe était chargé. Toute aide à ce sujet serait appréciée, mais la temporisation fait le travail.

EDIT: Cette solution provoque la rupture du bouton Précédent. J'essaie cette solution maintenant et cela semble être mieux: https://stackoverflow.com/a/22257586/394788

16
Ryan

Ce problème a été traité par Facebook. Vous pouvez maintenant ajouter data-width="100%" ou définir l’option width à100% et supprimer tous les hacks js fous selon le cas!

11
blues_driven

insérez ce code avant d’initialiser le plugin facebook et vous aurez des commentaires fluides fb :) :) :)

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

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

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

Je souhaite généralement éviter d'utiliser le sélecteur universel pour de meilleures performances. Vous devriez pouvoir obtenir le même résultat avec

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

Pourrait probablement être amélioré si vous vérifiez les sélecteurs de Facebook ...

4
Jesper

ressemble à facebook a mis à jour sa documentation..vous pouvez maintenant utiliser data-width = "100%" ou width = "100%"

https://developers.facebook.com/docs/plugins/comments/

2
thirdtiu

Je ne peux pas encore commenter parce que ma réputation n'est pas encore assez élevée, mais il existe une solution à ce problème à compter du 21 décembre 2014.

pour que cela fonctionne en CSS:

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

vous DEVEZ avoir la section data-width = "" définie à 100% dans le code du plug-in FB i.e

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

exemple de travail avec fluide: http: www.unitedbiker.org

J'espère que cela aidera tout le monde. L'idée est de remplacer le style iframe par 100% de l'élément parent et de définir le plug-in FB sur 100% de l'iframe. C'était mon travail autour.

2
dav3ydark007

Après avoir longuement débattu avec cela pendant un bon bout de temps, j'ai trouvé un petit détail qui devrait vous aider à déterminer laquelle des astuces CSS sur cette page vous aidera pour votre site/version/année particulier du plugin de commentaire de facebook. Regardez votre site dans un navigateur et inspectez les éléments autour du plugin de commentaires facebook. Vous devriez trouver un extrait que vous avez ajouté et qui est maintenant embelli par le widget javascript de Facebook qui ressemble à ceci:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

prenez note de la partie qui dit:

class="<whatever class your version is using>"

c'est la classe que vous voulez utiliser - donc dans l'exemple ci-dessus, vous voudriez ajouter les styles suivants:

<style>
    .fb_iframe_widget,
    .fb_iframe_widget iframe[style],
    .fb_iframe_widget span[style],
    .fb_iframe_widget *  {
        width: 100% !important;
    }
</style>
1
TamaraJean

Je pense que cela fonctionnera pour tout le monde. Travaille pour moi le 26 décembre 2013 à http://eddie11.com/dj-eddie-talks/

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

Aucun des éléments ci-dessous n'a fonctionné pour moi, mais je l'ai laissé de toute façon.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,
1
e11world

Je sais que c'est une vieille question, mais cela peut peut-être aider quelqu'un.

Vous pouvez utiliser le code suivant pour fluidifier vos commentaires



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

Peut vérifier le code ici, parce que la fonction pre ici supprime certaines choses. Je suis nouveau ici. Cordialement

Facebook Comments Fluid

1
Quimbo

Cela a fonctionné pour moi, mais je dois ajouter une balise span pour fonctionner correctement:

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

passé quelque temps à enquêter sur cette question. Bien que FB propose de spécifier une largeur absolue en pixels, il semble que cela fonctionne si vous le définissez simplement sur '100%'. Notez la largeur de données ci-dessous.

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

Ouais ouais, c'est facile, pas de callbacks onresize pas de modifications iframe src.

1
Boris Mossounov

Si le code de votre plug-in de commentaires Facebook ressemble à (XFBML):

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

Ensuite, le CSS suivant devrait faire le travail:

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe {
     width: 100% !important;
}
0
ramonztro

C'est la seule chose qui a fonctionné correctement pour moi!

$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $(".fb-comments").`enter code here`parent().width();

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

Pas besoin de remplacer le css, utilisez data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>
0
Murhaf Sousli
.fb-comments, .fb-comments iframe[style],  .fb-comments > span {width: 100% !important;}
0
Leo