Partager avec AddThis

Vous vous êtes déjà demandé comment attirer plus de visiteurs sur votre site ? Et de plus en plus vous pensez aux réseaux sociaux qui cumulent aujourd'hui plus du milliard d'utilisateurs. Vous pensez juste ! Il existe de très nombreux moyens d'améliorer son référencement mais le meilleur de tous est bien évidement faire le buzz ou tout du moins être partagé par vos utilisateurs.

Pour cela, il existe de nombreux moyens comme les désormais classiques boutons de partage sur Facebook ou Tweeter mais il est un problème de taille : Il existe beaucoup de réseaux sociaux et tous sont différents en fonction des pays.

Alors comment toucher un maximum de monde sans pour autant programmer un bouton pour chaque réseau ?

La réponse est très simple : AddThis !



Suivez le guide !

Partager avec AddThis


Addthis est un module de partage universel qui permet de partager et diffuser vos pages vers n'importe quel réseau social que l'on parle de Facebook, Tweeter, MySpace, GoogleBuzz, Reddit, et bien d'autres encore (dont la plupart nous sont inconnus !).

Question Mais pourquoi utiliser ce service ?

Il a un avantage incomparable : il fournit des Analyses et statistiques de partage !

Il est véritablement très facile à utiliser et fournit un nombre impressionnant de skin possibles (voir les exemples ci-dessous).

C'est un outil d'une très grande qualité. C'est donc presque une évidence d'en tirer parti ! Vous l'avez déjà certainement vu sur de très nombreux sites et blogs comme nous le faisons nous aussi.

Voici quelques exemples de modules de partages :

 

Addthis Craym.eu Module complet module mac OSX
Retweet addthis

Partager avec Addthis


Comme vous pouvez le constater, il y aura forcément un module qui vous conviendra. Il existe encore plus de skins disponibles sans compter ceux que vous pouvez créer vous-même !

Nous allons apprendre à installer et configurer ce module.


Suivez le guide ! S'inscrire au service AddThis

AddThis est un module web. Pour pouvoir démarrer, nous allons devoir nous inscrire sur leur site.

Rendez-vous sur cette page :

Une fois sur celle-ci, cliquez sur : Join Now

Remplissez alors simplement le formulaire que l'on vous présente :

Formulaire inscription AddThis

Une fois complété, cliquez sur « Register » pour terminer votre inscription.

Vous pouvez d'ores et déjà vous connecter à votre compte. Vous allez recevoir un mail qui vous indique les principales caractéristiques d'AddThis et comment en tirer parti. Il ne contient pas de lien d'activation. Vous n'aurez donc pratiquement pas à vous en soucier.

Maintenant que nous somme inscrit, nous allons choisir et installer notre module.

 

Suivez le guide ! Installation du module

Un module AddThis est en fait un simple morceau de code HTML et Javascript avec parfois, cela dépend du module, un peu de CSS pour afficher le tout correctement ou obtenir des effets particuliers.

Par exemple, pour ce module :

Share |

Voici le code qu'il faut placer dans votre page :

  1. <!-- Début du module AddThis -->
  2. <div class="addthis_toolbox addthis_default_style ">
  3.   <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=VotreNomUtilisateur" class="addthis_button_compact">Share</a>
  4.   <span class="addthis_separator">|</span>
  5.   <a class="addthis_button_preferred_1"></a>
  6.   <a class="addthis_button_preferred_2"></a>
  7.   <a class="addthis_button_preferred_3"></a>
  8.   <a class="addthis_button_preferred_4"></a>
  9. </div>
  10.  
  11. <!--Partie Javascript-->
  12. <script type="text/javascript">
  13.   var addthis_config = {
  14.     "data_track_clickback":true
  15.   };
  16. </script>
  17. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  18. <!-- Fin du module AddThis -->

Vous pouvez constater que c'est un module dynamique car la valeur du bouton « addthis_button_preferred » est donnée par AddThis lui-même, se basant sur ses propres statistiques.

De plus, il appelle un fichier javascript qui contient toutes les fonctionnalités du module. L'affichage des boutons de partage contenus dans la division dépendent de la classe de celle-ci.

Enfin, on trouve un petit morceau de code javascript qui permet d'activer et configurer certaines fonctionnalités comme la langue ou encore le nom des boutons.

