23
AVR

Comment mettre en place le bouton "J'aime" de Facebook sur son site

Publié le 23/04/10 à 07h41 par DJo

Lors de la conférence développeur Facebook (f8), de nouveaux widgets sociaux ont été annoncés. Leur objectif est de s'intégrer très facilement sur nos sites pour prolonger l'expérience Facebook.

Boutons J'aime de Facebook

Le bouton "J'aime" est relativement intéressant, car il peut être mis en place en quelques minutes à l'aide d'une iFrame et permet de faire un peu de promotion pour vos articles/sites sur Facebook.

Le bouton vous permettra de savoir qui a apprécié vos articles, et laissera une trace discrète sur le mur de l'utilisateur:

Traces boutons j'aime sur FB

Maintenant, passons à la pratique !

 

Générer le code de votre bouton

Première chose à faire, vous rendre sur la page dédiée au bouton "J'aime": Like Button

Bouton J'aime Facebook

Remplissez tous les champs:

URL to Like: L'URL à prmouvoir (Nous le ferons dynamiquement en fonction de la page du site).

Send Button: Cochez si vous voulez afficher en plus du "J'aime", un bouton "Envoyer" pour que vos visiteurs puissent partager votre page directement en message privé à leurs amis.

Layout Style:

  • Standard: Avec les noms des personnes qui aiment
  • Button_count: Un simple compteur du nombre de Like
  • box_count: Une box verticale affichant le nombre de like et les boutons en dessous (Cf le screen du dessus)

Show Faces: Afficher ou non les photos des gens qui aiment votre lien.

Width: La largeur de l'iFrame

Verb to display: Afficher un bouton "J'aime" ou "Recommander".

Font: La police d'écriture de votre iFrame

Color Scheme: Light si votre fond est plutôt clair, sinon dark si le fond est sombre.

Bouton J'aime Facebook: Récupération du code

Vous obtiendrez deux types de code:

  • En mode iFrame (Ce que nous utiliserons)  MAJ: La version iFrame n'est plus disponible.
  • En mode HTML5: Ce que nous mettrons en place.
  • En mode XFML, qui requiert l'utilisation de l'API Javascript Facebook: Idéal pour les applis FB par exemple.

Si vous disposez d'une application Facebook associée à votre site, sélectionnez là dans la liste.

 

Insérer le code dans votre site

Vous n'avez plus qu'à insérer le code de votre bouton sur dans votre site.

Mettez l'iframe dans une div sur laquelle vous appliquerez un height fixe, car par défaut la hauteur de l'iFrame est assez importante...

Voici un exemple de mise en place du code sur tous vos articles.

Ce code est à mettre après votre balise <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Et enfin le code du widget à placer où vous souhaitez sur votre page:

<div class="fb-like" data-href="http://www.lafermeduweb.net" data-send="true" data-layout="box_count" data-width="100" data-show-faces="true" data-font="arial"></div>

Remplacez le lien lafermeduweb.net par celui de votre page (En PHP par exemple).

 

C'est super facile à mettre en place et ça peut faire un peu de promo à votre site, donc pourquoi pas !

Le bouton a été mis en place sur les articles de la Ferme du Web, tous à vos "J'aime" !

Baraguiné par le 23/04/10 à 09h48
Tu as fais une erreur de frappe, regarde la solution ==>
Baraguiné par le 23/04/10 à 09h50
c'est < ? et non < ;
Désolé pour le post avant
Baraguiné par le 23/04/10 à 09h52
Yep yep : alors moi j'ai bien réussi à mettre en place le bouton avec l'iFrame, mais j'arrive pas à bien comprendre l'utilisation de XFBML et de l'API SDK...

Aurais-tu des exemples ou tutos plus compréhensibles que la doc Facebook ???
Baraguiné par DJo le 23/04/10 à 10h00
DJo sur La Ferme du Web
C'est pas une faute de frappe, c'est le Hightlighter JS qui met un ; en plus je ne sais pas pourquoi ...
Baraguiné par ipatate le 23/04/10 à 10h36
ipatate via Twitter
Nickel du coup je l'ai mis sur un de mes sites...
Baraguiné par kwayb le 23/04/10 à 10h51
kwayb via Twitter
@Baraguiné : Pour le bouton avec XFBML et donc la bulle de commentaire j'ai fait une mini explication ici :
http://www.kwayb.com/facebook-ajouter-bouton-jaime-commentaire-790.html
Baraguiné par le 23/04/10 à 11h00
@kwayb : super !! En fait, j'avais pas compris le coup de l'ID de l'app et qu'il fallait "créer une application" sur le site de dév de Facebook.

