Intégrer le bouton like de Facebook sur un site Internet

Vous le savez certainement mais Facebook a fait quelques changements (encore une fois) en ce qui concerne les plugins mis à disposition des éditeurs de sites et des développeurs. Ainsi on ne va donc plus parler du bouton « partager » ou « share » ni d’ailleurs de « devenir fan » ou « become fan » qui d’un coup deviennent obsolètes. Donc maintenant on remplace tout cela par le bouton « like » ou « j’aime » en français. Dans un sens c’est plus simple mais un peu perturbant vis à vis des pages fans car on peut aussi bien aimer un article qu’un site maintenant…

L’intérêt de ce bouton like est qu’il est simple, très simple même. 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 comme avec les étoiles sauf que dans ce cas c’est social, donc plus proche de la recommandation.

Tous les nouveaux plugins proposés par Facebook sont sur cette page : http://developers.facebook.com/plugins. Pour mon usage seul le bouton « like » est utile pour l’instant car les autres ralentissent fortement le chargement des pages donc exit l’affichage des photos des membres (2 secondes de plus en général).

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).

Vous allez donc avoir un code de ce type pour la homepage de 2803.fr :

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 :

< ?php echo urlencode(get_permalink($post->ID)); ?>

Le code utilisé sur 2803.fr est donc le suivant :

Finalement c’est plutôt facile et pas besoin de plugin sur ce coup. Libre à vous de l’intégrer où vous le souhaitez en bas ou en haut de l’article…

Articles en rapport :

