inReplyTo : Développer un module de commentaires avec réponses

Commentaires filetés : inReplyTo

Souvenez-vous, au début de l'an de grâce 2012, Blogger lançait un module de commentaires filetés à 2 niveaux intégré directement dans les modèles.

Pour concevoir un tel système de "réponses", les ingénieurs ont tout simplement ajouté la donnée InReplyTo dans la longue liste de la bibliothèque des données des modèles.
Cette donnée a d'ailleurs été aussi introduite dans les flux, les apis Blogger. Ce qui permet ainsi à chaque développeur en herbes, de concevoir son propre module avec niveaux de réponses.



Note 2021 :

Cette page a été publiée avant la mise à niveau des expressions Blogger. De nos jours, le contenu est toujours valide, mais les méthodes utilisées ne sont pas forcément les plus efficaces.



Principe de fonctionnement

Ce qu'il faut bien comprendre avant tout, c'est que tous les commentaires sont cumulés. C'est-à-dire, stockés par ordre de publication.

  1. 17 janvier : Toto crée un nouveau commentaire
  2. 18 janvier : Gros Minet répond à Toto
  3. 20 janvier : Mickey crée un nouveau commentaire
  4. 22 janvier : Donald répond à Toto
  5. 24 janvier : Britney Spears répond à Mickey

Avec une représentation des niveaux de réponses, cela donnerait :

  1. 17 janvier : Toto crée un nouveau commentaire
    1. 18 janvier : Gros Minet répond à Toto
    2. 22 janvier : Donald répond à Toto
  2. 20 janvier : Mickey crée un nouveau commentaire
    1. 24 janvier : Britney Spears répond à Mickey

Chaque commentaire reçoit un identifiant unique.

Les réponses reçoivent un 2e identifiant correspondant à l'identifiant du commentaire d'origine.
C'est la donnée InReplyTo.

Auteur ID Commentaire ID Commentaire parent Réponse à
Toto 00001 - -
Gros Minet 00002 00001 Toto
Mickey 00003 - -
Donald 00004 00001 Toto
Britney Spears 00005 00003 Mickey

Pour attribuer des identifiants, il faut utiliser la page du formulaire de commentaires Blogger dont l'url doit contenir certaines données :

Url's pour déposer un nouveau commentaire :

Dans les articles
https://www.blogger.com/comment-iframe.g?blogID=BLOG_ID&postID=POST_ID
Dans les pages statiques
https://www.blogger.com/comment-iframe.g?blogID=BLOG_ID&pageID=POST_ID


Url's pour répondre à un commentaire :

Dans les articles
https://www.blogger.com/comment-iframe.g?blogID=BLOG_ID&postID=POST_ID&parentID=COMMENT_PARENT_ID

Dans les pages statiques
https://www.blogger.com/comment-iframe.g?blogID=BLOG_ID&pageID=POST_ID&parentID=COMMENT_PARENT_ID


Grâce à l'identifiant du commentaire parent, il est désormais possible de donner une réponse à un commentaire, ou répondre à une réponse. Ce qui fait que l'on peut obtenir des fils de discussions avec de multiples niveaux.
Dans le module de base fabriqué par Blogger, le niveau est fixé à 2, mais ça n'interdit pas d'avoir plusieurs niveaux.

Pour construire sois-même son module directement dans un modèle Blogger, la solution la plus "facile" est d'utiliser les données intégrées au modèle (les data) et les balises de fonctionnalités telles que b:loop (boucle), b:if (condition), dont vous pouvez jouir d'une petite démo ci-dessous.



Exercice de construction avec les étiquettes Blogger

Le code ci-dessous n'est qu'un exercice ne contenant que le nom du commentateur, le contenu du commentaire, l'url des formulaires et un lien de partage Facebook. L'ensemble s'intègre dans le gadget "Blog".
Cet exercice a pour simple objectif, d'offrir une base de travail à ceux qui veulent développer eux-mêmes leur modèle.

L'inclusion est nommée comments_demo et doit être appelée grâce à cette ligne :

<b:include data='post' name='comments_demo'/>

Elle doit se placer dans l'inclusion originelle (main) du gadget Blog, dans une boucle d'articles ayant comme variable post. Vous pouvez la placer juste après la balise :

<b:include data='post' name='post'/>


L'inclusion elle-même (b:includable), peut être introduite juste après :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

Le code de l'inclusion
<b:includable id='comments_demo' var='post'>
<!-- CSS pour les besoins de l'exercice -->
<style scoped='scoped'>
.Level1 { border: 5px solid blue; padding: 10px; }
.Level2 { margin-left: 40px; border: 5px solid green; padding: 10px; }
</style>
<h4>Commentaires filetés - Exercice Blogger Code</h4>
<!-- Création de la première boucle et exclusion des réponses --> <b:loop values='data:post.comments where (c => not c.inReplyTo)' var='commentLevel1'> <div class='Level1'> <div class='comment-author'> Auteur : <data:commentLevel1.author/> </div> <div class='comment-content'> Contenu : <data:commentLevel1.body/> </div> <!-- Création lien formulaire de réponse --> <div class='comment-formulaire'> <a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;" + (data:view.isPost ? "postID" : "pageID") + "=" + data:post.id + "&amp;parentID=" + data:commentLevel1.id' target='_blank'>Ajouter une réponse à ce commentaire</a> </div>
<!-- Création de la boucle des réponses et filtrage des réponses --> <b:loop values='data:post.comments where (c => c.inReplyTo == data:commentLevel1.id)' var='commentLevel2'> <div class='Level2'> <div class='comment-author'> Auteur : <data:commentLevel2.author/> </div> <div class='comment-content'> Contenu : <data:commentLevel2.body/> </div> </div>
</div> </b:loop>
<h4>Créer un nouveau commentaire</h4> <div class='comment-formulaire'> <a expr:href='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;" + (data:view.isPost ? "postID" : "pageID") + "=" + data:post.id' target='_blank'>Formulaire nouveau commentaire</a> </div> </b:includable>

Quelques explications

Les commentaires du premier niveau sont encadrés en bleu. Il s'agit de la première boucle dont la variable est baptisée commentLevel1.

Les commentaires du second niveau sont encadrés en vert. Il s'agit de la seconde boucle dont la variable est baptisée commentLevel2. Elle doit être encapsulée dans la première boucle.

Dans la première boucle, le lambda where filtre les commentaires n'ayant pas d'identifiant de réponse.

Dans la seconde boucle, le lambda where filtre les réponses ayant le même identifiant que le commentaire parent.

A noter que le système a des limites. Les commentaires sont enregistrés par série de 200.
Ce qui signifie qu'une 225ème réponse donnée au commentaire n°4 ne peut pas être repris dans la première série, puisque la réponse figure dans la 2ème série.



Bon dev.


Spotlight

Populaires cette semaine