Pubblicato il 06/03/11 - aggiornato il  | 24 commenti :

Widget dei Commenti Recenti per Blogger inserito in un box personalizzabile.

Ho presentato diversi widget degli Ultimi Commenti o dei Commenti Recenti che dir si voglia. Sono tutti basati su JSon che è una tecnologia applicabile a Blogger fin dal Novembre 2006. La differenza rispetto ai widget precedenti sta nella presentazione grafica che visualizza gli ultimi commenti all'interno di un box invece che essere presentati come semplice elenco.
Sono possibili molte personalizzazioni riguardo ai colori, dimensioni del testo, bordi, numero dei commenti visualizzati e stile del widget. Ecco un esempio del gadget inserito in una sidebar piuttosto stretta
widget commenti recenti per blogger
La larghezza del widget si adatterà automaticamente a quella della sezione del layout in cui verrà inserito. L'installazione è semplicissima visto che non c'è da caricare nessun file e non occorre modificare il modello. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito il codice qui sotto. Prima di salvare l'elemento si può anche aggiungere un Titolo
<script type="text/javascript">
//By Parsifal32 - www.ideepercomputeredinternet.com
function commentirecenti(json) {
for(var i=0; i < numero; i++) {
var uc1=json.feed.entry[i];var uc2;
if(i==json.feed.entry.length)break;
for(var k=0; k < uc1.link.length; k++) {
if(uc1.link[k].rel=='alternate') {
uc2=uc1.link[k].href;break;
}
}
uc2=uc2.replace("#","#comment-");
var uc3=uc2.split("#");
uc3=uc3[0];
var uc4=uc3.split("/");
uc4=uc4[5];
uc4=uc4.split(".html");
uc4=uc4[0];
var uc5=uc4.replace(/-/g," ");
uc5=uc5.link(uc3);
var uc6=uc1.published.$t;
var uc7=uc6.substring(0,4);
var uc8=uc6.substring(5,7);
var uc9=uc6.substring(8,10);
var d_uc=new Array();
d_uc[1]=" di Gennaio"; d_uc[2]=" di Febbraio"; d_uc[3]=" di Marzo"; d_uc[4]=" di Aprile";
d_uc[5]=" di Maggio"; d_uc[6]=" di Giugno"; d_uc[7]=" di Luglio"; d_uc[8]=" di Agosto";
d_uc[9]=" di Settembre"; d_uc[10]=" di Ottobre"; d_uc[11]=" de Novembre"; d_uc[12]=" de Dicembre";
if("content" in uc1){
var uc10=uc1.content.$t;
} else if("summary" in uc1) {
var uc10=uc1.summary.$t;
} else var uc10="";
var re=/<\S[^>]*>/g;
uc10=uc10.replace(re,"");
if(data_uc==true){
document.write('Il '+uc9+' '+d_uc[parseInt(uc8,10)]);
}
document.write('<ul><li><b>' + uc1.author[0].name.$t + '</b>');
if(titolo==true){
document.write(' ha commentato ');
document.write(uc5);
}
document.write('...:  ');
document.write('<a href="' + uc2 + '">');
if(uc10.length < riassunto) {
document.write(uc10);
} else {
uc10=uc10.substring(0,riassunto);
var uc11=uc10.lastIndexOf(" ");
uc10=uc10.substring(0,uc11);
document.write(uc10+'&hellip;');
}
document.write('</a></li></ul>');
if(i < numero-1){
document.write('<hr style="border: solid 1px #003366;"/>');//Stile della riga orizzontale di divisione tra i commenti
}
}
document.write('<div style="font-size:60%;text-align:center"><p><a href="http://goo.gl/XfUAh">Install Widget</a></div>');
}
</script>
<script type="text/javascript">
var numero=4;
var data_uc=true;
var titolo=true;
var riassunto=100;
</script>
<div style="border:3px double #003366; font-size:12px; padding:4px 4px 4px 4px;color:#940F04;text-align:left;margin:0px auto; background-color:#dddddd;">
<script src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json-in-script&callback=commentirecenti"></script></div>
Le personalizzazioni da effettuare riguardano i seguenti elementi
  1. Al posto di "ha commentato" e "il" si possono inserire anche altre espressioni
  2. document.write('<hr style="border: solid 1px #003366;"/>'); rappresenta lo stile della riga orizzontale di divisione tra commenti. Se ne può scegliere il colore (#003366;) attraverso i codici dei colori esadecimali, lo spessore (1px) e lo stile del bordo (solid)
  3. var numero=4; indica il numero dei commenti che si vogliono visualizzare
  4. var data_uc=true; mostrerà la data del commento. Se si sostituisce true con false non sarà invece visualizzata.
  5. var riassunto=100; rappresenta il numero dei caratteri della parte iniziale del commento da mostrare nel widget
  6. border:3px double #003366; è l'aspetto del box esterno del widget e può essere personalizzato come colore, dimensione e stile dei bordi.
  7. font-size:12px; è la dimensione dei caratteri del testo del widget
  8. padding:4px 4px 4px 4px; è la distanza tra il contenuto del widget e il box esterno. Le distanze sono in senso orario a partire da quella in alto
  9. background-color:#dddddd; rapprenta il colore di sfondo del widget. Se non lo vogliamo, lo possiamo togliere o mettere #ffffff;
  10. text-align:left; indica il testo allineato a sinistra. Si può sostituire left con right o center con ovvio significato
  11. Per concludere inserite l'URL del vostro blog al posto della homepage di questo sito.
L'elemento pagina si può spostare a piacimento andando su Design > Elementi pagina con il drag & drop del mouse.
Aggiornamento: Se si vuole creare uno spazio tra commento e commento si può inserire questa riga
document.write('<br/>'); 
tra 
if(i < numero-1){
 e 
document.write('<hr style="border:...
Alternativamente si può sempre incollare la stessa riga tra
if(data_uc==true){ 
document.write('Il '+uc9+' '+d_uc...
Si possono inserire tutti questi salti di riga contemporaneamente se si vuole un box con i commenti ben divisi tra di loro.





24 commenti :

  1. Ciao! Ma il colore del testo non può essere modificato?

    RispondiElimina
  2. @Christian
    Il colore del testo iniziale è questo
    color:#940F04; e può essere modificato. Il testo del commento viene invece ereditato dai colori del blog, sarà cioè uguale a quello degli altri widget.

    RispondiElimina
  3. Grazie per la risposta così tempestiva.
    Pensavo si potesse modificare anche il colore del testo del widget...

    Approfitto per una domanda: non trovo più i menu verticali da mettere come widget a destra (il sito è http://giordanochristian.com). Tempo fa lo avevo visto. Nella pagina delle demo non c'è più, e se si clicca su "menu verticale a tendina" si apre una pagine di errore...

    RispondiElimina
  4. la riga di divisione dei commenti non è staccata dall'autore del commento seguente .. risulta appiccicata e pur lavorando sui 4 padding il risultato non cambia avrei bisogno di un a capo tipo br ma non so dove metterlo tra la linea document write e il commento seguente

    RispondiElimina
  5. @Christian
    Se mi dai il link del menù vedo cosa è successo.

    @Tex Willer
    Devi aggiungere la riga
    document.write('
    ');
    dopo il commento
    //Stile della riga orizzontale di divisione tra i commenti
    creando una nuova riga.
    Dovrebbe funzionare. Ciao

    RispondiElimina
  6. dopo quel commento ho 2 graffe di chiusura e anche inserendo la riga da te fornita in varie posizioni subito sotto o dopo le graffe o tra le medesime il risultato è la scomparsa di tutti i commenti .. rimane il riquadro del widget vuoto

    RispondiElimina
  7. @Tex
    scusa non è venuto giusto il codice, non l'ha preso. Non so come fare a mandartelo...

    RispondiElimina
  8. Devi mettere
    < br/ > in mezzo alle due virgolette. Prima però devi togliere gli spazi che ho inserito dopo il minore e prima del maggiore

    RispondiElimina
  9. dopo il commento
    //Stile della riga orizzontale di divisione tra i commenti
    creando una nuova riga
    tra le due graffe chiuse "}"
    adesso funziona e lascia spazio tra commenti
    grazie :)

    RispondiElimina
  10. @Tex
    Per maggiore chiarezza ho aggiornato il post

    RispondiElimina
  11. http://www.ideepercomputeredinternet.com/2009/07/come-creare-un-menu-espandibile-da.html

    il link "menu verticale a tendina"

    RispondiElimina
  12. @Christian
    Grazie della segnalazione. Adesso il link funziona e rimanda correttamente a questa pagina
    http://www.ideepercomputeredinternet.com/2009/07/come-creare-un-menu-tendina-drop-down.html

    RispondiElimina
  13. ciao volevo chiederti una cosa:
    non esiste un widget o gadget da inserire sul mio blog dove vengono visualizzati i commenti che io lascio su altri blog?!!!

    RispondiElimina
  14. @StelleGemelle
    Molto interessante ma decisamente complicato da realizzare. Bisognerebbe che Google facesse diventare Blogger social come fosse Facebook ma la vedo molto difficile che accada :D

    RispondiElimina
  15. grazie mille comunque!!!!
    continuerò a riempire fogli di appunti per ricordarmi dove lascio commenti!!!
    ciao ciao!!:)))

    RispondiElimina
  16. ciao..ottimo widget! Non è possibile far comparire oltre la data anche l'orario del commento?

    RispondiElimina
  17. @Giuseppe
    Con questo widget no.

    RispondiElimina
  18. Ho appena scoperto il tuo blog e sono davvero entusiasta dei tuoi articoli.
    ho installato questo widget sul mio blog, ma ho preferito rimuovere la scritta "installa ora". Spero non sia un problema :)

    RispondiElimina
  19. @Iracondia
    Non è un problema, mi dà solo fastidio quando mi chiedono a me come fare a eliminare il credit che inserisco in qualche widget.

    RispondiElimina
  20. Grazie :)
    in ogni caso dimenticavo di dirti che poichè mi sembra giusto tutelare la tua proprietà intellettuale, ho inserito esplicitamente nella casella "Credits", presente nella barra sinistra del mio blog, che il widget dei commenti è di proprietà del tuo sito, con tanto di link cliccabile.

    RispondiElimina
  21. grazie mille sei stato chiarissimo ed ho prelevato il codice!!!!

    RispondiElimina
  22. Ciao. Grazie per il suggerimento.Una domanda però: ho inserito il codice e sostituito il tuo indirizzo con quello del mio blog. Il gadget esce fuori perfettamente solo con una piccola sorpresa:i commenti che mette sono quelli del tuo sito e non quelli del mio. Eppure nel gadget il tuo url non c'è ma c'è solo il mio. Dove ho sbagliato? Mi puoi dare cortesemente una risposta? Ciao e grazie ancora.

    RispondiElimina
    Risposte
    1. @# L'indirizzo lo devi sostituire nella penultima riga cioè questo codice
      src="http://www.ideepercomputeredinternet.com/feeds/comments/default?

      Elimina
  23. Hai ragione. Avevo sostituito solo l'ind all'inizio del codice e non avevo visto che c'era un altro anche nella penultima riga. Adesso funziona eccome...:) Ti ringrazio moltissimo. Ciao. Ricky

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.