Come inserire le stelle di valutazione nei post di Blogger.

La funzione per valutare i post è stata inserita da circa tre anni ma è sempre rimasta allo stadio di test e non è tuttora possibile la sua installazione dalla normale Bacheca di Blogger. Si tratta di visualizzare cinque stelle alla fine di ciascun post nella zona in cui si vedono anche i pulsanti ufficiali di condivisione di Blogger. I visitatori, oltre a dare il proprio voto al post attraverso la selezione delle stelle, vedranno anche il numero di voti che sono già stati comminati dagli altri lettori e quale è stata la valutazione media. I possibili voti sono Pessimo (1 stella), Scarso (2 stelle), Buono (3 stelle), Ottimo (4 stelle) e Eccezionale (5 stelle). Per visionare il funzionamento del widget accedete a questo post di demo

 

Per mettere le cinque stelle alla fine di ciascun articolo, occorre accedere a Blogger in Draft e selezionare il blog in cui inserire la funzione, se ne abbiamo più di uno. Andare quindi su Design > Elementi pagina > Post sul blog > Modifica

Si tratta di aprire la finestra per configurare il post nella modalità in Draft. La differenza rispetto alla normale Bacheca è che, nella finestra che si apre, si visualizzerà anche l'opzione per inserire le valutazioni a stelle

Occorre inserire la flag o segno di spunta che dir si voglia e cliccare su Salva in basso a destra. Se adesso si apre un post qualsiasi dovremmo vedere le cinque stelle nella parte bassa. Quasi sempre però questo non accadrà se abbiamo modelli personalizzati. Vediamo come fare per risolvere il problema.

Andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Mettiamo la spunta a espandi modelli widget e cerchiamo questa riga

<div class='post-footer-line post-footer-line-1'>

oppure quest'altra (in questo caso le stelle si vedranno prima degli altri elementi del footer)

 <div class='post-footer'>

Immediatamente sotto incolliamo questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>
</b:if>

con la possibilità di configurare le dimensioni del widget in altezza (height) e larghezza (width). Salviamo il modello.

Con la maggior parte dei template, questa modifica dovrebbe essere sufficiente a visualizzare finalmente le stelle di valutazione. Aprite un post per controllare che sia effettivamente così. Se ancora le stelle non si vedono vuol dire che manca il codice relativo. Per rendercene conto con certezza, andiamo su Design > Modifica HTML e espandiamo i modelli widget. Clicchiamo su F3 o su Ctrl+F e incolliamo la stringa

 <b:if cond='data:top.showStars'>

per vedere se è effettivamente presente. Nel caso in cui non fosse così, dovremo inserirla manualmente. Con F3 o Ctrl+F si cerca la riga

<b:include name='nextprev'/>

e, immediatamente sotto, si incolla questo codice

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Salviamo il modello. Adesso le stelle di valutazione dovrebbero essere finalmente visibili. Si può, entro certi limiti, modificare la posizione delle stelle andando su Blogger in Draft > Design > Elementi pagina > Post sul blog > Modifica e trascinando il widget con il drag & drop del mouse

 

Ricordarsi di cliccare su Salva dopo aver riposizionato gli elementi. Questa funzionalità del trascinamento con il mouse, c'è da dire che non è completamente affidabile quando si ha a che fare con template molto personalizzati.