Dans cette vidéo, je vous montre comment ajouter un bouton "j'aime" de Facebook sur son site Internet.

Mise à jour : Dans une nouvelle vidéo, je vous présente une méthode plus simple et plus récente.

Ressources



Commentaires

  • [image Marlene]
    Par Marlene
    le 26 mai 2011
    Bonjour, j'ai essayer d'integrer le bouton j'aime, Ok j'arrive à avoir un code IFRAM... mais je ne sais pas ce qu'il faut faire ensuite ... je souhaite inserer sur mon site internet un "j'aime" directement de notre page Fb... votre explication est très claire ... jusqu'au code source .... étant novice... je ne sais pas ou inserer mon code... merci de m'éclairer ...
  • [image Nico]
    Par Nico
    le 26 mai 2011
    Hello,

    Le code iframe obtenu est à insérer dans le code HTML de la page, précisément à l'endroit où tu souhaites afficher le bouton j'aime.

    Mais pour cela, il faut que tu aies accès au code HTML des pages du site. Tu utilises un blog ? Tu peux me contacter par mail si besoin : nicolas@365-jours.fr

    A+
  • [image jacky]
    Par jacky
    le 30 juin 2011
    bonjour
    j'ai un site en construction et je voudrais mettre le bouton facebook sur mon site. pour cela facebook me demande de confirmer mon N° de tél pour que je reçoive on code, ce que je fais et je ne reçois pas ce code sur mon portable.
    il y a aussi la possiblilité d'obtenir ce code en remplissant les coordonnées de la carte bancaire (avec le pictogramme) ce que je ne souhaite pas faire.
    peux tu m'aider?
    cordialement
    Jacky
  • [image Nico]
    Par Nico
    le 30 juin 2011
    Bonjour Jacky,

    Si tu ne veux pas développer d'application pour Facebook, normalement pas besoin de n° de tél ou de coordonnées de CB.

    Pour insérer le bouton j'aime de Facebook, il suffit :
    1) d'aller sur http://developers.facebook.com/docs/reference/plugins/like/
    2) d'indiquer l'adresse de son site (et de changer les autres paramètres si besoin)
    3) de cliquer sur le bouton "Get code"
    4) de récupérer le code HTML affiché et de l'insérer dans le code source de ta page

    C'est faisable même sans avoir de compte Facebook ;-)
  • [image Jacky]
    Par Jacky
    le 2 juillet 2011
    Bonjour
    Merci j'ai réussi facilement à insérer le bouton j'aime sur mon site avec tes explications
    jacky
  • [image Nicolas]
    Par Nicolas
    le 4 juillet 2011
    Bonne nouvelle !

    Je ferai bientôt un tuto dans le même esprit, sur la mise en place d'un espace de commentaires avec Facebook.
  • [image REGINE]
    Par REGINE
    le 7 juillet 2011
    bonjour
    j'ai essayé de rajouter le bouton j'aime sur mon site avec l'adresse du profil facebook mais cela ne fonctionne pas, j'ai bien le bouton j'aime mais celui-ci me renvoie à une page d'inscription facebook et en plus en anglais.
    voici le code que j'ai rentré
    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCouleur-Vanille%2F202849249760767&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowtransparency="true"></iframe>

    pouvez-vous me dépanner ? Merci d'avance.
  • [image Nicolas]
    Par Nicolas
    le 7 juillet 2011
    Bonjour Régine,

    La page de connexion s'affiche si on n'est pas encore connecté sur Facebook.
    Pour faire en sorte que cette page s'affiche en français, il faut rajouter "locale=fr_FR" dans le code : <iframe src="http://www.facebook.com/plugins/like.php?locale=fr_FR&href=http%3A ...
  • [image C&eacute;dric]
    Par Cédric
    le 11 juillet 2011
    Bonjour,

    Ayant ajouté le bouton 'J'aime", lorsque je clique dessus, dans Facebook, s'affiche une certaine image. Comment définir une autre image pour mon site ?
    Sur quoi FB se base t'il pour choisir une photo ?

    D'avance merci,

    Cédric
  • [image Nico]
    Par Nico
    le 11 juillet 2011
    Bonjour Cédric,

    Pour l'affichage des infos du site et de la photo, Facebook se base sur les indications présentent dans le <head> de la page. Si ces balises ne sont pas présentent alors il va essayer de les renseigner lui-même.

    J'ai fais une vidéo sur le sujet qui devrait t'être utile : http://www.365-jours.fr/regarder/episode/65

    À bientôt !
  • [image C&eacute;dric]
    Par Cédric
    le 11 juillet 2011
    Merci pour tes vidéos et ton partage d'infos ;-)
  • [image fsstv]
    Par fsstv
    le 20 juillet 2011
    bonjour chez moi ca marche pas lol
    il me dit qui fo que je soi développeurs dur merci de rp
  • [image Nico]
    Par Nico
    le 20 juillet 2011
    Salut fsstv,

    Déconnecte-toi de ta session Facebook, ça corrigera ce problème.


    PS: Merci de faire attention à l'orthographe.
  • [image Jacky]
    Par Jacky
    le 6 août 2011
    Merci Nico pour cette info
    je vais faire comme tu me suggère et je t'informe
    jacky
  • [image Jacky]
    Par Jacky
    le 6 août 2011
    Nico stp
    comment faire pour que lors de la connexion, la fenêtre soit en français
    merci
  • [image Nico]
    Par Nico
    le 6 août 2011
    Bonjour Jacky,

    Comme indiqué plus haut, pour que la fenêtre de connexion Facebook soit en français, il faut rajouter "locale=fr_FR" dans le code du bouton j'aime.

    Par exemple : <iframe src="http://www.facebook.com/plugins/like.php?locale=fr_FR&href=http%3A ...
  • [image Sebastien]
    Par Sebastien
    le 7 août 2011
    Bonjour
    Merci pour ce tuto.
    Grâce aux commentaires et à tes réponses, j'ai pu obtenir un code mais en xfbml et non en html. Rien ne s'affiche pour le moment quand je recopie ce xfbml sur mon blog.
    Help ^^
  • [image Nico]
    Par Nico
    le 7 août 2011
    Bonjour Sebastien,

    As-tu laissé le bouton "Send" (envoyer) coché ? Ce bouton nécessite xfbml.
    Le xfbml fait appel à du javascript alors que le code iframe devrait fonctionner directement.

    Si tu n'as pas besoin de ce bouton, alors décoche la case. Ensuite tu devrais obtenir le code iframe, qui ressemble à :

    <iframe src="http://www.facebook.com/plugins/like.php?locale=fr_FR&amp;href={URL DE TON SITE OU DE TA PAGE}&amp;send=false&amp;layout=standard&amp;width=450&amp;
    show_faces=false&amp;action=like&amp;colorscheme=light&amp;font
    &amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

    Dis-moi si c'est ok.
  • [image Sebastien]
    Par Sebastien
    le 7 août 2011
    Nico

    Tu réponds super vite : Bravo la réactivité
    Tu réponds bien : Bravo la compétence

    Un grand merci !
  • [image Nico]
    Par Nico
    le 7 août 2011
    Merci à toi :-)
  • [image Sebastien]
    Par Sebastien
    le 7 août 2011
    Re

    J'avais une fan page avec 22 membres et avec le bouton like de la même page, j'ai un compteur à 0, est-ce normal ? Est-ce que c'est la même fonctionnalité ?
    Comme tu peux le voir à mes questions le monde de Facebook et moi ca fait deux mais comme les utilisateurs communiquent avec Facebook, je m'adapte comme je peux...

    Merci d'avance
  • [image Sebastien]
    Par Sebastien
    le 7 août 2011
    C bon j'ai trouvé pourquoi
  • [image NlenneS]
    Par NlenneS
    le 8 août 2011
    Bonjour Nico,
    J'ai bien aimé ta vidéo très complète sur ce tuto mais j'ai aussi un problème.
    J'ai créé un site avec Google sites et mon problème est que j'ai l'impression que google sites n'accepte pas les iframe car en tout cas dès que je colle le code dans le html de mon site, ça ne marche pas, ça me met quelque chose comme une image verte marquée " google gadgets " aurais-tu une réponse à m'apporter ?
    Amicalement,
    NlenneS
  • [image Nico]
    Par Nico
    le 8 août 2011
    Bonjour NlenneS,

    As-tu cliqué sur "Enregistrer" en haut de l'écran pour valider les changements ?

    Je viens de tester, et dans mon cas j'obtiens aussi une image "Google gadgets" en mode d'édition. Mais une fois enregistrée, ma page affiche bien le bouton j'aime de Facebook.

    Dis-moi si cela fonctionne chez toi, sinon je ferai une vidéo.
  • [image NlenneS]
    Par NlenneS
    le 8 août 2011
    Merci beaucoup, oui ça marche bien maintenant.
    Je te remercie :)
  • [image Chantal]
    Par Chantal
    le 10 août 2011
    bonjour,

    J'ai besoin d'aide !!
    je veux mettre des boutons facebook sur certaines pages de mon site.
    j'y suis arrivée, mais quand on les ouvre dans facebook (mes amis, pas moi), ils arrivent sur la page d'accueil du site.
    J'ai du rater quelquechose.
    Mais quand je suis sur facebook, moi, j'arrive à ouvrir directement la bonne page.
    Je ne suis pas très douée.
    pouvez-vous m'aider?
    MERCI
  • [image Nico]
    Par Nico
    le 10 août 2011
    Bonjour Chantal,

    Pouvez-vous m'indiquer une page sur laquelle vous avez ce problème ?
  • [image lefoudingue]
    Par lefoudingue
    le 12 août 2011
    Salut.
    J'ai un probleme avec le bouton, je n'arrive pas a le deplacer, pourai tu m'expliquer comment faire?

    Merci.
  • [image Nico]
    Par Nico
    le 13 août 2011
    Salut lefoudingue,

    Le positionnement du bouton ne dépend pas du bouton lui-même mais de l'endroit où on l'aura mis dans la page. Après, c'est une histoire de HTML et de CSS mais ça n'a rien à voir avec le bouton en lui-même.

    Peut-être que cela peut t'aider : http://fr.html.net/tutorials/css/lesson14.php

    A+
  • [image Bilal]
    Par Bilal
    le 22 août 2011
    Salut,

    Je pense que l' IFRAME n'existe plus, comment peux je l'avoir. Facebook developers propose seulement le HTML. Comment faire ?
  • [image Nico]
    Par Nico
    le 22 août 2011
    Bonjour Bilal,

    Si si le code iframe fonctionne toujours. Je pense que tu as laissé le bouton "Send" coché. Il suffit de décocher la case pour que le code iframe s'affiche.

    Dis-moi si c'est ok.
  • [image Constantin]
    Par Constantin
    le 30 août 2011
    Salut Nico,

    J'ai suivi tes instruction à la lettre, j'ai bien obtenu le code iFrame. Je suis ensuite allé sur la page Myspace que j'ai créée pour mon groupe de musique. Je fais un clique droit, puis "Code source", mais le problème est que je ne peux rien écrire dans cette grande page … Quel est mon problème ?

    PS : J'utilise un ordinateur Apple, donc Safari comme navigateur.

    Merci d'avance :)
  • [image Nico]
    Par Nico
    le 31 août 2011
    Salut Constantin,

    Je n'utilise pas Myspace, mais je pense que ce genre de code doit être bloqué.
    Est-ce que tu as des exemples d'autres pages Myspace qui ont réussi à faire cela ?

    A+
  • [image Constantin]
    Par Constantin
    le 1 septembre 2011
    Re

    Je n'ai pas trouvé pas de compte Myspace qui possède cette fonctionnalité, je pense qu'on ne peut ajouter ce bouton que sur un site qui nous appartient pleinement, qu'est-ce que tu en penses ? Sinon, où pourrait-on mettre le bouton "Like" relié à une page Facebook ?

    A+
  • [image Nico]
    Par Nico
    le 1 septembre 2011
    Alors ce n'est surement malheureusement pas faisable...
    Je viens de trouver un sujet qui arrive à la même conclusion :
    http://www.commentcamarche.net/forum/affich-20251070-bouton-j-aime-facebook-sur-myspace-musique

    Il faudra donc "se contenter" de mettre un simple lien vers la page Facebook alors.

    A+
  • [image birdie]
    Par birdie
    le 10 septembre 2011
    Bonjour,

    Merci pour le partage ! Très instructif.
    J'ai cependant un problème. Lorsque je clique sur le bouton j'aime que j'ai inséré sur mon site, le compteur se met en marche (+1) mais rien ne s'affiche sur mon profil facebook (on ne voit pas que j'ai aimé ce lien). Comme si il n'y avait pas d'interactivité entre les deux. Mon site a été fait sur indexhibit. As-tu une idée ?

    Merci d'avance

    Oncle Birdie
  • [image Nico]
    Par Nico
    le 10 septembre 2011
    Bonjour et merci pour ton message,

    Étrange que ça ne s'affiche pas... Est-ce que tu as essayé avec les informations Open-Graph (voir dans les ressources l'épisode 65) dans le code de ta page pour voir si ça fonctionnait mieux ?

    C'est pour ton site www.atelier4cinquieme.be ou pour un autre ?
  • [image birdie]
    Par birdie
    le 10 septembre 2011
    merci pour ta réponse rapide. Oui c'est effectivement pour mon site: www.atelier4cinquieme.be

    j'ai fais le test sur une seule page. Si tu vas voir ici: http://www.atelier4cinquieme.be/index.php?/transformations/wooden-box-and-coffee-table-/

    tu verras que j'ai mis le bouton j'aime de facebook. J'ai indiqué que j'aimais mais rien ne s'affiche sur mon profil fb... .

    Voilà le code que j'ai rentré :
    <iframe src="//www.facebook.com/plugins/like.php?app_id=283575191669518&href=http%3A%2F%2Fwww.atelier4cinquieme.be%2Findex.php%3F%2Ftransformations%2Fwooden-box-and-coffee-table-%2F&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>


    Ce n'est pas moi qui ai fait le site et je n'ai donc pas accès au code source...

    si tu as une idée, n'hésite pas :) Merci d'avance !
  • [image Nico]
    Par Nico
    le 10 septembre 2011
    Après investigation, je pense qu'il y a un soucis au niveau de l'adresse qui est donnée au bouton j'aime, puisque :

    &href=http%3A%2F%2Fwww.atelier4cinquieme.be%2Findex.php%3F%2Ftransformations%2Fwooden-box-and-coffee-table-%2F => ne fonctionne pas (j'ai le même problème que toi, rien ne s'affiche sur Facebook)

    mais &href=http%3A%2F%2Fwww.atelier4cinquieme.be => fonctionne bien, j'ai même une image à côté du lien partagé sur mon mur Facebook.
  • [image elodie]
    Par elodie
    le 17 septembre 2011
    Bonjour,

    Je tenais à vous remercier pour votre vidéo et vos explications ! J'ai réussi à insérer l'icone facebook gràce à vous !Merci
  • [image Nico]
    Par Nico
    le 17 septembre 2011
    Merci Elodie pour votre commentaire,

    ça fait toujours plaisir de savoir que mes vidéos sont utiles :)
  • [image birdie]
    Par birdie
    le 18 septembre 2011
    salut Nico,

    j'ai trouvé la solution :))

    Effectivement cette adresse ne fonctionne pas :
    &href=http%3A%2F%2Fwww.atelier4cinquieme.be%2Findex.php%3F%2Ftransformations%2Fwooden-box-and-coffee-table-%2F

    Du coup, j'ai enlevé " Findex.php%3F%2 " pour avoir ça :
    &href=http%3A%2%2Fwww.atelier4cinquieme.be%2Ftransformations%2Fwooden-box-and-coffee-table-%2F

    Et là : MIRACLE. Ca marche !

    Merci pour tes réponses!
  • [image Nico]
    Par Nico
    le 20 septembre 2011
    Bonne nouvelle !

    Content que tu aies trouvé la solution :)

    A bientôt
  • [image Franck]
    Par Franck
    le 21 septembre 2011
    Bonjour,
    en voulant insérer une like box, je me rends compte que les vignettes des "fans" n'apparaissent que si je suis connecté à facebook avec le même navigateur.
    Auriez-vous une idée d'où celà peut venir?
    cordialement
  • [image icham]
    Par icham
    le 21 septembre 2011
    merci
  • [image Nico]
    Par Nico
    le 22 septembre 2011
    @Franck : Oui c'est le fonctionnement normal. Les vignettes présentées sont uniquement des amis du compte connecté, donc si on n'est pas connecté à Facebook, aucune vignette n'apparaît.

    @Icham : De rien ;-)
  • [image franck]
    Par franck
    le 22 septembre 2011
    Non Nico,
    il doit y avoir autre chose, j'ai un lien en ce moment qui pointe vers une autre page et je vois bien les 280 "amis", le problème survient lorsque je pointe vers une autre page avec plus de fans?
    regardez sur ma page d'accueil, on voit bien les photos des 280
    Merci de votre aide
  • [image Nico]
    Par Nico
    le 22 septembre 2011
    Ah d'accord, je me suis trompé. Je pensais que vous parliez du bouton "j'aime" avec les photos.

    Sur quelle page se situe le problème ? (sur votre page d'accueil je ne vois aucun problème)
  • [image Franck]
    Par Franck
    le 22 septembre 2011
    Oui, il s'agit bien du like button :)
    Ce que vous voyez sur la page d'accueil du site est effectivement correct (il y a bien le bouton "j'aime" et les photos des "amis" qui pointe vers la page "applipeche"
    Le souci est que j'ai une autre page facebook qui s'appelle "découvrez applipeche" et lorsque je pointe sur elle, je ne vois pas les photos des "amis" (ennuyeux car j'en ai plus de 3500 :)
  • [image Nico]
    Par Nico
    le 22 septembre 2011
    Regardes sur cette page : http://developers.facebook.com/docs/plugins/

    Dans la vidéo, j'explique comment ajouter un bouton j'aime, aussi appelé "like button". Toi, sur ta page, c'est bien une "like box" (une boîte qui présente les fans et/ou les actualités d'une page fan de facebook).

    Pour ton problème (avec applipeche), uniquement 2 photos me sont présentées. Je n'ai aucune idée pourquoi avec une page ça fonctionne et pas avec l'autre. Il faudrait contacter le support de Facebook qui pourra sûrement t'aider plus que moi.

    A bientôt
  • [image St&eacute;phan]
    Par Stéphan
    le 27 septembre 2011
    Salut Nico,

    merci déjà pour ta vidéo... Moi et l'anglais on est pas très bons amis ;-)
    Bon l'informatique c'est pas top non plus... Donc j'ai bien tout suivi et fait comme tu as dis, tout va bien jusqu'à... l'intégration de l'iframe du bouton "like" dans le code source de mon site... Là je suis perdu... Je voudrais le mettre dans le menu vertical à gauche au dessus de "Accueil"... Mais où exactement l'insérer dans le code source... J'ai pas envie de faire de bêtises!

    Merci d'avance!

    Stéphan.
  • [image Nico]
    Par Nico
    le 29 septembre 2011
    Salut Stéphan,

    Pour insérer du code source sur son site, cela dépend du logiciel ou de l'outil utilisé pour créer son site. Il faut parfois éditer un fichier, d'autres fois chercher dans les fonctionnalités du logiciel.

    Pour mieux vous aider, pouvez-vous m'indiquer quel logiciel ou outil utilisez-vous ? Si c'est une autre personne qui a créé le site pour vous, alors mieux vaut prendre directement contact avec cette personne pour lui demander d'ajouter le bouton j'aime à votre place.

    A bientôt !
  • [image M&eacute;gane]
    Par Mégane
    le 5 octobre 2011
    Bonsoir et merci pour ta vidéo,
    j'ai fais comme sur la vidéo mais rien ne se passe, j'ai bien le code Ifram mais après je ne sais pas ce qu'il faut faire comme en plus l'informatique pour moi c'est pas trop ça je galère. J'aimerais seulement rajouter un bouton j'aime sur ma page fan de facebook ainsi que sur ma boutique en ligne...que faut t-il que je fasse???

    A très vite...
  • [image Nico]
    Par Nico
    le 7 octobre 2011
    Salut Mégane,

    Sur la page fan de Facebook, le bouton "J'aime" est déjà présent. Si tu ne le vois pas, c'est sûrement parce que tu as déjà cliqué dessus. Après avoir cliqué sur le bouton, celui-ci disparaît.

    Pour ajouter un bouton "J'aime" sur son site Web (ce que je présente dans la vidéo), il faut donc :
    - récupérer le code HTML de l'iframe correspondant à son site (ou page fan à liker),
    - insérer le code récupéré dans le code HTML des pages de son site Internet.

    Pour faire cela, comme je l'ai dit à Stéphan dans le commentaire précédent, cela dépend du logiciel ou de l'outil utilisé pour créer son site. Il faut parfois éditer un fichier, d'autres fois chercher dans les fonctionnalités du logiciel.

    Pour mieux vous aider, pouvez-vous m'indiquer quel logiciel ou outil utilisez-vous ? Si c'est une autre personne qui a créé le site pour vous, alors mieux vaut prendre directement contact avec cette personne pour lui demander d'ajouter le bouton j'aime à votre place.

    A bientôt !
  • [image Emmanuel ]
    Par Emmanuel
    le 17 octobre 2011
    Bonjour,
    très bon article.
    Comment fais-tu pour faire apparaitre les photos des gens qui "aiment" et qui ne sont pas tes amis. Et en plus avec des vignettes aussi grande?
  • [image St&eacute;phane]
    Par Stéphane
    le 18 octobre 2011
    Bonjour,
    J'ai bien respecté vos indications, mais lorsque j'indique le lien comme vous le préconisez. Mais hélas à chaque fois que j'enregistre le j'aime avec le nombre de personnes, tout s'efface et disparait. rien sur mon site, ni sur mon blog.

    Merci pour votre réponse.
  • [image Nico]
    Par Nico
    le 19 octobre 2011
    @Emmanuel : Si tu parles de l'onglet "Facebook" situé sur la barre latérale de ce site, ce n'est pas un bouton "j'aime" qui est utilisé ici, mais une "Like Box" (à voir sur la page des plugins de Facebook). Cette boîte est associée à une adresse de page Fan Facebook.

    @Stéphane : Pouvez-vous me donner plus de précision svp ? Sur quelle(s) page(s) de votre site ? Quel outil / logiciel utilisez-vous ?



Nicolas Thomas

Passionné par le Web, je crée des sites Internet depuis plus de 10 ans.
Après avoir obtenu un Master d'Informatique et de Gestion, j'ai lancé mon Agence Web en 2010 et c'est avec plaisir que je mènerai à bien votre projet de création de site Internet, si vous m'en confiez la responsabilité.


Retourner à l'accueil