Hi all,
Le responsive design est devenu un élément important lors de la création d’un site / application web.
Malheureusement, facebook, ne fournit pas (en tout cas pour le moment) des widget responsive avec une largeur fluide (en pourcentage) pour permettre l’adaptation du widget à la largeur de la largeur de l’écran utilisé pour afficher le site et en fonction du terminal utilisé (smartphone, tablette, Desktop,…etc).
Voici donc une petite astuce pour forcer le widget facebook comments à devenir responsive:
1 – D’abord il faut supprimer la valeur data-width ( si vous utiliser le HTML5) ou la valeur width ( si vous utilisez le XFBML).
exemple:
1 2 |
<div class="fb-comments" data-href="http://example.com/comments" data-width="" data-numposts="10" data-colorscheme="light"></div> <fb:comments href="http://example.com/comments" width="" numposts="10" colorscheme="light"></fb:comments> |
2 – Ensuite il suffit d’ajouter ce bout de CSS:
1 |
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;} |
Voilà, vous avez maintenant un widget commentaires facebook qui s’adapte correctement à votre design.
Enjoy it 😉
Catégorie: CSS, Développement frontend, Diverses Astuces, facebook, optimisation web.
9 commentaires
Tain… des lustres que je cherche la soluce… Franchement, UN GRAND MERCI.
merci a toi j’aime bien
merci pour ce widget, il est excellent et très pratique
Excellent ! J’étais sur la bonne voie avec le data-with !
Mais la suite coinçais un peu …
Merci encore, Amicalement, Yann.
merci pour ce widget fort indispensable . Chaque site doit être responsive désormais pour être plus efficace.
Excellent widget bien utile et efficace. Merci pour l’astuce
Merci pour cette info, j’en avais besoin 🙂
Holalalala, grand merci, je vais enfin pouvoir mettre mes boutons de partage correctement !!!! Mille fois merci !!!!
Il le faut car aujourd’hui, le responsive design est devenu un must pour tout site web voulant avoir1 belle User experience.