Tutoriel : Intégrer un bouton Flattr à son thème WordPress

16 mai 2010

Présentation de Flattr

Flattr est un nouveau système de « digg-like social » permettant de valoriser et de monétiser la création de contenu sur le web. Le service offre en outre un moyen simple et innovant de rémunérer les auteurs tels que les blogueurs. Veuillez toutefois noter qu’à l’heure ou j’écris ce billet, Flattr est toujours en beta privée.

Si vous lisez ce tutoriel, j’imagine donc que vous disposez déjà d’un compte Flattr et que vous avez en votre possession votre User ID (affiché sur votre Dashboard Flattr).

Intégration d’un bouton Flattr à votre thème WordPress

Premièrement, il vas falloir installer le plugin Flattr pour WordPress disponible ici. L’installation est classique et ne nécessite aucune procédure particulière, utilisez simplement le gestionnaire de plugins de WordPress.

Une fois le plugin installé, un nouvel onglet nommé Flattr est apparu dans le menu Réglages de WordPress. C’est à partir de ce module que vous devez configurer le plugin et en particulier renseigner votre Flattr user ID.

Etant donné que nous allons voir comment ajouter manuellement le bouton Flattr à votre blog, laissez décochée la case « Insert Flattr button automagically« .

Modification des fichiers de votre thème

Désormais le plugin Flattr est correctement installé et configuré sur votre blog. L’étape suivante consiste à modifier les fichiers de votre thème afin d’ajouter l’appel au bouton Flattr et d’ajouter les styles CSS qui afficherons le bouton en haut à droite de chaque article.

1 : Édition du fichier CSS : cherchez et ouvrez le fichier wordpress/wp-content/themes/<nom de votre thème>/style.css et ajoutez en fin de fichier le code ci-dessous :

.flattr-container { float: right; margin-left: 15px; }

2 : Édition des templates : nous allons devoir rajouter l’appel au bouton Flattr dans chaque fichier de votre thème servant à afficher un billet. Ainsi, nous allons pouvoir décider d’afficher ou non le bouton sur chaque page de votre blog.

Pour commencer, ouvrez le fichier wordpress/wp-content/themes/<nom de votre thème>/index.php et cherchez l’appel à la fonction the_content().

Afin d’afficher le bouton, il suffit de rajouter avant l’appel de cette fonction le code ci-dessous :

<div class="flattr-container">
	<?php the_flattr_permalink() ?>
</div>

Pour afficher le bouton sur la page affichant un billet, vous devez répéter l’opération sur le fichier single.php puis sur les fichiers archive.php, category.php et tag.php s’ils existent pour votre thème. Ainsi, le bouton devrait être affiché sur toutes les pages de votre blog.

Notez que dans ces derniers fichiers, l’appel à la fonction the_content() a pu être remplacé par l’appel à la fonction the_excerpt() qui affiche un résumé de l’article. De la même manière ajoutez simplement le code avant l’appel à cette fonction

En résumé, cette méthode permet de contrôler l’affichage du bouton sur chaque type de page de votre blog et permet également d’appliquer des styles CSS personnalisés si vous désirez un affichage différent de l’affichage par défaut proposé par le plugin Flattr.

A lire également : Flattr : Retour d’expérience après 2 mois d’utilisation….