Il n'existe pas de règles où et comment placer le module AddThis. Néanmoins, voici quelques conseils pratiques :

  • Placez le bouton bien en vue, de préférence en haut de page. Plus le nombre de personnes qui verront le bouton est important, plus il est probable qu'ils partagent votre contenu et que cela vous génère un retour de trafic important.

  • Il est conseillé de placer le bouton prêt du contenu à partager tout en évitant d'être trop proche des menus de navigation, de manière à ce que les utilisateurs ne cliquent pas dessus par inadvertance. Il sera ainsi plus facile pour eux de comprendre ce qu'ils vont partager.

  • Placer votre bouton de manière à ce qu'il ne gêne pas la navigation sur votre site/blog et qu'il s'intègre bien à celui-ci.


Comme nous l'avons dit précédemment, il existe un très grand nombre de modules. Ils sont tous disponibles sur la page de galerie d'AddThis :

En voici quelques un des plus sympas :

Vous devrez placer ce code :

  1. <!-- Début du module AddThis -->
  2. <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
  3.   <a class="addthis_button_preferred_1"></a>
  4.   <a class="addthis_button_preferred_2"></a>
  5.   <a class="addthis_button_preferred_3"></a>
  6.   <a class="addthis_button_preferred_4"></a>
  7. </div>
  8. <!--Partie Javascript-->
  9. <script type="text/javascript">
  10.   var addthis_config = {
  11.     "data_track_clickback":true
  12.   };
  13. </script>
  14. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  15. <!-- Fin du module AddThis -->

Notez que pour afficher de grandes icônes, il faut utiliser l'option : « addthis_32x32_style » comme dans l'exemple ci-dessus.





S'obtient avec le code :

  1. /* Code CSS */
  2. .addthis_toolbox.addthis_pill_combo a {
  3.     float: left;
  4. }
  5. .addthis_toolbox.addthis_pill_combo a.addthis_button_tweet,
  6. .addthis_toolbox.addthis_pill_combo a.addthis_counter {
  7.     margin-top: -2px;
  8. }
  9. .addthis_button_compact .at15t_compact {
  10.     margin-right: 4px;
  11.     float: left;
  12. }

Code HTML à inclure dans la page :

  1. <!-- Début du module AddThis -->
  2. <div class="addthis_toolbox addthis_pill_combo">
  3.   <a class="addthis_button_tweet" tw:count="horizontal"></a>
  4.   <a class="addthis_button_facebook_like"></a>
  5.   <a class="addthis_counter addthis_pill_style"></a>
  6. </div>
  7. <!--Partie Javascript-->
  8. <script type="text/javascript">
  9.   var addthis_config = {
  10.     "data_track_clickback":true
  11.   };
  12. </script>
  13. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  14. <!-- Fin du module AddThis -->


 

Le bouton de partage inline classique :

Share

S'obtient avec le code :

  1. <!-- Début du module AddThis -->
  2.   <a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button"><img src="http://s7.addthis.com/static/btn/v2/lg-share-fr.gif" width="125" height="16" border="0" alt="Share" /></a>
  3. <!--Partie Javascript-->
  4. <script type="text/javascript">
  5.   var addthis_config = {
  6.     "data_track_clickback":true
  7.   };
  8. </script>
  9. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  10. <!-- Fin du module AddThis -->




Un autre exemple avec un bouton CSS 3 :

