Ajouter le bouton AddThis sur votre blog

Et voilà, je viens juste de finir d'ajouter le bouton AddThis au bas de chaque message. Je vais donc en profiter pour vous faire un petit retour d'expérience.

1. Le choix du fournisseur de bouton

En vous promenant sur le web, vous avez surement déjà croisé ce bouton ainsi que celui de son concurrent ShareThis. J'ai choisi AddThis pour sa simplicité de mise en œuvre et son design plus compact. En plus, c'est le bouton le plus utilisé.

2. La génération du code

On obtient le code à partir de la page get your own button. L'intérêt de passer par cette étape plutôt que de prendre le code de base est de s'éviter de le paramétrer pour le rendre compatible avec sa plateforme de blog.
Pour info, le code blogger se présente sous cette forme :

<!-- AddThis Button BEGIN -->
<div><script type="text/javascript">
var addthis_language = "fr";
</script>
<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script></div>
<!-- AddThis Button END -->

Une fois le code compatible avec votre blog, vous pouvez créer un compte pour pouvoir bénéficier de l'outil d'analyse (et apparemment de la fonction d'envoi par mail).

3. La personnalisation

Le bouton est entièrement personnalisable grâce à une série de variables à ajouter. Le site d'AddThis les répertorient tous sur la page dédiée http://www.addthis.com/help/customize/custom-button/.
Vous pourrez ainsi choisir les services qui s'affichent sur le bouton, modifier sont apparence ou encore la langue utilisée.

4. L'intégration dans le blog

Comme je bloggue sur blogger, ce qui suis ne compte pour blogger.
Le code se place à la fin de chaque message de cette manière :

1. Se connecter sur Blogger. Aller sur "Mise en page", puis sur "Modifier le code html" et là cocher "développer des modèles de gadget".
2. Trouver la ligne de code suivante : <p><data:post.body/></p> et coller le code du bouton juste après.
3. Enregistrer votre modèle et allez voir le résultat.

N'hésitez pas à me contactez si vous avez des questions.