Est-il possible de définir une largeur fluide pour les plugins sociaux de Facebook?

Question

Je développe un site autour du concept de "responsive design", mais les plugins sociaux de Facebook ont une largeur statique et "cassent" la mise en page quand elle est redimensionnée.

À l’aide de requêtes multimédias, j’ai configuré les plugins pour qu’ils se cachent dans les navigateurs à basse résolution (mobile, etc.). Cependant, sur les navigateurs de bureau, lorsque la fenêtre du navigateur est redimensionnée, mais pas trop petite pour masquer les plug-ins, ils se détachent de la présentation.

Un moyen de définir une largeur fluide pour les plugins sociaux de Facebook?

Answer 1

Aucune de ces méthodes n'a fonctionné, mais en utilisant cette idée, les éléments suivants ont fonctionné pour moi:

 .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    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

Le bon fonctionnement de réponse est une combinaison de choses que j'ai trouvé ici. Mikel réponse est un bon début:

Facebook les Développeurs de la Plateforme de lien

Cela en dit:

Nous avons poussé un correctif pour cela. À partir de maintenant, vous pouvez spécifier la largeur 100% (par exemple data-width="100%") pour obtenir une mise en page fluide. Docs sont mise à jour: https://developers.facebook.com/docs/plugins/comments Merci pour votre patience.

Mais... Cela va charger la largeur de ce qui est disponible pour le plugin au temps de chargement. Lorsque vous redimensionnez votre page, elle restera la même largeur qu'il avait lors du chargement de la page. Pour corriger ceci et de faire un vrai réactif version de Facebook Social Plugin - Ajouter la ligne suivante dans votre CSS:

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

Cela va entraîner le plugin pour le redimensionner à l'espace disponible que vous redimensionnez la fenêtre.

Answer 4

J'ai réussi à le faire fonctionner en utilisant ce code:

 .fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;

}
 

parce que dans mon fichier html, j'ai ceci:

 <div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>
 

Astuce: Vous devriez changer votre css en fonction de la classe div.

Answer 5

Bien que c'est une vieille question, c'est aujourd'hui le premier résultat Google pour "facebook commentaire plugin responsive" afin qu'il reste pertinent.

Les solutions de contournement dans les autres réponses ne sont plus nécessaires, comme FB ont récemment (Mai 2014) fixée à leur fin.

À partir de https://developers.facebook.com/x/bugs/256568534516879/:

Nous avons poussé un correctif pour cela. À partir de maintenant, vous pouvez spécifier la largeur 100% (par exemple data-width="100%") pour obtenir une mise en page fluide. Docs sont mise à jour: https://developers.facebook.com/docs/plugins/comments Merci pour votre patience.

Alors maintenant, vous pouvez simplement mettre à jour votre code HTML, par exemple

<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>

Et n'avez pas besoin d'un CSS solutions de contournement.

Edit: cela va créer le plugin pour adapter la largeur de l'espace disponible au moment du chargement. Lorsque vous redimensionnez la fenêtre du navigateur, le plugin va rester à l'largeur initiale. Pour la rendre vraie réactif ajouter ceci dans votre CSS:

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

Cela va entraîner le plugin pour s'adapter à l'espace disponible lorsque vous redimensionnez le navigateur