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…

  • Marrant comment un vieil article peut toujours aider… Ton code pour facebook me va impec. Merci.

  • damien

    Merci pour cet article, qui m’a beaucoup aidé dans mon développement, par contre la partie pour google buzz est dépassée, y aurait il la version g+ ?

    • Oui, ce billet a 3 ans. Beaucoup de choses ont changé, y compris dans la conception de ce site. Il existe probablement un code pour inclure un bouton G+, en cherchant bien…

  • Vassili Zaïstev

    Quand on pas accès aux templates c’est vrai que c’est super pratique lol !

  • SophieT

    Merci c’est simple, clair et efficace !! Exactement ce que je cherchais 🙂 et j’ai cherché longtemps !

  • UMA

    Super article. Merci !

  • Florine

    Très bon article.

  • Adrien

    Salut, euh je ne comprend pas trop pour le boutton twitter, mais si c’est un lien que tu veux inséré :

    http://twitter.com/home?status=%5B(#TITRE|sinon{#NOM_SITE_SPIP}|urlencode)]+[(#SELF|urlencode)]

    Voila 😉

  • Mathos78

    super article…ce que je cherche depuis des jours, et génialement détaillé…merci !!

  • Abdo Rabbih
  • dedalus

    Les propriétés width et height de la popup sont à intégrer dans la fonction « ouvre » à placer dans le head de votre page, ainsi qu’indiqué dans le tuto.

  • ROUGE Mémoire

    Bonjour,

    Tuto très enrichissant. Il me manque seulement un élément pour en profiter pleinement.
    Sur la personnalisation du bouton Twitter, la fenêtre s’ouvre en pleine page et je ne trouve pas la solution pour intégrer les propriétés width=550px et height=450px au code afin que la popup s’ouvre avec le même comportement que le bouton twitter officiel.
    Merci pour vos réponses.

  • C moi

    Bonsoir Edwige, j’ai une question si vous pérmettez !

    quand je change post_title par post_content ou par <?php the_content_rss( », TRUE,  », 40); ?>, le lien s’ouvre plus dans une nouvelle fenêtre séparer. Elle s’ouvere dans un nouvel onglet !

    Avez vous une explication à ça ! Merci

  • Kulgar

    Ah j’ai oublié de dire, c’est à utiliser conjointement avec la fonction javascript déjà rédigée par l’auteur de l’article :

    function ouvre(fichier) {ff=window.open(fichier, »popup », »width=600,height=500,left=100,top=100″) }

  • Kulgar

    Bonjour 🙂

    Pour ceux que ça intéresse, voici comment faire pour le bouton « share » de linked_in :

    Utiliser simplement ce code :

    <a href= »http://www.linkedin.com/shareArticle?mini=true&url=http://url de votre page&title=titre de votre page&summary=description succincte du contenu de votre page&source=nom de votre site web » target= »popup », onClick= »ouvre(‘même url que cella fournie à « url= » ci-dessus’);return false »> <img src= »url de l’image de votre bouton » alt= »Bouton de partage LinkedIn » width= »largeur de votre image » height= »hauteur de votre image » title= »Partager sur LinkedIn » /> </a>

    Cela devrait fonctionner, en tout cas pour mon site, ça fonctionne 🙂

    Kulgar – Webmaster de la CT2C.

  • marie morisset

    bonjour! merci infiniment pour cet article!
    j’ai personnalisé mon bouton facebook. c’est en fait une photo d’un texte. quand on clique dessus, c’est bien une page de partage facebook qui s’ouvre, mais le lien est le lien de l’image (c’est-à-dire du bouton lui même). je ne sais pas si je suis claire… help me please 🙂

  • dedalus – 22/01/2011

    Oui, j’avais essayé ces solutions. Mais il semble que je ne puisse pas les mettre en oeuvre directement dans le plugin Get Social – le code n’est pas interprété.  
     
    Mais pour d’autres, ces précisions seront sans doute d’une grande aide. Et donc merci encore.  
     
    Pour ma part, il va me falloir aller regarder comment ça se passe à l’intérieur de Get Social, comprendre pourquoi je ne peux pas inclure du php ou des fonctions et des variables.  
     
    Edwige, si tu as une idée, je suis preneur 🙂

  • Edwige Morin – 21/02/2011

    Pour l’intégrer dans WordPress, mettre le code suivant dans le template.  

    <code>  
    <a title= »Partager sur Twitter » href= »http://twitter.com/share?text=A lire sur <?php bloginfo(‘name’);?> – <?php echo $post->post_title; ?>&via=nom_utilisateur_twitter » target= »popup » onClick= »ouvre(‘http://twitter.com/share?text=A lire sur <?php bloginfo(‘name’);?> – <?php echo $post->post_title; ?>&via=nom_utilisateur_twitter’); return false » > <img src= »/images/twitter-icon.png » alt= »Partager sur Twitter » /></a>  
    </code>  
     
    Cela marche aussi dans CMSMS avec les codes suivants :  
    <code>  
    <a title= »Partager sur Twitter » href= »http://twitter.com/share »  data-url= »{$content_obj->GetURL()} » data-text= »A lire sur {sitename} – {title} » data-count= »none » data-lang= »fr » target= »popup »  onClick= »ouvre(‘http://twitter.com/share?text=A lire sur {sitename} – {title}’);return false »  >  
    <img src= »/images/twitter-icon.png » alt= »Partager sur Twitter » title= »Partager sur Twitter » /></a>  
    </code>  
    Merci pour le billet. <img src= »extra/tiny_mce/plugins/emotions/img/smiley-wink.gif » title= »Wink » border= »0″ alt= »Wink »/>

  • dedalus – 21/02/2011

    Ha ! c’est sympa ce petit coup de main. Merci !  
     
    Oui… mais comment on obtient les codes pour récupérer URL et titre du billet, ou le titre du site, etc… ?  
    En particulier dans WordPress ?

  • Edwige Morin – 16/02/2011

    Pour avoir par exemple le titre du site et le titre du billet dans le message à partager sur Twitter :   
     

    <a title= »Partager sur Twitter » href= »http://twitter.com/share »  data-url= »[Code pour récuperer URL] » data-text= »A lire sur [Code pour titre site] – [code pour titre billet] » data-count= »none » data-lang= »fr » target= »popup » onClick= »ouvre(‘http://twitter.com/share?related=zededalus&amp;text=A lire sur  [Code pour titre site] – [code pour titre billet] ‘); return false » > <img src= »[adresse oueb de votre image du bouton Twitter] » alt= » » /></a>

     
    Ca marche pour moi.