Submergé par les spams, j'ai décidé d'abandonner mon bon vieux systèmes de commentaires codé à la mano au sein de mon application Django pour un module plus souple. Disqus semblait répondre à mes besoins. Voici la marche à suivre pour l'installer sur un blog (ou un site). Avec, en prime, la méthode pour importer vos anciens commentaires...
Disqus
Disqus est donc un systèmes de gestion de commentaires externalisé qui comporte, en plus des classiques, un certain nombre de fonctionnalités intéressantes. Par exemple, il propose l'identification par le biais d'un service tiers (Facebook, Twitter, OpenID, etc.), le suivi de conversation par RSS ou e-mail, le classement de commentaires par popularité (likes)... De plus, son mode de fonctionnement est assez original, puisque les discussions sont organisées par "threads" de questions / réponses, comme sur un forum.
Disqus est utilisé sur des sites à fort traffic comme Techcrunch (exemple ci-dessus), CNN, ou encore Fox news. Le tout propulsé... par Django !
Quelques détails désacréables tout de même :
- Disqus charge les commentaires en Javascript. Le contenu de ceux-ci ne sera donc pas référencé.
- Il faut être prêt à confier son systèmes de commentaires (et ses données) à une plateforme externe. Mais Disqus permet un import/export relativement facile (nous y reviendrons), donc on peut tout de même récupérer ses commentaires si on décide d'abandonner le système.
Installation
Commencez par créer un compte Disqus ainsi qu'un site. Vous êtes maintenant prêt à installer le module. Vous allez voir qu'il est possible de l'installer sur des plateformes de blogs basiques, sous Django ou encore à la main...
Plateformes de blog
Un des gros avantages de Disqus, c'est qu'il est directement installable sur les plateformes de blogs les plus courantes, sous la forme d'un plug-in. Pas besoin de mettre les mains dans le cambouis, donc ; juste à le configurer. Sont compatibles : Wordpress, Blogger, Tumblr, Drupal, Joomla... Vous trouverez la liste sur la page d'installation de l'interface d'administration de Disqus.
Sous Django
Django-disqus, comme son nom l'indique, permet d'utiliser disqus au sein d'un projet Django. Commencez par télécharger le package est l'installer. Vous devez ensuite l'importer dans les paramètres de votre application. Ainsi, dans settings.py :
INSTALLED_APPS = (
...
'disqus',
)
DISQUS_API_KEY = 'FOOBARFOOBARFOOBARFOOBARFOOBARF'
DISQUS_WEBSITE_SHORTNAME = 'foobar'
Note : pour récupérer votre clé d'API, il vous être loggé sous Disqus et consulter la page suivante : http://disqus.com/api/get_my_key/.
Ensuite, c'est très simple. Django-disqus permet, par l'utilisation de templatetags, de charger le module de commentaire en une ligne. En haut de votre template concerné, il vous suffit d'écrire :
{% load disqus_tags %}
{% disqus_dev %} <!-- Si vous êtes en local -->
Puis, à l'endroit où vous voulez afficher les commentaires et le formulaire :
{% disqus_show_comments %}
Le code Javascript sera alors généré... et les commentaires affichés ! Vous pourrez alors le personnaliser depuis votre interface d'administration Disqus. Plus d'informations sur les templatetags dans la documentation du plug-in.
A la main
Pour les non-djangonautes, pas de panique, l'installation à la main est presque aussi facile. Il vous suffit d'utiliser ce code Javascript pour afficher les commentaires et leur formulaire :
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
C'est tout ! Les autres fonctionnalités sont expliquées sur cette page.
Personnalisation
Une fois Disqus installé, vous pouvez personnaliser l'affichage de vos commentaires comme bon vous semble. Vous pouvez choisir un thème via l'interface d'administration, ouvrir ou fermer certaines fonctionnalités (likes, permaliens...), ou même modifier vous-même le CSS.
Les possibilités sont donc quasi-infinies, et vous pourrez avoir très facilement un design moins générique et se mariant parfaitement avec le thème de votre blog (hm, chose que je n'ai pas forcément faite).
Import des anciens commentaires
Enfin, si votre blog comportait d'anciens commentaires avant l'implémentation de Disqs, vous ne voulez pas forcément vous en séparer... Si vous possédez une plateforme de blog (Wordpress, Blogger), il existe un plug-in vous permettant d'exporter vos commentaires. Dans l'interface d'administration, allez dans "Tools", puis "Import / Export". Vous verrez les plateformes compatibles.
Si ce n'est pas le cas et que votre appli Django utilise django-comments, vous allez pouvoir exporter vos données gâce à Django-disqus. En effet, le package comporte les commandes nécessaires our générer l'export au bon format. Vous pouvez suivre la marche à suivre ici.
Enfin, si vous devez exporter vos commentaires à la main, vous pouvez utiliser le format WXR de Wordpress, pris en charge par Disqus. Il vous suffit d'écrire un petit script générant un fichier XML conforme aux spécifications de WXR, et en l'uploadant dans l'interface. Par exemple, voici le template que j'ai utilisé (attention, pensez bien à l'encodage du fichier) :
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:excerpt="http://wordpress.org/export/1.0/excerpt/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:wp="http://wordpress.org/export/1.0/">
<channel>
<title>{{ site.title }}</title>
<link>{{ site.url }}</link>
<description>{{ site.description }}</description>
<pubDate>{% now|date:"D, d M Y H:i:s" %}</pubDate>
<generator>http://wordpress.org/?v=3.0.4</generator>
<language>fr</language>
<wp:wxr_version>1.0</wp:wxr_version>
<wp:base_site_url>{{ site.url }}</wp:base_site_url>
<wp:base_blog_url>{{ site.url }}</wp:base_blog_url>
<generator>http://wordpress.org/?v=3.0.4</generator>
{% for entry in entries %}
<item> <title>{{ entry.title }}</title>
<link>{{ site_url }}{{ entry.get_absolute_url }}</link>
<pubDate>{{ entry.publication_date|date:"D, d M Y H:i:s" }}</pubDate>
<dc:creator><![CDATA[{{ entry.user }}]]></dc:creator>
<guid isPermaLink="false">{{ site_url }}{{ entry.get_absolute_url }}</guid>
<description></description>
<content:encoded><![CDATA[{{ entry.body }}]]></content:encoded>
<wp:post_id>{{ entry.id }}</wp:post_id>
<wp:post_date>{{ entry.publication_date|date:"D, d M Y H:i:s" }}</wp:post_date>
<wp:post_date_gmt>{{ entry.publication_date|date:"D, d M Y H:i:s" }}</wp:post_date_gmt>
<wp:comment_status>open</wp:comment_status> <wp:ping_status>open</wp:ping_status>
<wp:post_name>{{ entry.slug }}</wp:post_name>
<wp:status>publish</wp:status>
<wp:post_parent>0</wp:post_parent>
<wp:menu_order>0</wp:menu_order>
<wp:post_type>post</wp:post_type>
<wp:is_sticky>0</wp:is_sticky>
{% for com in entry.entrycomment_set.all %}
<wp:comment>
<wp:comment_id>{{ com.id }}</wp:comment_id>
<wp:comment_author><![CDATA[{{ com.author }}]]></wp:comment_author>
<wp:comment_author_email>{{ com.email }}</wp:comment_author_email>
<wp:comment_author_url>{{ com.website }}</wp:comment_author_url>
<wp:comment_author_IP>{{ com.ip }}</wp:comment_author_IP>
<wp:comment_date>{{ com.publication_date|date:"D, d M Y H:i:s" }}</wp:comment_date>
<wp:comment_date_gmt>{{ com.publication_date|date:"D, d M Y H:i:s" }}</wp:comment_date_gmt>
<wp:comment_content><![CDATA[{{ com.content }}]]></wp:comment_content>
<wp:comment_approved>1</wp:comment_approved>
<wp:comment_parent>0</wp:comment_parent>
</wp:comment>
{% endfor %}
</item>
{% endfor %}
</channel>
</rss>
