mar

Ajouter un bouton Facebook "j’aime" sur votre site web

par GiZmo | vu 2 272 fois

Ajouter un bouton Facebook, blog, bouton j'aime, bouton like, bouton like facebook en français, code facebook, facebook, intégration iframe, intégration XFBML, intégrer bouton facebook, plugin facebook, promotion virale, template, widget wordpress, WordPress

Ajouter un bouton Facebook "j’aime" sur votre site

Facebook met à disposition du grand public le code permettant d’intégrer un bouton « j’aime » au dessus ou à côté d’un article de n’importe quel site ou blog.
Voici le tuto pour récupérer le code que vous pourrez directement intégrer dans votre template.
Concrètement, lorsqu’un de vos visiteurs cliquera sur le bouton « j’aime » d’un de vos articles, cela apparaitra directement dans son profil Facebook s’il est loggué.
L’intérêt étant donc de faire buzzer au maximum votre article à la sauce promotion virale.

L’intérêt de ce bouton like est qu’il est très simple à mettre en place. Avec un clic un internaute (qui sera logué sur son compte facebook) pourra aimer l’un de vos articles et le faire savoir à ses amis sur facebook. Un système de notation classique, sauf que dans ce cas c’est social, donc plus proche de la recommandation.

Alors pour intégrer le bouton « like » sur votre blog rien de plus simple il suffit d’aller sur cette page et de choisir ses options (affichage d’un texte avec le nom des personnes, leur photo, le mot à afficher : like ou recommend, la police à utiliser et le thème du bouton : couleur claire ou foncée).

Exemple d’intégration avec iframe :

<iframe src= »http://www.facebook.com/plugins/like.php
?href=http%3A%2F%2Fwww.winastuce.com&layout=standard&
show_faces=false&width=450&action=like&
colorscheme=light&height=80″>http://www.facebook.com
/plugins/like.php?href=http%3A%2F%2Fwww.winastuce.com&
layout=standard&show_faces=false&width=450&
action=like&colorscheme=light&height=80</a>
» scrolling= »no » frameborder= »0″ style= »border:none;
overflow:hidden; width:450px; height:80px; »
allowTransparency= »true »></iframe>

Exemple d’intégration avec iframe pour WordPress :
Pour insérer ce code sur un blog de type wordpress, il suffit de remplacer l’adresse :
http://www.winastuce.com par la fonction qui donne l’url de la page voulue
<?php echo urlencode(get_permalink($post->ID)); ?> ou avec un <?php the_permalink(); ?>.
Pour avoir le bouton en français, il faut rajouter locale=fr_FR après like.php…

<iframe src= »http://www.facebook.com/plugins/like.php
?locale=fr_FR?href=<?php the_permalink(); ?>&
layout=standard&show_faces=false&width=450&
action=like&colorscheme=light&height=80″
scrolling= »no » frameborder= »0″ style= »border:none;
overflow:hidden; width:450px; height:80px; »
allowTransparency= »true »></iframe>

Pour le rendre dynamique sur votre blog (wordpress) il faut l’intégrer dans le fichier single.php dans votre thème et surtout faire un modification sur l’url qui devra être comme vu précédemment avec la fonction :
<?php echo urlencode(get_permalink($post->ID)); ?> ou avec <?php the_permalink(); ?>.

Exemple d’intégration avec XFBML :

<script src= »<a href= »http://connect.facebook.net/fr_FR/all.js
#xfbml=1"></script><fb:like href= »http://www.winastuce.com »
show_faces= »true » width= »450″></fb:like>

Tous les nouveaux plugins proposés par Facebook sont sur cette page.
Attention toutefois aux problèmes de ralentissement car les plugins Facebook ralentissent le chargement des pages de plusieurs secondes…

Pour les plus fénéants d’entre-vous il y aussi la solution du widget WordPress qui ajoute automatiquement un bouton Facebook Like en haut et/ou en bas des post, sans necessiter de programmation ni de copier/coller:
Voici le lien direct vers la page de recherche de plugin WordPress pour le bouton “j’aime” de Facebook.