Merci
Baraguiné par rosemadeleines le 23/04/10 à 15h42
rosemadeleines via Twitter
Je suis pas une callé dans le domaine.., mais j'ai quelques connaissances... la je me demandais si on peut l'ajouter sur un blog Blogger. J'ai essayé mais je n'y arrive pas!!
Baraguiné par DJo le 23/04/10 à 16h07
DJo sur La Ferme du Web
Est-ce que tu as accès aux sources sur Blogger ?
Je ne penses pas, sauf si tu peux mettre le code iframe à la fin de ton article, je ne connais pas.
Baraguiné par le 23/04/10 à 16h23
Dit moi, y a t-il un moyen d'avoir un suivi sur le nombre de personne qui ont cliqué sur "j'aime" sans devoir passer sur le site? Par exemple depuis facebook?
Baraguiné par didus le 26/04/10 à 13h33
didus sur La Ferme du Web
J'aime bien le concept, j'ai essayé de l'intégrer sur mon site mais mon fond est noir et j'ai un gros rectangle blanc qui apparait à la suite.
???
Baraguiné par didus le 27/04/10 à 12h03
didus sur La Ferme du Web
Finalement j'y suis arrivé en modifiant width:100px et height:20px le résultat sur mon site http://didierthevenin.free.fr
Merci à la Ferme pour toutes ces astuces
Baraguiné par minipipo1 le 28/04/10 à 11h14
minipipo1 sur La Ferme du Web
Mais, un iFrame, c'est invalide non ?
Baraguiné par le 28/04/10 à 12h00
Comment on fait pour faire le systeme de commentaire par identification facebook sur un site.
Un tuto ? un lien ?

Merci
Baraguiné par didus le 28/04/10 à 16h58
didus sur La Ferme du Web
REPONSE:
Baraguiné par didus le 28/04/10 à 17h00
Baraguiné par gtulian le 03/05/10 à 05h47
gtulian sur La Ferme du Web
J'ai réussi à mettre en place le bouton mais sur ma page FB s'affiche le meta titre et pas les différentes pages dont j'ai cliquait "j'aime".

Comment faire pour que le bouton affiche les différents pages de mon site sur le mur de l'utilisateur et non juste la page d'accueil et le titre du meta?
Baraguiné par le 10/05/10 à 09h22
OK pour mettre le Bouton j'aime
mais comment faire apparaitre le bouton "Je n'aime plus" ?
Baraguiné par le 23/08/10 à 19h02
salut moi j'ai un jeu du réseaux mamafia pour ceux qui connaise voila moi aussi j'aimerais bien mettre un j'aime facebook sur ma page d'acceuil est c'est impossible avez vous une solution?
Baraguiné par le 23/09/10 à 14h37
Baraguiné par le 15/01/11 à 22h53
slt a tou
Baraguiné par le 26/02/11 à 13h36
merçi pour ce site
Baraguiné par le 26/02/11 à 13h51
bonjour, je n'ai pas bien saisi quelle URL entrer dans le générateur du bouton, pour que l'adresse change. Je souhaite ajouter le bouton Like à la fin de chacun de mes articles sur mon blog blogger.
Si je n'entre aucune URL, je me retrouve avec un compteur à plus de 20 000. C'est amusant?mais bon.
Merci si vous pouvez me donner l'astuce.
Baraguiné par le 20/08/11 à 10h45
bonjour
j'ai réussi à intégrer votre code sur un site mais j'ai un message quand je clique sur "j'aime" depuis le site... ça met :
vous aimez ça : erreur
et si je clique sur "erreur" voilà le message qui s'ouvre :
"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https://developers.facebook.com/tools/lint/) and fixing any errors."
pouvez vous m'aider afin de rectifier ce pb ???? merci
Baraguiné par le 18/12/11 à 09h15
Ca ne marche pas pour moi. Je dois certainement faire une erreur. Pouvez vous me dire où placer ce code dans mon site ? (précisement, je maitrise peu le language HTML).
Sur facebook, ils disent de placer le code après la balise body, mais ca ne fonctionne pas.
Je suis sous blogger.
Merci de m'aider j'aimerais réussir un jour a placer ce foutu bouton JAIME !
;)
Baraguiné par le 22/01/12 à 06h45
bonjour

Moi j'arrive très bien à avoir le code, mais je ne sais pas ou je dois le mettre !!
j'ai essayé d'affiché le code sources de la pages pour l'y ajouter mais je ne peut rien rajouter (ni collé ni écrire) donc si vous pouviez me dire ou ajouté les codes sa serai sympa ;)

merci d'avance.
Baraguiné par le 08/04/12 à 21h42
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Baraguiné par le 17/05/12 à 01h26
??
Baraguiné par le 29/05/12 à 01h35
Merci
Baraguiné par lidiacami le 10/11/12 à 12h23
lidiacami sur La Ferme du Web
Bonjour, pourriez vous me expliquer ou je pourrai mettre le code sur ma page?J'ai reussi à avoir le code mais je ne sais pas ou le mettre.Merci
Baraguiné par le 14/03/13 à 16h31
ça marche quand je fais un copier coller de ton code en html5 je colle le 1er apres le et avant le et le deuxieme dans le body aussi mais rien ne s'affiche du tout
Baraguiné par le 14/03/13 à 16h34
ca marche pas pardon
Baraguiné par le 02/07/13 à 14h38
Et voici une petite astuce de comment mettre Facebook Connect sur son forum :)

http://forum.forumactif.com/t280609-facebook-connect

En tout cas merci pour votre tuto :)


Bonne journée
Baraguiné par le 05/08/14 à 16h17
:-D
Baraguiné par le 23/02/16 à 11h22
Bonjour famy que Dieu nous garde

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web