DéveloppementsBac à sable

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


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Gadget Version Template Version
Exemple de développement pour afficher les commentaires filetés dans les modèles Blogger.
Blog
1
1
2
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.

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.


Haut de page


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 -->
<b:loop values='data:post.comments' var='commentLevel1'>
  <!-- Exclusion des réponses dans la 1ère boucle -->
  <b:if cond='!data:commentLevel1.inReplyTo'>
    <div class='Level1'>
      <div class='comment-author'>
        Auteur : <data:commentLevel1.author/>
      </div>
      <div class='comment-content'>
        Contenu : <data:commentLevel1.body/>
      </div>

      <!-- Création lien de partage Facebook -->
      <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:commentLevel1.url' target='_blank'>Partager ce commentaire sur Facebook</a>

      <!-- Création lien formulaire de réponse -->
      <div class='comment-formulaire'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;&quot; + (data:blog.pageType == &quot;item&quot; ? &quot;postID&quot; : &quot;pageID&quot;) + &quot;=&quot; + data:post.id + &quot;&amp;parentID=&quot; + data:commentLevel1.id' target='_blank'>Ajouter une réponse à ce commentaire</a>
      </div>

      <!-- Création de la boucle des réponses -->
      <b:loop values='data:post.comments' var='commentLevel2'>
        <!-- Filtrer les réponses -->
        <b:if cond='data:commentLevel2.inReplyTo == data:commentLevel1.id'>
          <div class='Level2'>
            <div class='comment-author'>
              Auteur : <data:commentLevel2.author/>
            </div>
            <div class='comment-content'>
              Contenu : <data:commentLevel2.body/>
            </div>

            <!-- Création lien de partage Facebook -->
            <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:commentLevel2.url' target='_blank'>Partager cette réponse sur Facebook</a>
          </div>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:loop>

<h4>Créer un nouveau commentaire</h4>
  <div class='comment-formulaire'>
    <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;&quot; + (data:blog.pageType == &quot;item&quot; ? &quot;postID&quot; : &quot;pageID&quot;) + &quot;=&quot; + 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, une condition b:if (surlignée en bleu) sélectionne les commentaires n'ayant pas d'identifiant de réponse.

Dans la seconde boucle, une condition b:if (surlignée en vert) sélectionne 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.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire