Pré-requis

Tout commence par la création d'un compte sur le site de Addthis.

Ensuite, il est important d'avoir réfléchi à l'endroit où vous souhaitez faire figurer vos boutons de partage. Dans mon cas, j'ai décidé de ne les inclure que dans la vue détaillée d'un article : le fichier concerné par la modification sera donc "post.html".

Par la suite, nous utiliserons l'éditeur de thème intégré à Doclear; il est donc nécessaire que votre serveur Apache HTTPD dispose des droits de modification sur les fichiers de thème. Si ce n'est pas le cas, vous devrez fixer ce problème de droits ou utiliser un autre moyen d'édition (par connexion SSH , puis utilisation de "vi" par exemple).

Générer le code Addthis

C'est l'étape la plus simple; contentez-vous de vous identifier sur le site Addthis, puis allez dans la rubrique de partage.

Il suffit alors de personnaliser un peu votre zone Addthis via le menu de gauche, puis de constater le code qu'il faudra copier dans la zone de droite, rubrique "Add to your site".

Note : pour intégrer d'autres boutons comme celui de Google+, il vous faudra aller fouiller dans la rubrique des boutons tiers. Le code de chaque bouton devra être intégré dans le code principal que vous avez généré juste au dessus.

Intégrer le code Addthis

L'intégration du code généré par Add this est encore une fois très simple !

Commencez par aller dans l'éditeur de thème intégré à l'administration de Doclear (dans le menu "Blog" puis "Apparence du blog"; sélectionnez le thème à modifier puis cliquez sur "Éditeur de thème") ; ici, sélectionnez le fichier que vous souhaitez modifier, par exemple "post.html". Après avoir localisé la zone au sein de laquelle vous souhaitez placer les boutons de partage, insérez le code copié depuis Addthis et le tour est joué !

Dans mon cas, voici le code que j'ai inséré juste avant la zone listant les commentaires (cette zone commençant par le code de template "<tpl:Attachments>") :

<!-- AddThis Button BEGIN -->
    <div class="dc-share-links">
      <div class="addthis_toolbox addthis_default_style">
        <a class="addthis_button_google_plusone" g:plusone:annotation="bubble"></a> 
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
        <a class="addthis_button_tweet"></a>
        <a class="addthis_counter addthis_pill_style"></a>
      </div>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true, ui_language: "fr"};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-506984750de51d31"></script>
    <!-- AddThis Button END -->

Vous noterez que j'ai encadré le code Addthis par un nouveau DIV afin de personnaliser davantage mon thème.

Conclusion

Voilà, en moins de 10 minutes vous avez ouvert votre blog vers le monde merveilleux (ou pas) des réseaux sociaux.

A vous d'adapter cet article selon vos besoins ; n'hésitez pas à faire part de vos remarques. ;)