Tuto application Facebook

Créer une application Facebook de A à Z en PHP. API Facebook, viralité, monétisation ...

Tuto Symfony2

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony2.

Web Event Lyon #4

Plus d'une dizaine de conférences, des ateliers pratiques, barcamps et cliniques web, le 15 juin 2012.

Se
Connecter Créer
un compte

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

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.

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

A voir aussi sur le même sujet:

30 Commentaires

social

facebook

i like

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

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

Nickel du coup je l'ai mis sur un de mes sites...

Baraguiné par kwayb le 23/04/10 à 10h51

@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

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

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

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

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

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

REPONSE:

Baraguiné par didus le 28/04/10 à 17h00

http://addthis.com/

Baraguiné par gtulian le 03/05/10 à 05h47

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

plus d'info sur http://developers.facebook.com/docs/guides/web#login

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 13/03/12 à 22h49

Sur ce site de mise en relation vous pouvez échanger des clics, c'est pas mal:
http://www.likeub.com/?p=7165945

Et sans obligation d'aimer toutes les pages proposées...

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 18/05/12 à 23h19

slt