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

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 :

1. 19 janvier

   Alice publie un commentaire principal

   « Très bon article, merci ! »

2. 20 janvier

   Bob répond à Alice

   « Je suis totalement d'accord avec toi. »

3. 22 janvier

   Charlie publie un autre commentaire principal

   « Quelques précisions supplémentaires seraient utiles. »

4. 23 janvier

   Diana répond à Alice

   « Merci pour le lien que tu as partagé. »

5. 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 :

1. 19 janvier

   Alice publie un commentaire principal

   « Très bon article, merci ! »

   1. 20 janvier

      Bob répond à Alice

      « Je suis totalement d'accord avec toi. »

   2. 23 janvier

      Diana répond à Alice

      « Merci pour le lien que tu as partagé. »

2. 22 janvier

   Charlie publie un autre commentaire principal

   « Quelques précisions supplémentaires seraient utiles. »

   1. 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 :

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

Répondre à un commentaire existant

https://www.blogger.com/comment/frame/BLOG_ID?po=POST_ID&parentID=IN_REPLY_TO

• 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.