Time traveling​

Responsive : Comment rendre la Box Facebook Responsive



On sort un petit peu de la ligne éditoriale classique du design, graphisme pour se relancer dans les éléments pour les réseaux sociaux et le design responsive.

Il arrive quand on crée des sites, d’avoir des clients qui souhaitent avoir une like-box Facebook. Chose tout à fait ordinaire. Cependant quand on regarde de plus près le code, celui-ci est inclus dans une  iframe qui ne permet pas de changer la hauteur (height) et la largeur (292px de base). Le problème est le suivant, quand on créé un site en design responsive, la box Facebook, elle, ne se redimensionne pas. Elles reste figée à sa taille définée. Logique.

facebook responsive Responsive : Comment rendre la Box Facebook Responsive

Comment rendre la Box Facebook Responsive ?

La solution est très simple mais on ne peux pas l’inventer si on ne connait pas cette petite astuce qui se règle tout simplement en CSS. Vous avez juste à inclure dans votre feuille de style les petites lignes CSS suivantes.

/* Cet élément block le script injecté dans l'iframe. On le cache */
#fb-root { display: none; } 

/* on redéfini la taille du contenu */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }

Voila donc, c’est tout simplement grâce à cela que vous allez avoir une belle box responsive. Ce bout de code est vraiment utile car comme vous le savez, les sites responsives sont de plus en plus présents pour pouvoir être visibles sur tous les supports, qu’ils soient mobiles, tablettes ou autres. Un peu comme ce blog icon smile Responsive : Comment rendre la Box Facebook Responsive

regardez, si je la met dans cet article elle prendra toute la largeur ! Et vu qu’elle est responsive, comme le blog, elle s’adaptera dans toute la largeur de l’article icon biggrin Responsive : Comment rendre la Box Facebook Responsive

Si cet article vous intéresse, vous serez aussi réceptif sur WEB2DAY 2012 – Astuces responsive design par Andreas Bovens ou encore 7 template design responsive gratuits


Partagez cet article design à votre entourage !


Auteur :

Olyos : Agence Web à Nantes à taille humaine. -Création de sites web et de stratégie digitale.- « Vous avez une activité, une idée et vous souhaitez créer votre identité ? Nous prenons le temps de comprendre votre demande, votre besoin mais surtout celui de vos clients. »

Suivez-nous !


Poster un commentaire

Quelques règles à respecter pour poster un commentaire sur olybop.info :
  1. On reste courtois et poli envers les autres auteurs de commentaires.
  2. On fait attention à l'orthographe. Les navigateurs disposent d'un correcteur. Merci
  3. Pour une remarque concernant le contenu d'un article (fautes d'orthographes, informations erronées...). Contactez-nous exclusivement via ce formulaire
Les commentaires ne respectant pas ces règles seront supprimés et bannis sans préavis. Merci de votre compréhension.
  • cecile

    Merci pour cet article très intéressant !!
    Est-il aussi possible de rendre la CommentBox responsive ? Car dans les options -Get Code- on a pas la possibilité de l’avoir en iframe… seulement html5 et xfmbl…
    Merci pour votre réponse
    Cécile