Facebook & WordPress – Intégrer une fanbox pour vos fans

Comment insérer une fanbox ou likebox sous WordPress ? Facebook est un vecteur de trafic et le nombre de fans détient une place importante pour développer votre fibre sociale. Ce tutoriel vous montre comment intégrer cette boite à fan comme sur WordPress Channel.

Étape n°1 – Obtenir le code votre Facebook Fanbox

Rendez-vous dans un premier temps sur Facebook pour récupérer l’URL de votre page. Si vous ne disposez pas d’une adresse personnalisée, je vous recommande d’en obtenir une en cliquant sur le bouton Modifier la Page.

Capture d'écran - Administrer page Facebook
Modifier votre page Facebook pour booster votre positionnement

Basculez ensuite dans Informations générales sur la gauche, puis remarquez la présence d’un lien vous invitant à créer un nom d’utilisateur pour votre page fan.

Capture d'écran - Création d'un nom d'utilisateur
URL personnalisée : http://facebook.com/wpchannel

Suivez l’assistant et sauvegarder les modifications.

Une fois l’URL obtenue, rendez-vous sur le site des développeurs pour créer la fan box.

Indiquez l’URL de votre page dans le champ prévu à cet effet puis modifiez les différents réglages :

  • Width : largeur de votre fan box (292 pixels par défaut) ;
  • Height  : hauteur de votre fan (laissez vide pour un ajustement automatique) ;
  • Color scheme : vous avez le choix entre un style light (le plus courant) ou dark (très peu répandu) ;
  • Show Faces : indispensable pour afficher les amis qui ont déjà aimé la page. Utile dans le sens où l’internaute connecté sur Facebook verra les visages de ces amis et sera donc davantage inciter à cliquer ;
  • Border Color : indiquez une valeur hexadécimale pour changer la couleur de la bordure. Par exemple : #DDDDDD ;
  • Stream : afficher ou non le flux Facebook de la page fan ;
  • Header : afficher ou non la célèbre phrase Retrouvez-nous sur Facebook ;
Capture d'écran - Assistant de création d'une like box
Modifiez les options de configuration votre fan box

Une fois que vous serez satisfait de vos réglages – notez au passage la présence d’un aperçu temps réel sur le côté droit, cliquez sur Get Code.

Un pop-up s’affiche vous proposant 3 types de code différents : HTML5, XFBML ou iFrame.

Capture d'écran - Facebook Like iFrame
Le code iFrame est le plus simple à utiliser

La version iFrame est la plus simple à insérer car il n’y a qu’un seul bloc à coller – de même, elle me semble plus légère en termes de poids.

Voici un exemple pour WordPress Channel :

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fwpchannel&amp;width=260&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23DDDDDD&amp;stream=false&amp;header=true&amp;appId=215550098468187" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:290px;" allowTransparency="true"></iframe>

Si vous disposez d’une application Facebook, il est nécessaire d’indiquer à partir de la déroulante l’application correspondante.

Étape n°2 – Insertion de la Fanbox sous WordPress

#1 – Utilisation d’un widget

Connectez-vous au back office de WordPress puis déroulez Apparence puis Widgets.

Glissez / déposez un widget texte dans la sidebar de votre choix.

Capture d'écran - Widget texte sous WordPress
Utilisation d’un widget texte pour votre boite à fan

Collez le code obtenu sur Facebook.

Capture d'écran - Copie du code iFrame Facebook
Insérez votre code iFrame dans la zone vide du widget

N’indiquez pas de titre – simple avis personnel, puis faites Enregistrer.

#2 – Insertion dans le thème WordPress

Si votre thème ne dispose pas d’une sidebar ou que vous préférez directement coder la fanbox dans votre thème, il nous faut tout simplement choisir l’emplacement où l’afficher.

Cette décision étant de votre ressort, voici quelques fichiers susceptibles de l’accueillir :

  • sidebar.php : ce fichier concerne les colonnes latérales du site, un emplacement de premier choix. Vérifiez toutefois que la fonction de widgetisation n’est pas présente – auquel cas, préférez l’usage d’un widget qui est plus simple à maintenir ;
  • footer.php : ce fichier abrite votre pied de page, un emplacement commode mais relativement peu lu par les lecteurs. Collez le code avant la fermeture de la balise </body> ou mieux avant <?php wp_footer(); ?> ;

Retournez sur votre site pour admirer le résultat : il ne vous reste plus qu’à inviter tous vos amis pour liker votre page Facebook !

Crédits photo : Laughing Squid