S'obtient avec le code :

  1. /* Code CSS 3 */            
  2. .addthis_share_btn a, .addthis_share_btn a:visited {
  3.     background: #222 url(images/btn-overlay.png) repeat-x;
  4.     display: inline-block;
  5.     padding: 6px 12px;
  6.     font-family: arial,helvetica,lucida,verdana,sans-serif;
  7.     font-size: 12px;
  8.     line-height: 1em;
  9.     color: #fff;
  10.     text-decoration: none;
  11.     -moz-border-radius: 5px;
  12.     -webkit-border-radius: 5px;
  13.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  14.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
  15.     border-radius: 5px;
  16.     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  17.     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  18.     border-bottom: 1px solid rgba(0,0,0,0.25);
  19.     position: relative;
  20.     cursor: pointer;
  21. }
  22. .addthis_share_btn a:hover { background-color: #111; color: #fff; }
  23. .addthis_share_btn a:active { top: 1px; }
  24.  
  25. .addthis_share_btn a span, .addthis_share_btn:visited a span {
  26.     background: url(images/icon-addthis.gif) no-repeat left;
  27.     padding: 1px 0 1px 18px;
  28. }

(N'oubliez pas d'enregistrer et réutiliser les deux images du CSS)

Code HTML à inclure dans la page :

  1. <!-- Début du module AddThis -->
  2. <div class="addthis_toolbox at_large addthis_share_btn at_red">
  3.     <a href="http://addthis.com/bookmark.php" class="addthis_button_compact">
  4.     <span>Share</span></a>
  5. </div>  
  6. <!--Partie Javascript-->
  7. <script type="text/javascript">
  8.   var addthis_config = {
  9.     "data_track_clickback":true,
  10.     ui_offset_top: 16
  11.   };
  12. </script>
  13. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  14. <!-- Fin du module AddThis -->




Enfin, voici notre dernier exemple :

S'obtient avec le (très gros) code :

  1. /* Code CSS */            
  2. /* AddThis Vertical Hover Menu */
  3.  
  4. .addthis_toolbox .custom_hover {
  5.     position: relative;
  6. }
  7.  
  8. .addthis_toolbox .custom_hover .custom_button {
  9.     font-weight: bold;
  10.     padding: 6px 12px 6px 12px;
  11.     color: #000000;
  12.     cursor: pointer;
  13.     -moz-border-radius: 5px 5px 0 0;    
  14.     -webkit-border-radius: 5px 5px 0 0;
  15. }
  16.  
  17. .addthis_toolbox .custom_hover .custom_button.active {
  18.     background-color: #eee;
  19. }
  20.  
  21. .addthis_toolbox .hover_menu  {
  22.     display: none;
  23.     position: absolute;
  24.     background: #fff;
  25. }
  26.  
  27. .addthis_toolbox .custom_hover .tower {
  28.     -webkit-border-radius: 0 5px 0 0;  
  29.     -moz-border-radius-topleft: 0;
  30.    
  31. }
  32. .addthis_toolbox .hover_menu  {
  33.     width: 136px;
  34.     padding: 1px;
  35.     border: 3px solid #eee;
  36.     -moz-border-radius: 5px;
  37.     -webkit-border-radius: 5px;
  38. }
  39.  
  40. .addthis_toolbox .hover_menu a {    
  41.     position: relative;
  42.     display: block;
  43.     width: 102px;
  44.     padding: 4px 0 4px 34px;
  45.     text-decoration: none;
  46.     color: #000000;
  47. }
  48.  
  49. .addthis_toolbox .hover_menu a:hover {    
  50.     background: #f5f5f5;
  51.     color: #027999;
  52.     text-decoration: none;
  53.     -moz-border-radius: 4px;
  54.     -webkit-border-radius: 4px;
  55. }
  56.  
  57. .addthis_toolbox .hover_menu span {
  58.     position: absolute;
  59.     left: 14px;
  60.     top: 4px;
  61. }
  62.  
  63. .addthis_toolbox .hover_menu .more {
  64.     border-top: solid 1px #eee;
  65.     padding: 10px 0 0 0;
  66.     margin: 10px 10px 0 10px;
  67.     text-align: center;
  68. }
  69.  
  70. .addthis_toolbox .hover_menu .more a {
  71.     padding: 4px 0;
  72.     margin: 0;
  73. }
  74.  
  75. .addthis_toolbox .hover_menu .more a:hover {
  76.     background: none;
  77. }
  78. .addthis_toolbox .hover_menu .more span {
  79.     display: none;
  80. }

Code HTML à inclure dans la page :

  1. <!-- Début du module AddThis -->
  2. <div class="addthis_toolbox">
  3.     <div class="custom_hover">
  4.         <span class="custom_button">Passez au dessus de moi</span>
  5.     </div>
  6.     <div class="hover_menu">
  7.         <div class="column1">
  8.             <a class="addthis_button_email">Email</a>
  9.         </div>
  10.         <div class="column2">
  11.             <a class="addthis_button_print">Print</a>
  12.         </div>
  13.         <div class="clear"></div>
  14.         <div class="top"></div>
  15.         <div class="column1">
  16.             <a class="addthis_button_twitter">Twitter</a>
  17.             <a class="addthis_button_facebook">Facebook</a>
  18.             <a class="addthis_button_myspace">MySpace</a>
  19.         </div>
  20.         <div class="column2">
  21.             <a class="addthis_button_delicious">Delicous</a>
  22.             <a class="addthis_button_stumbleupon">Stumble</a>
  23.             <a class="addthis_button_digg">Digg</a>
  24.         </div>
  25.         <div class="clear"></div>
  26.         <div class="more">
  27.             <a class="addthis_button_expanded">More...</a>
  28.         </div>
  29.     </div>
  30. </div>
  31.  
  32. <!--Partie Javascript-->
  33. <script type="text/javascript">
  34. $(function() {
  35.     var delay = 400;
  36.    
  37.     function hideMenu() {
  38.         if (!$('.custom_button').data('in')
  39.       && !$('.hover_menu').data('in')
  40.       && !$('.hover_menu').data('hidden'))
  41.       {
  42.         $('.hover_menu').fadeOut('fast');
  43.         $('.custom_button').removeClass('active');
  44.         $('.hover_menu').data('hidden', true);
  45.           }
  46.     }
  47.    
  48.     $('.custom_button, .hover_menu').mouseenter(function() {
  49.         $('.hover_menu').fadeIn('fast');
  50.         $('.custom_button').addClass('active');
  51.         $(this).data('in', true);
  52.         $('.hover_menu').data('hidden', false);
  53.     }).mouseleave(function() {
  54.         $(this).data('in', false);
  55.         setTimeout(hideMenu, delay);
  56.     });    
  57.    
  58. });
  59. </script>
  60. <script type="text/javascript">
  61.   var addthis_config = {
  62.     "data_track_clickback":true,
  63.     ui_offset_top: 16
  64.   };
  65. </script>
  66. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  67. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  68. <!-- Fin du module AddThis -->

Impressionnant n'est-ce pas ? Vous trouverez des modules encore plus bluffants sur la galerie d'AddThis :

N'hésitez pas à y faire un tour c'est très très bien fait !



Suivez le guide !

Configuration de votre module AddThis

Bien ! Maintenant que vous avez choisi et installé votre module (copier et collé les codes dans votre page), vous voudrez certainement choisir ce que vous voulez afficher comme icône et dans quel ordre.

Toute la configuration du module se trouve dans les liens <a> et dans la classe utilisée pour la div.

A chaque classe correspond un module / affichage différent. Certains ne requièrent aucune action particulière de votre part mais d'autre nécessitent des images déjà sur votre site ou des codes plus évolués.

Pour les liens <a>, certains permettent de forcer un certain bouton à apparaitre, d'autres comme : « addthis_button_preferred » sont dynamiques et sont affichés par Addthis lui-même.

Pour tous les modules, vous devez avoir au minimum les deux codes de javascript ci-dessous présents dans votre page sans quoi le module sera tout simplement inactif (surtout les statistiques).

  1. <!--Partie Javascript-->
  2. <script type="text/javascript">
  3.   var addthis_config = {
  4.     "data_track_clickback":true
  5.   };
  6. </script>
  7. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  8. <!-- Fin du module AddThis -->

Comme en réalité le module AddThis ne dépend que des classe et des liens, vous pouvez supprimer la division et la remplacer par une table ou tout simplement mettre la classe dans le lien comme cela vous serez en mesure d'afficher n'importe où dans votre page un bouton précis.

Question

Pensez à remplacer « VotreNomUtilisateur » dans les différents codes par votre pseudo sur le site d'AddThis afin de permettre la capture des analyses.

Notez aussi que le javascript doit être activé pour que le module apparaisse. Sinon rien ne se passera même si c'est de nos jours assez rare.

Ci-dessous vous trouverez des liens <a> et des classes pour permettre des affichages spécifiques.

Vous pouvez mélanger les codes sans aucune restriction du moment que vous appliquez les bonnes classes sur les bons liens pour obtenir l'affichage souhaité.

Pour modifier certains boutons, vous devrez leur passer des paramètres. Pour cela, vous devrez, dans la balise <a>, entrez le nom du module souhaité suivit de deux points « : » puis donner le nom du paramètre et sa valeur comme par exemple « fb:like:action="recommend" » qui active l'utilisation de « Recommander » au lieu de « J'aime » sur le bouton de partage de Facebook.

Tous les paramètres que vous pouvez passer sont les paramètres des API officielles que vous pouvez trouver sur les pages de partage de chaque réseau social / blog / outil de partage.

 


Suivez le guide ! Module en français

Par défaut, le module AddThis détecte seul la langue de l'utilisateur mais cela ne fonctionne pas toujours.

Vous pouvez donc forcer la langue de votre module en configurant le javascript comme ceci :

  1. <!--Partie Javascript-->
  2.   <script type="text/javascript">
  3.     var addthis_config = {
  4.     ui_language: "fr",
  5.     clean: true,
  6.     "data_track_clickback":true
  7.   };
  8. </script>

C'est « ui_language: "fr" » qui force l'affichage de la langue en français. Vous pouvez utiliser toutes les langues ci-dessous :

Liste cache, cliquer pour afficher / cacher la liste
Afrikaans : « af » Finnish : « fi » Lithuanian : « lt » Sinhala : « si »
Albanian : « sq » French : « fr » Luxembourgish : « lb » Slovak : « sk »
Arabic : « ar » Galician : « gl » Macedonian : « mk » Slovenian : « sl »
Azerbaijani : « az » German : « de » Malay : « ms » Spanish : « es »
Basque : « eu » Greek (Modern) : « el » Malayalam : « ml » Sundanese : « su »
Belarusian : « be » Gujarati : « gu » Mongolian : « mn » Swahili : « sw »
Bengali : « bn » Haitian : « ht » Northern Sami : « se » Swedish : « sv »
Bosnian : « bs » Hebrew : « he » Norwegian : « no » Tagalog : « tl »
Bulgarian : « bg » Hindi : « hi » Norwegian Bokmål : « nb » Tamil : « ta »
Catalan; Valencian : « ca » Hungarian : « hu » Norwegian Nynorsk : « nn » Tatar : « tt »
Chinese : « zh » Icelandic : « is » Occitan : « oc » Telugu : « te »
Croatian : « hr » Indonesian : « id » Persian : « fa » Thai : « th »
Czech : « cs » Irish : « ga » Polish : « pl » Tswana : « tn »
Danish : « da » Italian : « it » Portuguese : « pt » Turkish : « tr »
Dutch; Flemish : « nl » Japanese : « ja » Pushto : « ps » Ukrainian : « uk »
Esperanto : « eo » Korean : « ko » Romanian : « ro » Urdu : « ur »
Estonian : « et » Kurdish : « ku » Russian : « ru » Vietnamese : « vi »
Faroese : « fo » Latvian : « lv » Serbian : « sr » Welsh : « cy »


Suivez le guide ! Module Facebook : Le bouton J'aime et le bouton de partage

Le module AddThis gère très bien le bouton de Facebook.

Par défaut, c'est le bouton de partage sur Facebook qui est activé :

Facebook default

Code :

  1. <a title="Partager sur Facebook"  class="addthis_button_facebook"></a>

Pour le bouton « j'aime » classique,

Facebook j'aime

Utilisez la syntaxe suivante :

  1. <a title="Partager sur Facebook" class="addthis_button_facebook_like" fb:like:layout="standard"></a>

Notez que vous pouvez « coupez » le bouton en réduisant sa largeur avec l'attribut : « fb:like:height="63" »

Pour le bouton avec compteur horizontal :

Facebook compteur

Utilisez le code suivant :

  1. <a title="Partager sur Facebook" class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

Enfin, pour le bouton vertical

Facebook compteru vertical

Rajoutez simplement le bon paramètre dans le bouton :

  1. <a title="Partager sur Facebook" class="addthis_button_facebook_like" fb:like:layout="box_count" fb:like:height="63"></a>

Vous pouvez utiliser le bouton « recommander » :

Facebook recommander

En utilisant le paramètre « fb:like:action="recommend" » :

  1. <a title="Partager sur Facebook" class="addthis_button_facebook_like" fb:like:layout="standard" fb:like:action="recommend" fb:like:width="450" ></a>

Notez enfin que vous pouvez régler la largeur et la hauteur avec les attributs « fb:like:width="450" » et « fb:like:height="63" ».



Suivez le guide ! Module Tweeter

Addthis supporte toutes les versions du bouton de partage de twitter.

Comme pour les autres modules, il faut passer les différents arguments d'affichage dans la balise <a>. Tous les arguments passés commencent par « tw: »

Par défaut, le bouton classique sera affiché :

Tweet par défaut

C'est ce code que vous devrez placer dans votre module :

  1. <a title="Partager sur Tweeter" class="addthis_button_tweet"></a>

En revanche, si vous voulez utilisez le bouton vertical, il faudra ajouter un argument dans la balise <a>

Tweet vertical

Comme ceci :

  1. <a title="Partager sur Tweeter"  tw:count="vertical" class="addthis_button_tweet"></a>

Et pour le compteur horizontal,

Tweet Horizontal

Utilisez :

  1. <a title="Partager sur Tweeter"  tw:count="horizontal" class="addthis_button_tweet"></a>

Enfin, pour le bouton de retweet,

retweeter

Utilisez :

  1. <a class="addthis_button_tweetmeme" tm:style="compact"></a>

Comme nous l'avons vu précédemment, toutes les options du bouton sont supportées.

Vous pouvez utiliser toutes les options suivantes. Elles doivent être impérativement précédé de « tw: »

url URL de la page à partager
via Pseudo de la personne qui sera cité comme source dans le Tweet
text Text du Tweet par défaut
related Comptes apparenté
count Position du compteur
lang Langue du bouton de Tweet
counturl L'URL de la page qui sera utilisé pour le partage

Voici un exemple :

  1. <a class="addthis_button_tweet" tw:count="horizontal" tw:via="[PSEUDO du VIA]" tw:text="[TEXTE PAR DEFAUT]" tw:related="[COMPTE LIE AU BOUTON DE TWEET]" ></a>

Ce bouton permet, via le remplacement des différentes valeurs entre crochet [] de citer une personne comme source dans le tweet, de donner un texte par défaut à celui-ci et de donner une liste de personne liés à cette page. De plus, le compteur sera horizontal.

Vous pouvez consulter l'API de tweeter (en anglais) sur cette page pour plus de détails :

 

Suivez le guide ! Module AddThis


AddThis a lancé son propre bouton de partage. Il compte le nombre de personnes qui utilisent le module pour partager vos pages et donne l'accès à tous les réseaux de partage d'AddThis.

Comme pour les boutons de Facebook et de Tweeter, on retrouve le bouton de base petit ou grand format sans compteur :

Code :

  1. <div class="addthis_toolbox addthis_default_style">
  2.   <a class="addthis_button_compact"></a>
  3. </div>

Et

Code :

  1. <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
  2.   <a class="addthis_button_compact"></a>
  3. </div>

Mais il existe aussi des versions avec compteur :

Code :

  1. <div class="addthis_toolbox>
  2.   <a class="addthis_counter addthis_pill_style"></a>
  3. </div>

Ou encore avec compteur vertical cette fois-ci :

Code :

  1. <div class="addthis_toolbox>
  2.   <a class="addthis_counter"></a>
  3. </div>



Suivez le guide ! Favoris

Pour afficher le bouton de favoris :

favoris ou Favoris 32x32

Code :

  1. <a title="Ajouter au favoris" class="addthis_button_favorites"></a>


Suivez le guide ! Imprimer

Pour afficher le bouton d'imprimante :

print ou Print 32x32

Code :

  1. <a title="Imprimer" class="addthis_button_print"></a>


Suivez le guide ! E-mail

Pour afficher la lettre pour envoyer par e-mail :

mail ou mail 32x32

Code :

  1. <a title="Envoyer par E-mail" class="addthis_button_email"></a>


Suivez le guide ! Les autres services

Il existe une énorme quantité de services. Ils ne sont pas tous détaillés ci-dessus mais vous pouvez aller voir directement sur AddThis la liste des services disponibles :

Voici quelques boutons de services en plus que vous pouvez utiliser dans votre module :


Digg

  1. <a class="addthis_button_digg"></a>

Compact

  1. <a class="addthis_button_compact"></a>

Expanded

  1. <a class="addthis_button_expanded"></a>



Suivez le guide ! Amélioration du code

La validation de vos pages peut-être compromise par le module AddThis. Notamment si vous passez des paramètres dans les URLs. Il existe quelques astuces pour permettre la validation de celle-ci.

Pour obtenir un code valide en XHTML, vous pouvez passer par du javascript qui ne sera pas interprété. Cela présente en revanche le désavantage de légèrement ralentir votre page (car il faut que le javascript interprète le code puis le redonne au navigateur qui lui va aller demander les images).

Ce n'est pas grand-chose si l'on considère le gain d'avoir une page valide XHTML. Il est toutefois déconseillé de l'utiliser trop souvent.

Pour se faire, il suffit de placer votre code comme nous l'avons fait ci-dessous :

  1. <script type="text/javascript">
  2.   //<![CDATA[
  3.     document.write(unescape('<a title="Partager sur Facebook" fb:like:layout="box_count" fb:like:height="63"  class="addthis_button_facebook_like"></a><a title="Partager sur Tweeter"  tw:count="vertical" class="addthis_button_tweet"></a>'));
  4.   //]]>
  5. </script>



Pour changer le titre des boutons lorsque vous passez longtemps votre souris dessus, vous pouvez utiliser l'attribut « title="Description" » sur chaque lien comme nous l'avons fait ci-dessus.

  1. <a title="Envoyer par E-mail" class="addthis_button_email"></a>

Notez aussi que vous pouvez utiliser un séparateur pour créer des espaces :

  1. <span class="addthis_separator">|</span>



AddThis existe aussi pour les Blog, WordPress, MySpace mais aussi en Flash.

Pour obtenir ces différents codes, rendez-vous directement sur la page des modules spécifiques d'AddThis :




Il existe un module nommé Aquaticus ToolBox. Il s'agit d'un module ou les images de partage sont de 64x64 pixels de large. AddThis ne fournit pas ces images directement.

Share to Facebook Share to Twitter Share to MySpace Stumble It Share to Reddit Share to Delicious More...

S'obtient avec le code :

  1. /* Custom Icons */
  2. .addthis_toolbox .custom_images a {
  3.     width: 64px;
  4.     height: 64px;
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8. .addthis_toolbox .custom_images a img {
  9.     opacity: 1.0;
  10. }
  11. .addthis_toolbox .custom_images a:hover img {
  12.     opacity: 0.75;
  13. }

Code HTML à inclure dans la page :

  1. <!-- Début du module AddThis -->
  2. <div class="addthis_toolbox">
  3.    <div class="custom_images">
  4.       <a class="addthis_button_facebook"><img src="aquaticus/facebook.png" width="64" height="64" alt="Share to Facebook" /></a>
  5.       <a class="addthis_button_twitter"><img src="aquaticus/twitter.png" width="64" height="64" alt="Share to Twitter" /></a>
  6.       <a class="addthis_button_myspace"><img src="aquaticus/myspace.png" width="64" height="64" alt="Share to MySpace" /></a>
  7.       <a class="addthis_button_stumbleupon"><img src="aquaticus/stumbleupon.png" width="64" height="64" alt="Stumble It" /></a>
  8.       <a class="addthis_button_reddit"><img src="aquaticus/reddit.png" width="64" height="64" alt="Share to Reddit" /></a>
  9.       <a class="addthis_button_delicious"><img src="aquaticus/delicious.png" width="64" height="64" alt="Share to Delicious" /></a>
  10.       <a class="addthis_button_more"><img src="addthis_64.png" width="64" height="64" alt="More..." /></a>
  11.    </div>
  12. </div>
  13.  
  14. <!--Partie Javascript-->
  15. <script type="text/javascript">
  16.   var addthis_config = {
  17.     "data_track_clickback":true,
  18.     ui_offset_top: 16
  19.   };
  20. </script>
  21. <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=VotreNomUtilisateur"></script>
  22. <!-- Fin du module AddThis -->


Vous pouvez télécharger un pack des principales images d'Aquaticus avec le lien ci-dessous :

Vous devrez ajuster les adresses relatives des images pour afficher correctement le module. Vous pouvez aussi créer vos propres images et les inclure dans votre module !


Chargement asynchrone. Par défaut, le module AddThis se lance dès qu'il est rencontré sur la page. Vous pouvez forcer le module à ce lancer qu'une fois que la page a été complètement chargée.

Pour ce faire, il suffit de modifier quelque peu le javascript avec le code ci-dessous :

  1. <script type="text/javascript">
  2.      function initAddThis()
  3.      {
  4.           addthis.init()
  5.      }
  6.      // Après que la page aie été chargée
  7.      initAddThis();
  8. </script>

De la même manière, vous pouvez aussi désactiver le CSS :

  1. <script type="text/javascript">
  2.      var addthis_config = {
  3.          ui_use_css : false
  4.      }
  5. </script>



Suivez le guide !

Des statistiques de partage

AddThis fournit des analyses très précises sur son module de partage.

Le nombre de fonctionnalités étant important, il a été détaillé dans un autre tutoriel.

Vous y trouverez tous les codes à vérifier et intégrer dans votre page pour obtenir l'accès à vos statistiques.


Félicitations ! Vous êtes maintenant parfaitement en mesure d'ajouter AddThis à votre site !