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

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.

Autres tutos

• Peut-on trier les tableaux de nombres ?
• Comment contourner le changement automatique du type d'une donnée dans une opération XML Blogger ?
• Modifier le menu des boutons de partage
• Ajouter des boutons au menu de partage
• Une pagination automatique avec le gadget Pages
• Favicons multi-sets : icon, apple-touch-icon et msapplication
• Masquer des éléments des thèmes dynamiques
• Créer des sous-catégories dans le gadget Libellés
• Une pagination automatique avec le gadget Libellés
• Filtrer les libellés dans les articles
• Créer un sélecteur d'articles
• Ajouter son blog au module de recherche Firefox
• inReplyTo : Développer un module de commentaires avec réponses