26 Commentaires

  • 1
    Jonas
    avril 26, 2010 - 10 h 44 min | Permalien

    Dommage, si je like l’article sur le 2803.fr, le lien qui est sur la fanpage n’est pas lié, et donc pas liké par moi.

    Je sais pas si je me suis fait comprendre… :)

  • 2
    avril 26, 2010 - 10 h 49 min | Permalien

    je l’ai intégré sur mon site http://www.toupil.fr en page d’accueil depuis hier. reste à voir les éventuelles répercutions sur le traffic( je suis un peu perplexe …)

  • 3
    avril 26, 2010 - 10 h 52 min | Permalien

    @jonas c’est l’ambigüité du bouton versus la page fan…

  • 4
    avril 26, 2010 - 12 h 58 min | Permalien

    Salut Henri,

    Le premier bout de code fonctionne effectivement, mais laisse un espace conséquent sous le bouton.

    Le second bout de code par contre ne fonctionne pas, dans le sens où il n’est pas relié au compte Facebook (par contre il est dynamique).

    Une idée ?

  • 5
    avril 26, 2010 - 13 h 01 min | Permalien

    Résolu pour la hauteur du bloc (elle n’est pas indiquée par défaut, j’ai mis une valeur de 30 px). :-)

  • 6
    avril 26, 2010 - 14 h 00 min | Permalien

    Ce bouton like est aussi malheureusement un mouchard très puissant, mais facile à désactiver : http://zzz.rezo.net/Bloquer-le.....ebook.html

  • 7
    avril 26, 2010 - 17 h 43 min | Permalien

    Le « j’aime » de facebook n’est pas compatible W3C, comment pourrir son site avec un code pas clean, pffff

  • 8
    Abbadon
    avril 27, 2010 - 9 h 42 min | Permalien

    Super… merci pour ce petit bout de code, je viens de l’intégrer sur mon site et ça fonctionne direct.

  • 9
    Vic et zag
    avril 27, 2010 - 11 h 02 min | Permalien

    trop chouette, je vais essayer de l’ appliquer maintenant à la boutique!

  • 10
    ludo
    avril 29, 2010 - 11 h 14 min | Permalien

    Bonjour,

    Je voulais installer ce bouton sur mes pages, avec le recommend au lieu du like et avec le texte au lieu du compteur seul, seulement voilà quand l’utilisateur est loggé sur FB celà affiche correctement X ou Y recommende… mais lorsqu’il s’agit d’un internaute de passage il a toujours affiché « Soyez le premier à recommander… », si je mets le compteur il reste toujours à 0, si je clique et me log sur un compte FB il passe à 1 et si je me déloggue il repasse à 0.
    Le nombre de like/recommend n’est pas sauvé, pourtant j’ai bien intégré le code correctement, en iframe.
    Et j’ai vu que sur votre site, même en simple visiteur non FB j’avais votre compteur à 5, c’est bizarre.

    Merci.

  • 11
    avril 29, 2010 - 11 h 23 min | Permalien

    Je pense que le compteur est relatif à vos amis donc si vous voyez 5 c’est que 5 de vos amis ont aimé l’article. Sinon aujourd’hui c’est plus proche de 50 d’après ce que me dit facebook.

  • 12
    avril 29, 2010 - 12 h 32 min | Permalien

    c’est bien mais quand on clique sur « jaime » il n’y a aucune publication sur notre page FB pour partager. Donc c’est uniquement un compteur. J’ai tenté avec celui installé sur mon site et celui de cet article, rien n’apparait.

  • 13
    avril 29, 2010 - 14 h 05 min | Permalien

    apparamment, c’est normal le « j’aime » situé sous les articles n’ai pas de lien avec facebook, mais celui que j’aimerais mettre, c’est celui avec le nom du site et une image, comme celui que vous avez dans la colone de droite de ce site. Celui là publie sur le mur. Pouvez vous m’aider pour le code ?

  • 14
    Nicolas
    avril 30, 2010 - 9 h 55 min | Permalien

    C’est bizarre quand meme parce que le chiffre que je vois moi sur ta page c’est 8, pas 50 ou plus. 8 de mes « amis » ont liké ? Je ne vois rien dans mon fil de feeds sur mon profil meme en affichant tout… Une idée Henri ?

  • 15
    avril 30, 2010 - 10 h 07 min | Permalien

    En effet c’est space leur truc… Ci joint les stats fournies par facebook http://twitpic.com/1jl81p

  • 16
    Nicolas
    avril 30, 2010 - 10 h 10 min | Permalien

    Oui c’est super bizarre d’autant plus que ca a baissé depuis tout à l’heure maintenant je vois 5 !!!! wow

  • 17
    mai 1, 2010 - 17 h 56 min | Permalien

    Hello

    J’ai un obstacle a surmonter

    Comment mettre plusieurs boutons like sur la même page de site web (exactement comme Levis).
    A savoir que je veux mettre une image et un titre diffèrent a chaque bouton.

    C’est pour cette page de tee-shirt http://www.ferembach.com/gwigui-tee.html

    Merci

  • 18
    mai 2, 2010 - 0 h 47 min | Permalien

    Voilà peut-être enfin un bouton qui va avoir une utilité, celle de générer du trafic. Parce que jusqu’à présent tous les boutons de partage n’étaient pas vraiment efficaces. Si Facebook devient un incontournable, ce qui est fort probable puisque chaque nouvelle génération qui a accès au web y ouvre un compte, ce bouton pourrait rapidement se retrouver partout. Peut-être sera-t-il intéressant de développer des variantes de ce bouton.

  • 19
    mai 2, 2010 - 17 h 04 min | Permalien

    bonjour, moi je l’ ai intégrer sur mon site,mais j’aimerais lui donner son aspect original.Si quelqu’un serait me renseigner.merci a tous.

  • 20
    mai 16, 2010 - 10 h 33 min | Permalien

    Salut,

    Je viens de monter un blog WP pour une amie, pas de souci de ce coté.
    J’ai ajouté le bouton « J’aime », c’est cool il est intégré tout bien. L’espace vide en dessous ok j’ai pigé c’est pour le miniature de user qui ont cliqué.

    Par contre j’ai un ami qui vient d’essayer et il m’a signalé un petit souci.
    Je viens de tester de mon coté et en effet il y a un problème.

    Lorsqu’on clic sur le bouton, le vote est pris en compte, la miniature s’affiche puis le tout disparait et « ERREUR » apparait 2s a la suite du compteur FB, j’ai vérifié sur mon compte FB pour voir si le vote avait été pris en compte, aucune trace….

    Si quelqu’un a rencontré le même souci, merci pour son aide.

  • 21
    mai 16, 2010 - 10 h 49 min | Permalien

    Ok c’est bon!
    Autant pour moi, juste un souci d’espace… :/
    Désolé

  • 22
    septembre 30, 2010 - 10 h 50 min | Permalien

    je l’ai mis sur un site et il a généré beaucoup de visites…

  • 23
    Christian
    mai 19, 2011 - 18 h 27 min | Permalien

    Super tu ne peu pas acceder au bouton like sans etre validé developper sauf que quand tu valide avec ton num de tel ca ne fonctionne jamais et je ne rentrerais pas ma cb sur facebook… donc je m’assoie dessus

  • 24
    juin 26, 2011 - 0 h 08 min | Permalien

    slt

  • 25
    juin 26, 2011 - 0 h 09 min | Permalien

    http://www.facebook.com/pages/.....9450768710

  • 26
    Arnaud
    juillet 27, 2011 - 13 h 20 min | Permalien

    Bonjour et merci pour votre site,

    J’ai intégré le bouton j’aime sur chacun de mes pages facebook grâce à un plug in.
    J’aimerais avoir les stats fb mais je ne sais pas comment « connecter » mon site à facebook.
    J’ai vu qu’il fallait intégrer le protocole open graph mais débutant dans le domaine, je ne sais pas où intégrer les balises.
    Mon site/blog est sous wordpress.

    Merci d’avance si quelqu’un sait m’aider.

  • Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    *

    Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    More in wordpress (17 of 108 articles)


    Minify est une application qui permet de réduire les requêtes depuis en site en combinant les différentes feuilles de style ...