27 aprile 2012

Il widget della nuvola dei Top Commentari reso più compatto.

Il gadget dei Top Commentatori, vale a dire degli utenti che hanno commentato di più il blog, è uno dei widget presentati in questo  sito che ha avuto maggior successo. Dopo aver pubblicato il gadget dei commentatori che ereditava lo stile dal blog, ne ho proposto anche una seconda versione con la possibilità di scegliere il colore dello sfondo e quello del bordo.
La particolarità di questo gadget è che la dimensione dei caratteri dei nickname è funzione del numero dei commenti. Sono presi in esame gli ultimi 2000 commenti e, chi ne ha postati molti, vede il suo username allargarsi a dismisura. Questo mi consigliò di filtrare i commentatori che avessero superato le 60 unità per mantenere una certa armonia nel widget. Tale decisione fu causa di  fraintendimenti decisamente spiacevoli con utenti che ritenevano di essere stati cancellati ingiustamente.
Ho quindi calibrato meglio i parametri per fare in modo che anche i commentatori più prolifici mantengano una dimensione del loro nickname sufficientemente proporzionata a quella degli altri. Questo nuovo widget dei Top Commentatori mi ha quindi permesso di togliere i filtri a Dieta e Dintorni e Fioredicollina che avevo appunto tolto  per questa ragione. Ho mantenuto il filtro solo per il mio nome:
top-commentatori
Per l'installazione non occorre modificare il modello. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito il seguente codice
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000; 
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 82 + (ccdiff * 38) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//nome commentatore cliccabile
display = display + ccLName + " ";
}
document.write(display);
document.write('<div style="font-size:70%;text-align:center"><p><a href="http://goo.gl/Agj8S">Install widget</a></div>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.ideepercomputeredinternet.com
&Exclusions=Anonymous,Ernesto Tirinnanzi
&ShowHowMany=30&Order=alphabet
&_callback=cCloud
&_id=95f241b8755110489d14c0e32abde281&_render=json"
type="text/javascript"></script>
</div>
Le personalizzazioni riguardano l'inserimento dell'URL del vostro blog senza slash ( / ) finale, i nomi degli utenti dal filtrare separati da una virgola, il numero dei commentatori da visualizzare (30) e il tipo di ordinamento (alphabet o frequency).
Per la stringa alfanumerica colorata di blu bisogna procedere in questo modo:
  1. Si accede al Pipe di Yahoo di questo widget
  2. Ci si deve loggare con un account Yahoo o crearlo se ancora non si possiede
  3. Nella pagina del Pipe si deve cliccare sul pulsante Clone.
  4. Un Pipe identico a quello creato da me andrà a collocarsi nel vostro account
  5. Si modificano i 4 campi inserendo i vostri dati e le vostre preferenze che riguardano il tipo di ordinamento, l'URL del blog (senza slash), il numero dei commentatori e i nick da filtrare
  6. Si va su Run Pipe. Nella parte sottostante della pagina sarà visualizzato l'elenco dei commentatori
pipe-yahoo-top-commentatoriNon resta che copiare l'ID del Pipe direttamente nella pagina, vedi parte dell'URL evidenziato di verde, oppure fare la stessa cosa con la barra degli indirizzi del browser
id-pipe-yahoo
Tale stringa si sostituisce a quella colorata di blu presente nel codice. In quest'ultimo, come potete vedere, è presente anche la riga
ccFontsize = 82 + (ccdiff * 38) / (max - min) + "%";
che è quella che determina la dimensione dei caratteri in percentuale rispetto a quella di default. I parametri fondamentali sono 82, 38 e (max - min). Il primo parametro (82) possiamo dire che determina la dimensione percentuale del carattere di base nel senso che, se si mette un valore più piccolo, diminuisce la dimensione di tutti i caratteri.
Il secondo valore (38) determina invece il gradiente di accrescimento all'aumentare del numero dei commenti. Se si diminuisce tale numero i caratteri avranno una minore differenza di dimensione.
Coloro che avessero già installato questo widget, volendo possono modificare solo questi valori. Ricordo che nel gadget precedente erano rispettivamente di 80 e 100. Chi avesse installato il gadget con lo sfondo può modificare i numeri colorati in viola della riga
nuvola_dim = 110 + (nuvola_parent * 130) / (max - min) + "%";
ottenendo il risultato di configurare le dimensioni massime e minime del nome degli utenti. Concludo ricordando che line-height:1.2; rappresenta la dimensione delle righe e che quindi può essere aumentata per esempio a 1.3 se si ha la necessità di avere i nickname più distanti verticalmente.



34 commenti:

  1. Sei super nello spiegare e mettere i codici ma nonostante tutto io ho sempre paura di commettere qualche cavolata....prima o dopo.....ciao e buona fine settimana

    RispondiElimina
  2. Ernesto,
    sei un tesoro, in tutti i sensi :)

    RispondiElimina
  3. evviva evviva, sono capitata x caso x chiederti una cosa e che ti vedo? sono di nuovo tra i top commentatori, anzi sono la TOPPISSIMA! ahahahhahaha....
    allora sorge doveroso un dubbio, per fare questa modifica al mio blog devo eliminare il vecchio widget e mettere questo? io pero' non avevo filtrato a 60 commenti vorrei solo ridimensionare i nomi del blogger e basta....

    RispondiElimina
    Risposte
    1. ops...leggendo meglio ho trovato in fondo la soluzione al mio quesito ora provo correggere il mio 'vecchio' codice....grazie!!!

      Elimina
    2. perfetto! grazie Ernesto sei mitico!
      ora non resta che trovare la soluzione per il mio problemino della google friend connect....lo sai vero che è un mio grande rimpianto? non è che ti sia venuta qualche geniale idea x me nel frattempo ?? ;-)

      Elimina
  4. Ciao ho cercato fi fare tutto come da istruzioni ma evidentemente qualcosa non funziona.... ho messo al posto indicatoin rosso l'indirizzo del mio blog, ho tolto il tuo nome ed ho lasciato anonimus....
    Ho messo ID Pipes ho account yahoo sostitendo la stringa in bluche è questa
    &_id=95f241b8755110489d14c0e32abde281&_render=json" ovvero fino al nr.1 finale con il mio id e non mi viene niente. Mi dice scarica il widget evado di nuovo sul tuo sito.... se invece lascio l'indirizzo del tuo sito ovvero non modifico mi appare con ovviamente la nuvola dei tuoi commentatori.
    Hai una spiegazione....cosa è che sbaglio.....
    Grazie

    RispondiElimina
  5. @edvige
    Quando vai su Run Pipe li vedi i tuoi commentatori?

    RispondiElimina
  6. NO, lapidario non li vedo perchè????

    RispondiElimina
  7. @Edvige
    Guarda che inserendo i tuoi dati, si vedono perfettamente i commentatori, guarda

    http://i.minus.com/iCy7eGYPIlorK.jpg

    Ricordati di inserire l'UL canonico del blog cioè con il .com e senza la slash finale cioè
    http://mementosolonico.blogspot.com

    RispondiElimina
    Risposte
    1. ma come hai fatto accidenti a me.....non solo non ho visto i commentatori sulla pagina che mi hai fatto vedere ma traferito il tutto ugualmente sul blog nella speranza che li forse qualcosa cambi, ma sul blog non veniva nemmeno la nuvola ma solo la scritta....scarica widget o cosa del genere non ricordo....
      URL canonico senza slah inserito ma guarda che non è più come Goggle l'ha cambiato in it. Se vai sul mio blog vedi "it" finale non il "com". Però se l'errore stà in com / it provo mettere COM e vediamo.
      Oggi farò di nuovo le prove ti saprò dire.
      Non è che potevo inserire quello che hai fatto tu????? :DD
      Buona domenica.

      Elimina
    2. @edvige
      Dovrebbe funzionare anche con il .it ma con il .com siamo più sicuri.

      Elimina
    3. Allora sono riuscita a vedere la pagina dell'immagine che mi hai mandato ed o visto i nomi dei commentari miei.... Rifatto tutto messo anche il COM ma sul blog non viene la nuvola rimane solo ...scarica widget che se clicchi porta alla tua pagina.
      L'unico problema potrebbe essere nel non corretto inserimento del ID yahoo quindi di metto qui tutta la striga e tu se sei cosi gentile mi segnali in rosso se devo mettere tutto o quale parte....o se effettivamente questo è l'ID..
      http://pipes.yahoo.com/pipespipes8b505a8252b80563858c5064b1586f8a/df512f7189685455029dba7c5499f628

      Grazie ancora e scusa il disturbo.

      Elimina
    4. @edvige
      L'ID non è sicuramente questo, è troppo lungo. Prova a usare questo codice
      https://www.dropbox.com/s/iom872lmuw1tn0t/codice-edvige.txt
      però se metti un tuo ID nel Pipe è meglio.

      Elimina
    5. Carissimo, sei una CIMA.
      Il codice che mi hai preparato funziona.
      Però ho voluto ascoltare il tuo consiglio e sono andata a vedere....allora ho contato di quanti numeri/lettere è composto il tuo ID che sono in totale 32
      Allora della suindicata stringa codice che ti ho dato ho contato dopo pipes che inizia con un "8" 32 segni in totale ed arrivo alla fine prima del primo slash. Ho fatto copia incolla modificando il tuo codice poi inserendo mio indirizzo ecc. e..............FUNZIONAAAAAAAA
      Praticamente ID = le prime 32 cifre/lettere.
      Insomma da non addetta ai lavori mi sono ingegnata :DD che te ne pare?????
      Quindi ora per ogni evenienza slavo il tuo codice ed ovviamente quello con il mio ID non si sa MAI.....
      Grazie e penso che farò un bel post di questo....lo riporto sul mio penso che molti lo troveranno interessante.....

      Elimina
    6. @edvige
      secondo me hai clonato male il Pipe e ti è venuto un URL allungato per quella ragione, quello che conta però è che la prima parte sia quella corretta.

      Elimina
    7. I cloni non sono il mio forte .....si hai ragione però se non mi fosse venuta l'idea di contare i segni....non saprò clonare ma contare :DDDDD
      Grazie a te che mi fai aguzzare l'ingegno e buona settimana.

      Elimina
  8. Ciao!
    Ho installato il widget dopo parecchio tempo dalla prima volta e devo dire che questa versione è più "ordinata".
    Mi stavo chiedendo se si potesse modificare il codice per avere solo i commenti di un certo periodo oppure solo gli ultimi 200 commenti.
    Grazie.

    RispondiElimina
    Risposte
    1. @Manuky
      Tutto si può fare ma sarebbe troppo complicato, bisognerebbe rimettere mano a tutto il procedimento.

      Elimina
    2. Sì, infatti. Ho creato una copia del pipe e credo di aver risolto. Devo ancora testarlo bene econtrollare che sia tutto corretto ma credo di aver selezionato solo gli ultimi 400 commenti.

      Elimina
  9. c'e qualcosa che non capisco bene, perche non riesco a metterlo.. faccio tutto come c e scritto,xo quando copio il codice nel quadrato blu e lo incollo nel mio blog.. perche mi esce la tua lista commentatori e non la mia?? :(

    RispondiElimina
    Risposte
    1. @Cassandra
      Devi inserire il tuo ID e l'URL del tuo blog al posto di www.ideepercomputeredinternet.com

      Elimina
  10. Grazie mille per questo wiget! E' utilissimo e la spiegazione è molto chiara e dettagliata! Sono riuscita a installarlo senza problemi, grazieee! :)

    RispondiElimina
  11. A che serve sostituire la riga blu con un account yahoo se già funzione bene?

    RispondiElimina
    Risposte
    1. @AndreaSapuppo
      Il numero delle persone che hanno installato questo widget è superiore alle 100 unità almeno dal numero dei cloni del Pipe. Se tutti avessero fatto come dici tu ora il widget sarebbe scomparso perché si sarebbe superato il limite di banda disponibile su Yahoo.

      Elimina
    2. Lo creo anche io, non ne avevo capito la necessità, nella speranza che altri non facciano come me, grazie ancora :D

      Elimina
  12. Ho fatto tutto ciò che dici nel post, ma il risultato è la scritta "Top commentatori" e niente altro... :(
    Ho fatto tutto, giuro...
    Riesco a vedere la lista dei miei commentatori, durante la creazione del Pipe, ma al dopo aver salvato il gadget... puff... sparisce tutto!
    Dove sbaglio?
    Se ti servono i miei dati chiedi pure, peggio di così... :)

    RispondiElimina
    Risposte
    1. @VictoriaPlum
      Visto che il widget come puoi vedere funziona benissimo questo significa che hai fatto qualche piccolo errore senza accorgertene. Segui questa procedura:
      1)Incolla il codice così com'è nel tuo blog, se funziona passa al punto 2)
      2)Sostituisci l'URL di questo blog (http://www.ideepercomputeredinternet.com )con il tuo, se funziona passa al punto 3)
      3)Sostituisci i nick dei commentatori da escludere, se funziona passa al punto successivo
      4)Se è tutto OK sostituisci la stringa alfanumerica del Pipe clonato.
      Facendo in questo modo ti renderai conto più facilmente del passaggio che stai sbagliando.

      Elimina
    2. Ho eseguito alla lettera i quattro punti da te elencati... e il gadget è "apparso" nel mio blog! :)
      Grazie mille Ernesto! :)

      Elimina
  13. Ciao Ernesto....non si potrebbe partire da zero col nuovo anno con un top commentatori ? è proprio necessario che si parta coi numeri di commenti già 'un tot'? tutti da zero no?

    RispondiElimina
    Risposte
    1. @Fioredicollina
      Guarda che i commenti vecchi vengono azzerati automaticamente. Il widget tiene conto solo degli ultimi 2000 commenti

      Elimina
  14. Se un utente ha scritto sul mio blog con più nick dunque compare nella Top Commentatori con più nick e volessi accorparli in un unico nome (sotto sua richiesta) come si può fare? C'è un modo? Grazie

    Complimenti per gli ottimi ed utilissimi tutorial

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.