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

En 2012, Blogger a introduit les commentaires filetés dans ses modèles. Cette nouveauté repose sur une donnée simple mais essentielle : inReplyTo
.
Chaque commentaire publié sur un blog reçoit un identifiant unique. Lorsqu’il s'agit d’une réponse à un autre commentaire, inReplyTo
permet d’établir ce lien de parenté entre les deux messages.
Grâce à cette structure, Blogger a rendu possible l’affichage de fils de discussion à deux niveaux — non seulement dans ses thèmes officiels, mais aussi dans les modèles personnalisés, les flux et les APIs.
Aujourd'hui encore, inReplyTo
reste la clé pour bâtir son propre module de commentaires, que ce soit pour moderniser un thème existant ou concevoir une structure sur mesure.
L'arborescence des commentaires
Pour comprendre comment construire un module de commentaires avec réponses, il faut d'abord comprendre comment Blogger gère en interne les commentaires.
Tous les commentaires d’un blog sont stockés de manière linéaire, c’est-à-dire dans l’ordre où ils ont été publiés, sans hiérarchie apparente.
Chaque commentaire possède deux identifiants importants :
id
: l’identifiant unique du commentaire.inReplyTo
: (optionnel) l’identifiant du commentaire auquel il répond.
Un commentaire sans inReplyTo
est un commentaire principal.
Un commentaire avec inReplyTo
est une réponse à un autre commentaire.
C’est cette simple relation id ↔ inReplyTo qui permet de reconstruire l’arborescence des discussions lors de l'affichage.
1. Chronologie
Imaginons la séquence suivante :
-
19 janvier
Alice publie un commentaire principal
« Très bon article, merci ! »
-
20 janvier
Bob répond à Alice
« Je suis totalement d'accord avec toi. »
-
22 janvier
Charlie publie un autre commentaire principal
« Quelques précisions supplémentaires seraient utiles. »
-
23 janvier
Diana répond à Alice
« Merci pour le lien que tu as partagé. »
-
25 janvier
Eve répond à Charlie
« Oui, je me posais la même question. »
Tous ces commentaires sont enregistrés dans l’ordre chronologique, sans hiérarchie particulière.
2. Construction logique
Cependant, si on observe qui répond à qui, on peut représenter la discussion ainsi :
-
19 janvier
Alice publie un commentaire principal
« Très bon article, merci ! »
-
20 janvier
Bob répond à Alice
« Je suis totalement d'accord avec toi. »
-
23 janvier
Diana répond à Alice
« Merci pour le lien que tu as partagé. »
-
-
22 janvier
Charlie publie un autre commentaire principal
« Quelques précisions supplémentaires seraient utiles. »
-
25 janvier
Eve répond à Charlie
« Oui, je me posais la même question. »
-
La notion de réponse repose sur un système de liens d'identifiants entre commentaires.
3. Correspondance avec les identifiants id
et inReplyTo
Pour construire cette arborescence, chaque commentaire se voit attribuer :
un identifiant unique (
id
)éventuellement un identifiant de commentaire parent (
inReplyTo
) s’il s'agit d'une réponse.
Exemple d’attribution d’identifiants :
Auteur | ID Commentaire id |
ID Commentaire parent inReplyTo |
Réponse à |
---|---|---|---|
Alice | 00001 |
- | - |
Bob | 00002 |
00001 |
Alice |
Charlie | 00003 |
- | - |
Diana | 00004 |
00001 |
Alice |
Eve | 00005 |
00003 |
Charlie |
4. Comment fonctionne le formulaire de commentaires sur Blogger
Lorsque vous publiez un commentaire (nouveau ou réponse), Blogger vous présente un formulaire spécial, chargé via une URL spécifique.
L'URL ne crée pas la relation entre les commentaires à elle seule.
Elle ouvre simplement le bon contexte dans le formulaire : soit pour publier un nouveau commentaire, soit pour répondre à un commentaire existant.
Publier un nouveau commentaire (commentaire principal)
https://www.blogger.com/comment/frame/BLOG_ID?po=POST_ID
BLOG_ID
: identifiant du blog
POST_ID
: identifiant de l'article ou de la page
Répondre à un commentaire existant
https://www.blogger.com/comment/frame/BLOG_ID?po=POST_ID&parentID=IN_REPLY_TO
BLOG_ID
: identifiant du blog
POST_ID
: identifiant de l'article ou de la page
IN_REPLY_TO
: identifiant du commentaire auquel on répond.
L’URL sert uniquement à préparer l’environnement du formulaire.
Le lien logique entre commentaires (
inReplyTo
) n'est réellement établi qu'au moment où l'utilisateur soumet son commentaire.
Limite native de l'affichage des réponses
Même si Blogger permet d’associer dynamiquement un commentaire à un autre via l'attribut inReplyTo
, l'affichage dans les modèles standards reste soumis à une limitation importante.
Par défaut, Blogger n'affiche que deux niveaux de discussion :
Le premier niveau correspond aux commentaires principaux (ceux qui n'ont pas de
inReplyTo
).Le deuxième niveau correspond aux réponses directes aux commentaires principaux.
Au-delà de ces deux niveaux, même si des réponses supplémentaires sont techniquement possibles (par exemple une réponse à une réponse), l'interface standard ne les affichera pas correctement sans personnalisation supplémentaire du modèle.
Pourquoi cette limite ?
-
Simplicité d'affichage
Pour éviter d'encombrer les discussions sur les blogs publics.
-
Performance
Pour limiter le nombre de boucles et de traitements sur des blogs avec beaucoup de commentaires.
Peut-on dépasser cette limite ?
Oui, en personnalisant son propre module d’affichage (c'est ce que nous allons voir plus loin).
Avec un peu de maîtrise des balises XML avancées (b:loop
, b:include
, b:with
), il est possible de reconstruire manuellement des fils de discussions plus profonds (jusqu’à 3, 4 niveaux ou plus si nécessaire).
Cependant, cela nécessite de gérer soigneusement :
L’indentation visuelle (CSS adapté),
Le contrôle de la récursion pour éviter les boucles infinies,
La lisibilité sur mobile et desktop.
À noter que le système XML a ses propres 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.
Coder son propre module de commentaires
Nous allons voir comment construire votre propre module de commentaires personnalisé, en partant de deux approches différentes :
Une approche simple : facile à comprendre, avec deux niveaux managés manuellement.
Une approche modulaire : évolutive, adaptable à tous les types de structures.
Raccorder la démonstration au modèle
Pour tester les modules de démonstration, vous devez modifier l'inclusion du modèle responsable de l'affichage des commentaires.
Dans le fichier XML de votre thème, cette inclusion est nommée comment_picker
ou commentPicker
, selon la version du gadget utilisée.
Remplacez son contenu par un appel direct à notre module de démonstration :
<b:includable id='comment_picker' var='post'> <b:include data='post' name='comments_demo'/> </b:includable>
Juste après l'inclusion, vous ajoutez les codes ci-dessous.
Démo 1 - Approche simple
Pour commencer, voici une démonstration basique qui affiche les commentaires et leurs réponses directes.
Ce module utilise :
Une seule inclusion (
comments_demo
),Deux boucles (
b:loop
) pour séparer les commentaires principaux et leurs réponses.
Objectif : Afficher un fil de discussion clair à deux niveaux (commentaire + réponse), en restant fidèle au fonctionnement classique de Blogger.
<b:includable id='comments_demo' var='post'> <h4>Commentaires</h4> <ul> <!-- Boucle principale : commentaires racines (sans inReplyTo) --> <b:loop values='data:post.comments where (c => not c.inReplyTo)' var='rootCollection'> <li> <!-- Affichage du commentaire racine --> <div class='comment-author'>Auteur : <data:rootCollection.author/></div> <div class='comment-content'>Contenu : <data:rootCollection.body/></div> <!-- Lien pour répondre au commentaire --> <div class='comment-actions'> <a> <!-- Générer l'URL pour répondre à ce commentaire --> <b:attr expr:value='data:blog.bloggerUrl path ("/comment/frame/" + data:blog.blogId) params { po: data:post.id, hl: data:blog.locale.language, parentID: data:rootCollection.id }' name='href'/> <b:attr name='target' value='_blank'/> <b:attr name='rel' value='noopener noreferrer'/> Répondre </a> </div> <ul> <!-- Boucle secondaire : réponses au commentaire courant --> <b:loop values='data:post.comments where (c => c.inReplyTo == data:rootCollection.id)' var='commentCollection'> <li> <!-- Affichage de la réponse --> <div class='comment-author'>Auteur : <data:commentCollection.author/></div> <div class='comment-content'>Contenu : <data:commentCollection.body/></div> </li> </ul> </li> </b:loop> </ul> <h4>Créer un nouveau commentaire</h4> <div class='comment-actions'> <a> <!-- Générer l'URL pour ajouter un commentaire racine --> <b:attr expr:value='data:blog.bloggerUrl path ("/comment/frame/" + data:blog.blogId) params { po: data:post.id, hl: data:blog.locale.language }' name='href'/> <b:attr name='target' value='_blank'/> <b:attr name='rel' value='noopener noreferrer'/> Nouveau commentaire </a> </div> </b:includable>
Démo 2 - Approche modulaire
Pour offrir plus de souplesse et mieux contrôler l'affichage des fils de discussions, nous passons maintenant à une méthode modulaire.
Cette approche repose sur :
Plusieurs inclusions (
comments-demo
,comments-list
,comments-action
),Une seule boucle (
b:loop
) utilisée de manière récursive pour parcourir tous les niveaux de réponses.
Avantages de cette méthode :
Code plus propre et plus réutilisable,
Possibilité de mieux contrôler la profondeur d'affichage,
1. Inclusion principale
<b:includable id='comments_demo' var='post'> <h4>Commentaires</h4> <div class='comments-thread'> <!-- Filtrage : récupérer uniquement les commentaires racines (sans inReplyTo) --> <b:with value='data:post.comments where (c => not c.inReplyTo)' var='rootCollection'> <!-- Initialisation : autoriser l'affichage des réponses (niveau 1 uniquement) --> <b:with value='true' var='allowReply'> <!-- Appel de l'inclusion comments-list avec la collection racine --> <b:include data='data:rootCollection' name='comments-list'/> </b:with> </b:with> </div> <h4>Créer un nouveau commentaire</h4> <div><b:include name='comments-action'/></div> </b:includable>
2. Inclusion Construire la liste des commentaires
<b:includable id='comments-list' var='commentCollection'> <ul> <!-- Boucle UNIQUE sur la collection reçue --> <b:loop values='data:commentCollection' var='comment'> <li> <!-- Affichage du commentaire --> <div class='comment-author'>Auteur : <data:comment.author/></div> <div class='comment-body'>Commentaire : <data:comment.body/></div> <!-- Bouton "Répondre" (seulement si allowReply = true) --> <b:include cond='data:allowReply' name='comments-action'/> <!-- Gestion récursive : affichage des réponses (niveau limité) --> <b:if cond='data:allowReply'> <b:with value='data:post.comments where (r => r.inReplyTo == data:comment.id)' var='commentCollection'> <!-- Désactivation de l'affichage du bouton "Répondre" pour les réponses --> <b:with value='false' var='allowReply'> <!-- Appel récursif de comments-list pour afficher les réponses --> <b:include cond='data:commentCollection' data='data:commentCollection' name='comments-list'/> </b:with> </b:with> </b:if> </li> </b:loop> </ul> </b:includable>
3. Affichage du bouton "répondre/nouveau commentaire"
<b:includable id='comments-action'> <div class='comment-actions'> <a> <!-- Générer l'URL pour un nouveau commentaire (racine) --> <b:attr cond='!data:comment.id' expr:value='data:blog.bloggerUrl path ("/comment/frame/" + data:blog.blogId) params { po: data:post.id, hl: data:blog.locale.language }' name='href'/> <!-- Générer l'URL pour répondre à un commentaire existant --> <b:attr cond='data:comment.id' expr:value='data:blog.bloggerUrl path ("/comment/frame/" + data:blog.blogId) params { po: data:post.id, hl: data:blog.locale.language, parentID: data:comment.id }' name='href'/> <!-- Sécurité ouverture nouvelle fenêtre --> <b:attr name='target' value='_blank'/> <b:attr name='rel' value='noopener noreferrer'/> <!-- Texte dynamique en fonction du contexte --> <b:if cond='!data:comment.id'>Nouveau commentaire<b:else/>Répondre</b:if> </a> </div> </b:includable>
Conclusion
Que ce soit avec une structure simple ou un modèle modulaire plus avancé, la donnée inReplyTo
reste la clé pour construire un vrai fil de discussion.
En adaptant votre modèle selon vos besoins — soit en utilisant une approche basique pour démarrer, soit en modulant plus finement l'affichage — vous prenez le contrôle de la manière dont vos lecteurs échangent et interagissent sur votre blog.
Bien sûr, ces démonstrations sont basées uniquement sur les données XML intégrées aux modèles Blogger.
Mais si vous souhaitez aller encore plus loin, il est aussi possible de connecter vos modules de commentaires à des sources externes comme :
Les flux de votre blog,
L’API Blogger V3 (authentifiée ou publique).
En combinant ces flux avec du JavaScript, vous pourriez par exemple :
Charger dynamiquement les commentaires,
Rafraîchir les réponses sans recharger la page,
Créer des systèmes de réponses enrichis ou paginés.
Bref, inReplyTo
n’est pas qu’une donnée statique : c’est une porte ouverte vers des modules dynamiques, capables d’évoluer avec vos projets.