Ajoutez un bouton Like et Tweeter sans plugin

Dans un article précédent nous avons vu comment vous pouviez simplement mettre en place des encarts pour Facebook et Twitter sur votre blog. Cette fois je vais vous montrer comment installer des boutons « J’aime » et « Envoyer » de Facebook et « Tweeter » de Twitter sur chacun de vos articles et ce SANS utiliser de plugin.

Pour découvrir comment intégrer les boutons des deux plus gros réseaux sociaux, suivez le guide…

Commencez par Facebook

Je ne sais pas vous mais de ce que j’ai remarqué, Facebook est quand même LE réseau social où il faut être, et ce peu importe que vous ayez un blog sur le marketing, la cuisine, la musique ou les voitures de course. Beaucoup de vos amis, connaissances, collègues seront sur Facebook.

Là où Twitter reste toujours (même si de moins en moins) réservés aux technophiles et où Google Plus est pour l’instant envahis de Geeks, Facebook est une valeur sûre 😉 Donc si vous ne devez en choisir qu’un, affichez le bouton « Like » de Facebook.

Voici comment…

Tout d’abord rendez-vous sur la page des plugins de Facebook ici : http://developers.facebook.com/docs/plugins/

Une fois sur cette page vous y voyez plusieurs « plugins » que vous pouvez intégrer sur votre site web mais aujourd’hui on va s’intéresser au « Like Button« . Cliquez sur le lien et vous pourrez le configurer pour votre blog.

  1. Dans « URL to Like » ne mettez rien pour l’instant.
  2. Cochez la case « Send Button » si vous voulez également le bouton « Envoyer » de Facebook, décochez-la si vous n’en voulez pas.
  3. Pour « Layout Style » vous avez trois propositions. Je vous conseille la 2e, « button_count » pour gagner de la place.
  4. Width c’est la largeur de votre bouton Like. Avec le bouton Envoyer, 200px devraient être suffisant.
  5. Show Faces permet d’afficher des petites miniatures des photos des personnes qui ont liké. Cela marche seulement si vous avez choisi « standard » dans le « Layout Style ».
  6. Dans « Verb to display » vous pouvez choisir entre le verbe aimer et le verbe recommander, selon votre public. Personnellement j’ai laissé « like ».
  7. Dans « Color Scheme » laissez « light » à moins que vous n’ayez un blog avec des couleurs foncées.
  8. Vous pouvez également choisir la police de votre bouton.
  9. Cliquez sur Get Code.
  10. Peu importe le code que vous choisirez il faudra encore rajouter l’url de votre article en cours :
    • Pour l’HTML5 mettez data-href= »<?php echo urlencode(get_permalink($post->ID)); ?> »
    • Pour l’xfbml mettez href= »<?php echo urlencode(get_permalink($post->ID)); ?> »
    • Pour l’iframe mettez ?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;
  11. Il vous suffit ensuite de copier ce code puis de le coller dans votre fichier single.php dans la div où se trouve le contenu de votre article, plus haut ou plus bas, ça dépend où vous voulez positionner votre bouton.

Ajoutez Twitter

Twitter est le deuxième gros réseau social. Il est connu et pas mal fréquenté, même s’il adresse plus aux blogueurs, webmarketeurs, marques et autres techno-geeks.

Ainsi même si votre public n’est pas en majorité sur ce réseau social et site de micro-blogging, il est intéressant d’afficher le bouton de Tweet, surtout pour la possibilité donnée à vos lecteurs de savoir que « vous y êtes ».

Rendez-vous d’abord sur l’adresse https://dev.twitter.com/docs/twitter-for-websites où vous trouverez les fonctionnalités de Twitter pour les sites web. Cliquez ensuite sur « Get the Tweet Button« , vous arriverez à la page qui nous intéresse.

  1. Dans « Bouton » vous choisissez le format qu’aura votre bouton, je vous conseille la seconde solution, bon compromis entre la petite taille pour des questions de place et l’affichage du compteur pour la « preuve sociale ».
  2. Dans « Texte du Tweet« , laissez coché : « Titre de la page du bouton », ça sera le titre de votre article.
  3. Dans « Url« , laissez coché : « URL de la page du bouton », ça sera le lien vers votre article.
  4. Dans « Langue », laissé sélectionné « Français« .
  5. Dans le petit 2 mettez le nom de votre compte Twitter (juste le nom suffit, pas l’url en entier).
  6. En dessous, vous avez un aperçu de votre bouton et son code.
  7. Copiez ce code puis collez-le dans votre fichier single.php au même niveau que le code pour Facebook ci-dessus.

Et voilà comment vous pouvez facilement vous débarrassez d’un à deux plugins social. Certes vous devez mettre les mains dans le code mais il n’y a vraiment rien de compliqué. Et vous que pensez-vous de cette astuces ? Préférez-vous utiliser cette méthode ou un plugin ?

A propos kategriss

Passionnée de web, je vous propose de construire votre visibilité sur Internet. Vous aimeriez un site internet à petit prix ? Obtenez un site professionnel (one-page, vitrine, newsletter...) rapidement et facilement.
Lien pour marque-pages : Permaliens.

