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.

Bookmark and Share

12 commenti:

  1. una volta sono riuscita a metterli, ora no...uff.

    RispondiElimina
    Risposte
    1. Dimmi ... qual'è il punto ostico ?

      Elimina
    2. Il punto ostico era quando lo facevo da sola. Qui è tutto molto chiaro :-)

      Elimina
  2. Ciao, scusa per il ritardo, ma avevo consumato tutti i giga!grazie poi per tutti i suggerimenti che mi dai, graditissimi, che cerco di armonizzare con i miei limiti.
    Ho già provato con il tuo tutorial, ma devo aver sbagliato, ora ritento!

    RispondiElimina
    Risposte
    1. Ritenta, ma se fallisci devi spiegarmi esattamente dove e cosa succede ( o non succede ) sullo schermo.
      Potrebbe essere un errore tuo nell'esecuzione delle azioni sopra descritte, oppure un errore mio ( descrizione scorretta oppure omessa ).

      Per colloquiare con un tecnico sui problemi del proprio pc, è consigliabile scattare la “istantanea” del problema sullo schermo, e spedirla via-mail ( il mio indirizzo, lo trovi qua nella barra laterale, cliccando sulla busta ) : esiste uno strumento gratuito ed incluso nei sistemi Windows da 7 in poi, che è lo Strumento di cattura, e nel sito della Microsoft trovi le [ spiegazioni esaustive ] su come usarlo.

      ===

      Elimina
  3. Io ho un tablet.
    Se li metto, mi appaiono come sono ora sul blog di Magnolia.

    RispondiElimina
    Risposte
    1. Che tu stia usando un browser su tablet, smartphone o pc, cambia nulla ... perché il programma che usate per la navigazione nell'internet ''mastica'' lo stesso codice;
      c'è che ho aggiunto l'inchiostro e di colore bianco ( white ) alle varie parti del commento citato, siccome il mio blog ha lo sfondo scuro.
      Dovete fare un piccolo cambiamento al codice : i colori, in HTML + JavaScript possono essere esplicitati in varie maniere, e la più semplice, se non si hanno esigenze particolari, è usare il corrispondente aggettivo inglese ( black, red, white ... etc. ).

      Adesso vado ad aggiungere una nota al post, e vi dico come fare ...

      ===

      Elimina
    2. Fatto.
      Ho aggiornato il passo 2, e vi spiego come cambiare il colore del testo.

      ===

      Elimina
    3. Ho aggiornato ancóra il passo 2, con la spiegazione su come dimensionare il testo a proprio piacimento, siccome sul blog di Magnoli@ è un po' troppo piccolo;
      { quando metto le mani al codice, non sto a pensarci molto, so dove intervenire per fare funzionare una cosa e lo faccio;
      tutt'altra faccenda, è spiegare ad altri come fare le cose che a me vengono istintive }.

      ===

      Elimina
  4. Risposte
    1. Troppo buono, Uomo !

      :)

      Ho rimaneggiato il codice che mi spedisti ( grazie ! ) ed avevi già rimaneggiato tu stesso ...
      Quando avrò un po' di tempo, lo migliorerò davvero.

      ===

      Elimina