Aggiungere la lista degli ultimi commenti al blog { Blogger }

La lista degli ultimi commenti pubblicata al momento di scrivere questo post, uno degli elementi interattivi nella spalla di questo blog [ 1 ].

[ ... ]

0
 
{ scrivo questo post per gli amici Stefano Borzumato [ 2 ] e Sara [ 3 ], e per chi passerà di qua }.

Blogger non distribuisce un elemento ( gadget ) della struttura del blog ( layout ) finalizzato alla visualizzazione degli ultimi commenti lasciati dai lettori, non ce n'è traccia nella raccolta ufficiale usufruibile all'interno dell'ambiente di programmazione del blog, e pertanto l'amministratore deve arrangiarsi in altra maniera ... 

procedo ad illustrare un metodo passo-passo.

1

Innanzitutto, bisogna scrivere da capo un codice HTML/JavaScript oppure procurarselo da qualcuno che l'ha già pubblicato;
io ne usavo uno [ 4 ] che ad un certo punto è diventato inutilizzabile, quindi ho chiesto all'amico blogger UnUomoInCammino [ 5 ] di passarmi quello che usava ( e usa ) sul suo blog, poi l'ho modificato a mio piacimento;
il codice del gadget Ultimi commenti nell'Orlodelboccale è ora il seguente :

<!-- -->
<!-- Ultimi commenti ( gadget ) -->
<!-- -->
<!-- Inizio codice HTML -->
<!-- -->

<div style="text-align:justify;">

<script style="text/javascript">

//
// Inizio codice JavaScript.
//
// Codice rimaneggiato da UnUomoInCammino e bufalo ( versione del 15 gennaio 2017 ).
//
 
function showrecentcomments(json) {
 
 // numero di commenti da visualizzare :

 var maxComments = 10; 

 // numero di caratteri per commento :

 var numchars = 150;
 
 var numComments = json.feed.entry.length;
 
 // Ciclo principale ( da 0 a 9 ) :

 for (var i = 0; i < maxComments  &&  i < numComments; i++) { 

  var entry = json.feed.entry[i];
  var commentUrl;

  for (var k = 0; k < entry.link.length; k++) { 
   if (entry.link[k].rel == 'alternate') { 
    commentUrl = entry.link[k].href; 
    break; 
   } 
  } 
  
  
  var commentPreview;

  {
   // lunghezza massima del testo del commento in anteprima ( num. di caratteri ) :

   var maxCommentPreview = 150;
   
   var commentText;
   if ("content" in entry) { 
    commentText = entry.content.$t;
   } 
   else 
   if ("summary" in entry) { 
    commentText = entry.summary.$t;
   } 
   else
    commentText = "";

   // codice che rimpiazza gli accapo con uno spazio :

   commentText = commentText.replace(/(\r\n|\n|\r)/gm, "  ");

   // codice che elimina gli spazi inutili a 1 solo :

   commentText = commentText.replace(/\s+/g, " ");

   // codice che rimuove i tag di formattazione del testo ( potrebbero condizionare il testo generale del blog ) :

   commentText = commentText.replace(/(<([^>]+)>)/igm, "");
   
   if ( commentText.length > maxCommentPreview )
    commentPreview = commentText.substring(0, maxCommentPreview) + '...';
   else
    commentPreview = commentText;
  }
  
  
  // Deduzione del titolo del post in anteprima e aggiustamento della lunghezza :

  var postTitleNlt;

  {
   // lunghezza massima del titolo del post in anteprima ( num. di caratteri ) :

   var maxPostTitleLength = 100
   
   // deduzione e correzione del titolo, dalla sintassi dell'URL :

   var postLink = commentUrl.split("?");
   postLink = postLink[0]; 
   var linkText = postLink.split("/"); 
   linkText = linkText[5]; 
   linkText = linkText.split(".html"); 
   linkText = linkText[0]; 
   var postTitle = linkText.replace(/-/g," ");     
   
   if (postTitle.length > maxPostTitleLength)
    postTitleNlt = postTitle.substring(0, maxPostTitleLength) + '...';
   else
    postTitleNlt = postTitle;
  }
 
  
  
  // Pubblicazione del commento :

  var author = entry.author[0];
  var authorName = author.name.$t;
  var authorAvatarUrl = author.gd$image.src;
     
  document.write('<br/>'); document.write(  '<abbr title="' + authorName + '">'
     + '<img SRC="' + authorAvatarUrl  + '" width="25" height=25" border="1">'
     + '</abbr>'
     + '  </b><a href="' + commentUrl + '"><span style="font-size: 85%; font-family: Arial; color: white;">' + commentPreview + '</span></a>'
                + '<span style="font-size: 85%; font-family: Arial; color: white;"> ( su <a href="' + postLink + '"><span style="font-family: Arial; color: white;"><i>' + postTitleNlt + '</i></span></a> ).</span><br />'
     + '<hr>' );
 
 }

 // Chiusura del ciclo.


} 
</script> 

