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.
- Dans “URL to Like” ne mettez rien pour l’instant.
- Cochez la case “Send Button” si vous voulez également le bouton “Envoyer” de Facebook, décochez-la si vous n’en voulez pas.
- Pour “Layout Style” vous avez trois propositions. Je vous conseille la 2e, “button_count” pour gagner de la place.
- Width c’est la largeur de votre bouton Like. Avec le bouton Envoyer, 200px devraient être suffisant.
- 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”.
- Dans “Verb to display” vous pouvez choisir entre le verbe aimer et le verbe recommander, selon votre public. Personnellement j’ai laissé “like”.
- Dans “Color Scheme” laissez “light” à moins que vous n’ayez un blog avec des couleurs foncées.
- Vous pouvez également choisir la police de votre bouton.
- Cliquez sur Get Code.
- 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)); ?>&
- 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.
- 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”.
- Dans “Texte du Tweet“, laissez coché : “Titre de la page du bouton”, ça sera le titre de votre article.
- Dans “Url“, laissez coché : “URL de la page du bouton”, ça sera le lien vers votre article.
- Dans “Langue”, laissé sélectionné ”Français“.
- Dans le petit 2 mettez le nom de votre compte Twitter (juste le nom suffit, pas l’url en entier).
- En dessous, vous avez un aperçu de votre bouton et son code.
- 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 ?
ThierryV from delice chocolat (1 comments)
oct 09. 2011
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
Le dernier article : Le chocolat. Petit historique
Jérôme from devis portail gratuit (1 comments)
oct 10. 2011
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.
Ben from maillot nba (2 comments)
oct 10. 2011
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é”..
Le dernier article : Maillot Batum SLUC Nancy
Ludovic (57 comments)
oct 10. 2011
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.
Le dernier article : Coup de gueule : paypal m’a fait perdre 1400 Euros. Comment l’éviter…
ratus13 from hunter x hunter 2011 en streaming (4 comments)
oct 10. 2011
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 !
Le dernier article : Hunter X Hunter Episode 02 Vostfr
pioc (1 comments)
oct 10. 2011
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.
Wald (5 comments)
oct 10. 2011
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 ?
Le dernier article : Comment éviter les erreurs dans les commentaires de votre blog avec un simple plugin WordPress
Nicolas from bien s'habiller (2 comments)
oct 11. 2011
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.
Le dernier article : Que mettre dans sa valise pour un voyage sous les tropiques ?
kategriss from formation AWeber (296 comments)
oct 12. 2011
Et c’est un peu le but : se débarrasser d’un max de plugin pour alléger le blog
kategriss from formation AWeber (296 comments)
oct 12. 2011
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
kategriss from formation AWeber (296 comments)
oct 12. 2011
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 :/)
kategriss from formation AWeber (296 comments)
oct 12. 2011
Tout à fait, normalement c’est relativement simple à mettre en place
Naxelana from Bougie de Marque (2 comments)
oct 23. 2011
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 !
kategriss from formation AWeber (296 comments)
oct 27. 2011
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.
Le dernier article : Testez la clarté de vos articles grâce un étranger et un enfant
Vladyk (2 comments)
fév 07. 2012
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 ?
Le dernier article : Je pense à moi !
Olivier636 (2 comments)
jan 17. 2013
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…
Olivier636 (2 comments)
jan 17. 2013
Bon ben j’ai trouvé la soluce ici :
http://www.hongkiat.com/blog/fb-href-absolute-error/
Jujuu88 (1 comments)
jan 29. 2013
je n’arrive pas à faire le n°10 pour les likes :/
comprend rien..