Widget degli Articoli più commentati di Blogger.

Widget che mostra in un elenco personalizzabile i titoli dei post più commentati con opzionalmente anche il numero dei commenti.

Recentemente su questo sito sono passato ai commenti di Google+ più che altro per ragioni personali in modo da avere i commenti tutti nello stesso posto vale a dire nelle notifiche di Google Plus il che mi consente di risparmiare tempo per leggerli e eventualmente per rispondere. Però l'utilizzo dello stesso Blogger per la gestione dei commenti è comunque preferibile per mostrare quelli più recenti in un apposito widget a beneficio dei lettori.

A proposito di widget è possibile realizzarne uno che mostri i titoli degli articoli più commentati con numerose personalizzazioni che vanno dal numero dei commenti allo stile dei bordi. Per questo gadget non occorre modificare il modello ma ci serviremo dei Pipes di Yahoo!. Per utilizzarli bisogna avere un account Yahoo! che potrà anche essere creato al momento.

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice 

<!-- Post più commentati - Inizio -->
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style=" ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //eliminare questa riga per togliere il contatore dei commenti
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.ideepercomputeredinternet.com
&ShowHowMany=10
&_id=26088013e952970bb43987813f0433de
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<!-- Post più commentati - Fine - www.ideepercomputeredinternet.com  -->

Si salva e si posiziona il widget che avrà un aspetto simile a questo

Il Pipe di Yahoo è quello che ho creato io e si può trovare nella pagina

• Pipe del widget dei post più commentati -

Con questo tool di Yahoo si riesce a rilevare quali siano i post di un certo sito su Blogger che abbiano ricevuto più commenti. Per non rendere il caricamento troppo lungo vengono presi in considerazione solo gli ultimi 1000 commenti questo ovviamente solo nei blog che ne abbiano di più. Il widget funzionerà comunque ma è opportuno crearsi il proprio Pipe per questioni di larghezza di banda che potrebbero altrimenti rallentare il widget. Dopo aver effettuato l'accesso con l'account di Yahoo e aver aperto il Pipe del widget si procede nel seguente modo

1. Si clicca su Clone per copiare il Pipe
2. Nei due campi di configurazione si digita il numero di post che vogliamo visualizzare e l'URL della home del sito senza slash (/) finale e con il dominio canonico .com e non il localizzato .it
3. Si va su Run Pipe per visualizzare i post più commentati nella parte bassa della pagina
4. Si copia l'ID del Pipe che è una stringa alfanumerica da sostituire a quella evidenziata di verde

Nello screenshot precedente sono indicati graficamente i vari passaggi. L'ID può essere ricavato anche dall'URL della barra degli indirizzi del browser

ALTRE PERSONALIZZAZIONI DEL WIDGET

1. Si inserisce l'URL del nostro sito al posto di quello di questo blog
   
2. Si sceglie il numero di post da visualizzare (10 quello proposto)
   
3. target="_blank" serve per aprire il link in un'altra scheda
   
4. Si può cancellare la riga evidenziata di giallo per non visualizzare il contatore dei commenti
   
5. Al posto dell'ID del Pipe evidenziato di verde si mette quello che si è appena ricavato
   
6. Sostituendo <ol> e </ol> con <ul> e </ul> si vedrà un elenco puntato invece che numerato.

Un discorso a parte lo merita lo stile che vogliamo dare all'elenco completando il tag <ol style=" ">. Riporto questa breve tabella per scegliere lo stile dell'elenco

1. disc: cerchio pieno
2. circle: cerchio vuoto
3. square: quadrato
4. decimal: 1, 2, 3, ecc
5. decimal-leading-zero: due cifre cioò 01, 02, 03, ecc
6. lower-roman: cifre romane minuscole i, ii, iii, iv, v, ecc
7. upper-roman: cifre romane maiuscole I, II, III, IV, V, ecc
8. lower-alpha: lettere minuscole a, b, c, d, ecc
9. lower-greek: lettere greche

e se si aggiunge inside, il marcatore viene inserito all'interno dell'elenco. Di default è all'esterno anche se si può inserire outside per ribadirlo. La sintassi da utilizzare è la seguente 

document.write('<ol style="list-style: attributo ;">');

dove al posto di attributo si può mettere uno dei marcatori elencati. Per esempio

<ol style="list-style:square inside;">
 
per avere un elenco con marcatori quadrati all'interno (per la presenza di inside) mentre

<ol style="list-style:lower-greek;">

produrrà un elenco con lettere greche minuscole. Si può avere anche una immagine, pure animata in GIF, come marcatore come mostrato nella Demo. Per far questo bisogna usare il codice

<ol style="list-style-image: url(URL_IMMAGINE);">

dove l'immagine o icona dovrà essere caricata su Google+.