Blog astuces web et SEO

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:

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

Voilà, vous avez maintenant un widget commentaires facebook qui s’adapte correctement à votre design.

Enjoy it 😉