Comment faire de l'Facebook Comme Zone sensible?

Question

Je suis en utilisant le Facebook comme la boîte de code dans ma barre latérale en collant le Facebook de code dans un widget texte. Mon thème est responsive, et je voudrais obtenir le comme une boîte à redimensionner correctement. J'ai trouvé ce tutoriel , mais il a dit la manière dont il le fait, n'est pas "totalement responsive" donc je ne sais pas si il y a une meilleure façon de le faire.

Answer 1

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

---

J'ai trouvé ce Résumé aujourd'hui et il fonctionne parfaitement: https://gist.github.com/2571173

(Un grand 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;
}

Answer 2

Colin exemple pour moi se sont affrontés avec le bouton j'aime. J'ai donc adapté qu'à la cible Comme une Boîte.

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

Testé dans la plupart des navigateurs modernes.

Answer 3

REMARQUE: Colin solution ne fonctionne pas pour moi, facebook a modifié son balisage. À l'aide de * devrait être plus dans l'avenir.

enveloppez la likebox avec un div:

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

et d'ajouter ceci à votre fichier css:

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

Answer 4

La réponse que vous êtes à la recherche pour les mois de juin, 2013 peut être trouvé ici:

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

Il est réalisé à l'aide de jQuery pour réécrire l'intérieur HTML du conteneur parent qui détient l'facebook widget.

Espérons que cette aide!

Answer 5

Aucun des css astuce a fonctionné pour moi (dans mon cas, le fb-like box a été tiré à droite avec "float:right"). Cependant, ce qui a fonctionné sans ajouter astuces est un IFRAME version du code du bouton. I. e.:

<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>

(Note personnalisé largeur dans le style, et pas besoin d'inclure d'autres javascript.)