Jan 112011
 

Ils sont tout beaux tout neufs, et je n’en suis pas peu fier. De mes boutons. Des mots que je n’eus guère imaginé être à même de prononcer quand, adolescent, cratérisé l’on m’appelait Face de Lune…

Mais ce n’est pas ainsi qu’on commence un tutoriel, ça ne fait pas sérieux et vous n’êtes pas là pour rigoler, je présume.

Je parle, c’est évident, de mes boutons de partage. Ces petites boules qui flottent avec élégance, comme en apesanteur, à la gauche de ce billet (regardez donc) et qui permettent à tout un chacun de contribuer au rayonnement de chacun de mes billets de blog à travers tout l’univers, via les réseaux sociaux, ces systèmes de bouche à oreille dématérialisé avec effet boule de neige intégré…

Bref, ce qu’on appelle des boutons de partage.

On en trouve désormais sur tous les blogs, me direz-vous. Oui, certes. Mais les miens ont ceci de différent qu’ils sont les miens. Et je ne veux pas croire que je sois le seul à trouver que les boutons proposés par Twitter ou Facebook, Wikio ou Google Buzz, et les autres, non seulement sont généralement assez moches, mais en sus ne s’accordent pas les uns aux autres – ni même au design particulier de tel ou tel blog. Vous je sais pas, mais moi, je n’avais pas envie de les accrocher chez moi.

Si vous partagez avec moi cette réticence esthétique, alors pour sûr vous vous êtes dit que vous aimeriez bien avoir vos propres boutons au dessin personnalisé mais dotés des mêmes fonctionnalités que ceux fournis par chacun des réseaux sociaux. Dit autrement : Comment installer le bouton de partage fourni par tel réseau social (Twitter, Facebook et les autres) avec une image de bouton personnalisée ?

Je vais vous livrer ma réponse. Mais je crois honnête, d’abord, de vous dire qu’en aucun cas je suis programmateur ou codeur, ou spécialiste de ces « choses ». Je ne suis qu’un vulgaire bricoleur, un bidouilleur de codes – bien que plutôt très expérimenté en matière de bidouille, tout de même. Je dois au site du zéro toute ma connaissance du HTML, du CSS et (un peu) du PHP. Quant à ma compréhension du JavaScript, elle demeure tout à fait minimale. Suffisamment pourtant pour me trouver à même de m’approprier un morceau de code et le détourner afin qu’il fasse précisément (ou presque) ce que je lui demande – il ne suffit d’ailleurs en réalité au début que de savoir repérer le morceau de code utile, donc de savoir chercher, puis d’y aller par tâtonnements prudents et subtils. Bref…

Mais j’allais oublié de dire une chose encore, avant d’entrer dans le vif du sujet : un des avantages des codes que vous allez trouver ci-après est qu’ils vous dispensent de copier/coller le code chaque fois que vous rédigez un nouveau billet, puis d’y inclure manuellement et fastidieusement l’adresse dudit billet. Dit autrement,  il vous suffit de copier le code du bouton une fois pour toute au bon endroit directement dans le template de vos billets de blog, le script se chargera ensuite automatiquement et systématiquement de récupérer le lien du billet à partager.

Donc, d’abord les codes, pour chaque bouton, ainsi que quelques explications. Puis la mise en œuvre particulière que j’ai utilisée pour ce blog sous WordPress, avec mon thème Suffusion qu’il est trop cool tellement il est complet, malléable et convivial.

Je fais l’hypothèse que vous avez déjà mis en ligne, c’est-à-dire conçu puis importé dans votre espace d’hébergement, vos images personnalisées des boutons que vous souhaitez voir s’afficher sur votre blog. Sinon, faites-le !

La première chose à faire, maintenant, est de mettre en place un petit script en Javascript permettant à chaque bouton de donner naissance à une fenêtre pop-up (cliquez sur un des boutons à droite pour comprendre) – à défaut, le bouton ouvrira une nouvelle fenêtre dans le navigateur, ou un nouvel onglet, ce qui n’est pas très adapté pour un bouton de partage…

