web-dev-qa-db-fra.com

Comment rendre Facebook Like Box réactif?

J'utilise Facebook comme code de case dans mon barre latérale en collant le code Facebook dans un widget texte. Mon thème est réactif et je voudrais obtenir la boîte similaire redimensionner correctement. J'ai trouvé ceci tutorial mais il dit que la façon dont il le fait n'est pas "totalement réactif", donc je ne savais pas s'il y avait une meilleure façon de le faire.

csswidgetresponsive-design
67
Rick Smith

REMARQUE: cette réponse est obsolète. Voir la réponse du wiki de la communauté ci-dessous pour une solution à jour.

J'ai trouvé ce Gist aujourd'hui et cela fonctionne parfaitement: https://Gist.github.com/257117

(Merci beaucoup à https://Gist.github.com/smeranda )

/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

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

L'exemple de Colin pour moi s'est heurté au bouton "J'aime". Je l'ai donc adapté pour ne cibler que la Like Box.

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

Testé dans la plupart des navigateurs modernes.

28
stevenw00

NOTE: La solution de Colin n'a pas fonctionné pour moi. Facebook peut avoir changé son balisage. En utilisant * devrait être plus durable.

Enveloppez la boîte Like avec un div:

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

et ajoutez ceci à votre fichier css:

#likebox-wrapper * {
   width: 100% !important;
}
26
amirnissim

À compter du 4 août 2015, les facebook like box de Facebook ont ​​un extrait de code réactif disponible sur la page Développeurs de Facebook.

Vous pouvez générer votre Facebook likebox sensible ici

https://developers.facebook.com/docs/plugins/page-plugin

C’est la meilleure solution de tous les temps plutôt que de pirater CSS.

7
Clain Dsilva

La réponse que vous cherchez en juin 2013 se trouve ici:

https://Gist.github.com/dineshcooper/2111366

C'est fait en utilisant jQuery pour réécrire le code HTML interne du conteneur parent qui contient le widget facebook.

J'espère que cela t'aides!

3
Ryan H

Aucune astuce css n'a fonctionné pour moi (dans mon cas, la boîte fb-like était tirée à droite avec "float: right"). Cependant, ce qui a fonctionné sans astuces supplémentaires est une version IFRAME du code du bouton. C'est à dire.:

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 
        allowTransparency="true">
</iframe>

(Notez la largeur personnalisée dans le style, et il n'est pas nécessaire d'inclure du javascript supplémentaire.)

0
Vlad

J'essayais de le faire sur Drupal 7 avec le module "fb_likebox" ( https://drupal.org/project/fb_likebox ). Il me semble que je devais écrire mon propre module Contrib Variation et supprimer l’option de réglage de la largeur (l'option de hauteur par défaut importait peu pour moi). Après avoir supprimé la largeur, j'ai ajouté le <div id="likebox-wrapper"> dans le fichier fb_likebox.tpl.php.

Voici mon CSS pour le style:

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`
0
morleman