Comment rendre le Facebook Like Box réactif?

J’utilise le code boîte de Facebook dans ma barre latérale en collant le code Facebook dans un widget texte. Mon thème est réactif, et je voudrais que la boîte similaire redimensionne correctement. J’ai trouvé ce tutoriel mais il dit que la façon dont il le fait n’est pas “entièrement réactive”, donc je ne savais pas s’il y avait une meilleure façon de le faire.

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


J’ai trouvé cette liste aujourd’hui et cela fonctionne parfaitement: https://gist.github.com/2571173

(Merci à 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; } 

L’exemple de Colin pour moi s’est heurté au bouton similaire. 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.

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

Enveloppez la boîte Like avec un div:

 

et ajoutez ceci à votre fichier css:

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

À compter du 4 août 2015, la boîte de dialog de type natif de Facebook contient un extrait de code réactif disponible sur la page Facebook Developers.

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

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

C’est la meilleure solution au lieu de pirater les CSS.

La réponse que vous recherchez à partir de juin 2013 se trouve ici:

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

Il est accompli en utilisant jQuery pour réécrire le code HTML interne du conteneur parent contenant le widget facebook.

J’espère que cela t’aides!

Aucune des astuces CSS n’a fonctionné pour moi (dans mon cas, la boîte de type fb a été tirée avec “float: right”). Cependant, ce qui a fonctionné sans aucune astuce supplémentaire est une version IFRAME du code du bouton. C’est à dire:

  

(Notez la largeur personnalisée dans le style, et pas besoin d’inclure du javascript supplémentaire.)

J’essayais de faire cela sur Drupal 7 avec le module “fb_likebox” ( https://drupal.org/project/fb_likebox ). Pour qu’il soit réactif. Il s’est avéré que je devais écrire ma propre variante de module Consortingb et séparer l’option de réglage de largeur. (l’option de hauteur par défaut n’avait pas d’importance pour moi). Une fois la largeur supprimée, j’ai ajouté le

dans le fichier fb_likebox.tpl.php.

Voici mon CSS pour le styler:

  `#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;}`