19 Commentaires

  1. Salut Kate

    Cet article tombe pile poil au bon moment ou j’ouvre mon blog. Ca va déjà faire un plugin en moins.

    Merci

  2. Il faut vraiment que j’installer ces deux modules sur mes blogs.C’est pas par manque de courage mais par manque de temps.Je me pose aussi la question des avantages et inconvénient d’implanter ces deux modules.

  3. C’est vraiment indispensable de rajouter un bout de code pour le bouton facebook ?
    Je croyais qu’il rajoutais automatiquement l’URL de l’article « liké »..

  4. Hello,

    Je ne suis pas un fou des réseaux sociaux et je me demande
    si c’est vraiment utile de placer ces boutons ‘j’aime’.

    J’ai l’impression que les visiteurs cliquent dessus un peu
    comme ça, à la va vite, pour faire plaisir.

    J’ai l’impression que cet outil n’est pas vraiment
    indispensable. Je me trompe ?

    Cordialement,
    Lud@vic

    PS:
    Je parle bien du bouton « j’aime » ce blog ou ce site
    et pas du fait de faire partager son article sur les
    réseaux sociaux d’autres personnes.

  5. Pour ma part, j’aime pas trop toucher au code du site car j’ai de très mauvaise expériences avec des tutos soit disant « faciles »… Donc je m’en tiens aux plugins pour le moment ^^

    Je pense que la présence sur les réseaux sociaux est nécessaire pour tout projet à long terme. Vos lecteurs de demain y seront et il n’y a qu’a voir la rapidité avec laquelle avance facebook et sa gourmandise… Aujourd’hui on trouve des boutiques sur facebook, des like page qui sont, pour certaines marques, plus visitées que leur dotcom… Est ce que demain facebook va pas aussi se positionner sur la recherche a proprement parler ? Je pense qu’il ne vaut mieux pas laisser filer le wagon !

  6. Il faudra un jour parler du fait que ces boutons ajoutent du javascript sur la page et font grossir le nombre de requêtes http. Il n’est pas bien compliqué de récupérer le nombre de share de sa page, de le mettre en cache et de l’afficher dans une image.

  7. Sauf erreur de ma part, si on met le code dans la page single.php, les boutons de partage ne s’affichent pas sur la page d’accueil du blog (dans les introductions d’articles), que sur l’article complet…
    Pense tu que de mettre ces boutons dans le résumé de l’article (sur la page d’accueil) pourrait favoriser le partage ?
    Et dans quelle page faut-il mettre le code dans ce cas ?

  8. Nicolas@bien s'habiller

    J’encourage tout le monde à essayer, la doc de FB est en anglais mais reste abordable pour tout le monde. avec les explications du blog en plus vous ne devriez pas rencontrer de difficultés à mettre en place le fameux bouton j’aime.

  9. Et c’est un peu le but : se débarrasser d’un max de plugin pour alléger le blog 😉

  10. Disons que comme tu le précises, cliquer sur J’aime ou sur +1 est super rapide donc pourquoi s’en priver ?
    Après plus un article est partagé (liké, plussé, tweeté) plus il sera lu, plus il aura de poids par rapport à d’autres qui ne sont pas partagés.
    C’est pareil dans le cas d’un blog tout entier.

    Ça peut aussi être une « preuve sociale », plus on a de like ou de tweets et plus on est partagé : effet boule de neige 😉

  11. Personnellement je n’en sais rien car je n’ai pas testé. L’avantage des boutons présents directement sur la page d’accueil c’est qu’ils sont facilement et rapidement accessibles. L’inconvénient c’est qu’une personne est censée lire ou au moins parcourir l’article avant de le partager donc elle va lire l’article en entier (sur single.php).

    Sinon si tu veux mettre les codes sur ta page d’accueil il suffit de les mettre sur la page d’accueil. Par contre l’url à partager n’étant plus « la page où l’on se trouve » il faut la remplacer par l’url de chaque article (et tester si ça marche car je n’en suis pas sûre :/)

  12. Tout à fait, normalement c’est relativement simple à mettre en place 😉

  13. Je suis un peu perdue avec Facebook.
    Peux-tu faire un résumé ? Et dire les changements qu’il y a eu.
    Car le bouton « Fan de », « Partager », tout cela à disparu.

    Merci !

  14. Ah je suis loin d’être experte en Facebook ! N’hésite pas plutôt à demander à Yael de guide faceboook. Elle pourra mieux te renseigner que moi.

  15. Super, mais je crois que j’ai un problème, je voulais afficher le code des 3 boutons dans ma barre latérale sur la même ligne, mais j’ai le bouton « Tweeter » qui lui est sur une autre ligne, vous pouvez m’aider à les mettre les 3 sur la même svp ?

  16. Bonjour,

    J’ai appliqué le point N°10 pour Facebook avec succès mais depuis quelques jours j’ai le mot « Error » à la place du bouton Like, et uniquement sur Firefox ?!

    Une idée du problème ?

    PS : Pour Error, si je clique dessus il me dit « The href URL must be absolute »… étrange…

  17. je n’arrive pas à faire le n°10 pour les likes :/
    comprend rien..

  18. Déjà que mettre en place ces bouton, c’est plutôt clair sur Facebook et Twitter (mieux documenté qu’il y a quelques temps), mais avec ce tuto pour WordPress c’est parfait 😀

Laisser un commentaire

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