Rendre "responsive" le widget facebook commentaires - Blog astuces web et SEOBlog astuces web et SEO

Rendre « responsive » le widget facebook commentaires Par Oussama | Le 24/01/2014

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:

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

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:

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}

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 😉

Merci d'évaluer l'article: Rendre "responsive" le widget facebook commentaires

Il n'y a pas encore d'avis. Soyez le premier à évaluer cet article.