<script src=http://orlodelboccale.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments> 

// Sorgente dei commenti da processare e pubblicare.

</script>

</div>

<!-- -->
<!-- Fine codice HTML -->
<!-- -->

nota

Le righe introdotte dal segno minore di e punto esclamativo, e dalla doppia barra obliqua [ 6 ] sono considerate dall'interprete del codice come righe di commento ( rispettivamente in HTML e JavaScript ) cioè è possibile scrivere qualunque cosa dopo tali segni, senza effetto alcuno sul funzionamento del codice.

2

Consiglio di copiare-e-incollare il codice in un file di testo nella cartella dedicata al proprio blog, nel disco del Pc.

Per adattare il codice al proprio blog, bisogna eseguire qualche modifica.

Nel blocco di istruzioni che eseguono la scrittura su schermo del commento citato ( la sezione Pubblicazione del commento ) bisogna inserire il colore dell'inchiostro idoneo all'impaginazione;
è possibile esplicitare il colore con un valore numerico esadecimale, oppure con il corrispondente aggettivo inglese : io ho inserito il bianco ( white ) perché questo blog ha lo sfondo scuro;
quindi, se non vi va bene il bianco, dovete sostituire i 3 white con il colore che desiderate :

  document.write('<br/>'); document.write(  '<abbr title="' + authorName + '">'
     + '<img SRC="' + authorAvatarUrl  + '" width="25" height=25" border="1">'
     + '</abbr>'
     + '  </b><a href="' + commentUrl + '"><span style="font-size: 85%; font-family: Arial; color: white;">' + commentPreview + '</span></a>'
                + '<span style="font-size: 85%; font-family: Arial; color: white;"> ( su <a href="' + postLink + '"><span style="font-family: Arial; color: white;"><i>' + postTitleNlt + '</i></span></a> ).</span><br />'
     + '<hr>' );

Nello stesso blocco di istruzioni, se il testo è troppo piccolo, potete modificarne la dimensione in valore percentuale ( sul mio blog, uso l'85% in molte sezioni ) :

  document.write('<br/>'); document.write(  '<abbr title="' + authorName + '">'
     + '<img SRC="' + authorAvatarUrl  + '" width="25" height=25" border="1">'
     + '</abbr>'
     + '  </b><a href="' + commentUrl + '"><span style="font-size: 85%; font-family: Arial; color: white;">' + commentPreview + '</span></a>'
                + '<span style="font-size: 85%; font-family: Arial; color: white;"> ( su <a href="' + postLink + '"><span style="font-family: Arial; color: white;"><i>' + postTitleNlt + '</i></span></a> ).</span><br />'
     + '<hr>' );

Nelle ultime righe, bisogna sostituire l'indirizzo di questo mio blog orlodelboccale.blogspot.com con l'indirizzo del proprio blog :

<script src=http://orlodelboccale.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments>

3

Adesso bisogna entrare nell'editor di layout di Blogger ed ovviamente bisogna avere le credenziali di amministratore del blog.

Nella bacheca ( dashboard ) del proprio blog, cliccare su Layout nel menu di spalla :





3

Nella sezione della struttura grafica del layout in cui si vuole aggiungere la lista degli ultimi commenti, cliccare su Aggiungi gadget :





4

Viene aperta una finestra pop-up con la lista dei gadget disponibili nello store di Blogger;
cliccare su HTML/JavaScript :





5

Nel campo Titolo digitare il titolo del gadget che verrà pubblicato sulla pagina del blog ( ad esempio : “Ultimi commenti” ) poi copiare il codice sopra ( o altro analogo ) e, dopo avere sostituito l'URL con quello del proprio blog, incollare nel campo Sezioni del sito;
quindi cliccare su Salva :





nota

Il campo del titolo può anche essere lasciato vuoto : in questo caso, semplicemente non verrà pubblicato alcun titolo sopra il gadget, nel blog.

6

Il nuovo gadget è ora memorizzato nel layout e sistemato di default in cima alla sezione scelta, tuttavia questa può non essere la posizione desiderata dall'amministratore del blog;
per allocare il gadget nella posizione giusta, bisogna portarvi sopra il cursore ( esso diventerà una croce frecciata ), cliccare con il tasto sinistro del mouse, e trascinare l'elemento tenendo premuto il tasto sinistro fino alla posizione idonea, quindi lasciare il tasto ( drag-n-drop );
infine, cliccare su Salva disposizione :




nota

E' possibile spostare il gadget anche in un'altra sezione del layout, nel caso sia stata sbagliata la scelta iniziale.