Pour ce faire, il vous suffit d’ajouter dans le <head> de vos pages (donc avant le <body>), le code suivant :

<script type="text/javascript">
function ouvre(fichier) {ff=window.open(fichier,"popup","width=700,height=500,left=100,top=100") }
</script>

Note : width et height fixent la largeur et la hauteur de la fenêtre pop-up, tandis que left et top fixent sa position dans la page du navigateur par rapport à ses bords gauche et supérieur.

Le bouton Facebook

Placez le code suivant à l’endroit où vous souhaitez que s’affiche le bouton :

<div>
<script>function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}</script>
<a title="Partager sur Facebook" href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank">
<img src="[adresse oueb de votre image du bouton Facebook]" alt="Partager sur Facebook" /></a>
</div>

Bon, pour celui-là, la fonction « ouvre dans une pop-up » n’était pas nécessaire, puisqu’on utilise directement celle de Facebook. Et vous avez bien entendu compris qu’il vous faut remplacer [adresse oueb de votre image du bouton Facebook] par l’adresse internet de votre bouton Facebook personnalisé. Enfin, la <div> vous permet de définir plus précisément l’affichage du bouton, en utilisant une classe CSS bien sentie… Et du coup, pour l’exemple, ça donne ça (faisez pas les timides, testez donc) :

Le bouton de vote Wikio

Placez le code suivant à l’endroit où vous souhaitez que s’affiche le bouton :

<div>
<a title="Voter pour cet article sur Wikio" href="http://www.wikio.fr/vote" target="popup" onClick="ouvre('http://www.wikio.fr/vote');return false"><img src="[adresse oueb de votre image du bouton Wikio]" alt="" /></a>
</div>

Tout pareil que pour le bouton Facebook, sauf que nous utilisons cette fois la fonction « ouvre-toi dans une pop-up » … Pour l’exemple, ça donne ça (testez, puisqu’on vous en prie) :

Le bouton Twitter

Placez le code suivant à l’endroit où vous souhaitez que s’affiche le bouton :

<div>
<a title="Partager sur Twitter" href="http://twitter.com/share?related=zededalus&amp;text=A lire chez @zededalus :" target="popup" onClick="ouvre('http://twitter.com/share?related=zededalus&amp;text=A lire chez @zededalus :');return false" ><img src="[adresse oueb de votre image du bouton Twitter]" alt="" /></a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

Là j’ai ramé davantage. Mais vous ça vous est égal, puisque je vous livre un code prémaché. Enfin, pas tout à fait. J’aurais voulu que le texte affiché dans la pop-up Twitter inclue le titre du billet à partager – cliquez sur le bouton Tweetmeme à gauche, le premier, le seul qui ne soit pas personnalisé façon boule, pour comprendre de quoi je parle. J’ai échoué et si donc l’un d’entre vous trouve la solution, je suis preneur (les commentaires sont là pour ça, par exemple).

Bref, je me suis contenté d’un « text=A lire chez @zededalus : » dont vous comprenez bien que vous devez l’adapter, puisque ce n’est pas vous @zededalus

Mais vous allez le tester, ou bien ?

Le bouton Google Buzz

Placez le code suivant à l’endroit où vous souhaitez que s’affiche le bouton :

<div>
<a title="Partager sur Google Buzz" href="http://www.google.com/buzz/post"  data-locale="fr" target="popup" onClick="ouvre('http://www.google.com/buzz/post');return false"><img src="[adresse oueb de votre image du bouton Google Buzz]" /></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

Rien à ajouter par rapport aux boutons précédents. Voyez le résultat :


Je me suis arrêté à ces quatre-là, parce que je n’ai que faire d’autres boutons – bien qu’un bouton « envoyer ce billet par courriel à un ami » me plairait pas mal (mais je crois que c’est là un peu au-delà de mes compétences). Le principe sera néanmoins toujours le même pour tous les réseaux sociaux : récupérer le bouton officiel, regarder comment est fichu le code, puis le bidouiller en s’inspirant des exemples ci-dessus…

Vous aurez cependant remarqué que j’ai ici fait un peu mieux que bricoler des boutons. Je les ai magnifiquement disposés dans le template du billet, à tel point que dans ce billet-ci, déjà bien long, ils sont toujours là, sur la gauche, attendant sagement que vous vouliez bien partager ce billet d’une portée essentielle, sinon universelle. Et ils seront là encore, alors que vous me laisserez un commentaire pour me remercier, ou plus probablement pour vous plaindre de n’avoir rien compris à mes explications. Et jusqu’à la toute fin de cette page, ils seront là, fidèles autant qu’ils sont beaux.

Non seulement ce n’est pas magique, mais je n’y suis pas pour grand chose. J’ai seulement eu la bonne idée de faire se rencontrer, d’une part, le thème Suffusion que j’utilise pour la mise en page de ce blog motorisé par WordPress, thème qui m’autorise notamment à disposer d’un espace libre à la gauche du billet, dans la partie haute duquel sont affichés les informations concernant ledit billet (date de publication, auteur, catégorie, mots-clefs …), et d’autre part, le plugin GetSocial qui propose l’adjonction d’une barre de partage sur les réseaux sociaux ayant la particularité d’être à la fois verticale et flottante.

Il s’est trouvé, pas tout à fait miraculeusement, que le plugin GetSocial propose en sus des réglages parfaitement adaptés à ce que je souhaitais en faire :

– la possibilité de personnalisé la barre : je l’ai rendue transparente et dépourvue de bords ;

– la possibilité de définir la position de la barre dans la page : je l’ai ajusté à mon thème ;

– la possibilité d’activer tel ou tel bouton de réseau social : je les ai tous désactivés, à l’exception du bouton Tweetmeme (je vais y revenir) ;

– la possibilité d’ajouter des boutons d’autres réseaux sociaux : c’est là que j’ai placé les codes de mes boutons.

Le tour était joué.

De la pure bidouille, je vous dis.

Deux échecs pourtant, en sus de ceux déjà mentionnés, et que je rappelle parce ce que je compte sur vous :

– Je ne sais pas comment faire que le bouton Twitter récupère le titre du billet et le fasse figurer dans la pop-up ;

– Je ne sais pas faire un bouton d’envoi par mail – le problème est d’ailleurs sans doute corrélé au précédent puisqu’il s’agit de récupérer le titre du billet, l’adresse du billet, voire tout ou partie du billet, et faire figurer le tout dans un courriel pré-rempli, où il ne suffirait plus que d’ajouter l’adresse email du destinataire… Il aurait cette tête-là, par exemple :

[ne le testez pas, le bouton est inactif ;-)]

Et par ailleurs, donc :

– Je n’ai pas réussi à personnaliser le bouton Tweetmeme ;

– Dans l’idéal, on pourrait vouloir un bouton sur lequel s’affiche le nombre de fois où le billet a été partagé sur le réseau social correspondant. C’est que, comme sur le bouton Tweetmeme, le bouton officiel Facebook, le bouton officiel Twitter, le bouton officiel Google Buzz et le bouton de vote Wikio incluent chacun une telle fonctionnalité, qu’il faudrait donc pouvoir récupérer.  C’est là bien au-delà de mes très maigres compétences.

Mais les commentaires sauront peut-être recueillir vos propositions d’amélioration. Et même vos propositions de boutons, parce que je me rends compte – quand même – qu’on peut sans doute faire mieux que mes petites boules…

Post Scriptum : Je suis têtu. J’ai voulu, avant de conclure, voir si vraiment je ne trouvais pas le moyen de construire un bouton de partage par mail. Ça semble effectivement un peu plus complexe, néanmoins, j’ai trouvé un petit plugin tout simple (pour WordPress), que j’ai tordu un peu, et qui m’a permis de concevoir le joli bouton ci-dessous – mais voilà, j’ai été incapable de l’inclure dans mon enfilade à gauche du billet. Testez-le, vous verrez, le résultat est assez sympathique. Utilisez-le pour vous adresser ce billet par mail, le résultat est même très chouette, je trouve. Pas vous ?

Quand à celui dont je n’ai pas parlé (on va voir ceux qui suivent), c’est – via Add to Any – mon bouton joker…