Pubblicato il 04/06/11 - aggiornato il  | 16 commenti :

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

valutazione stelle nei post 

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

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

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

posizionare stelle valutazione 

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.



16 commenti :

  1. ci ho provato ma le stelle compaiono appena sotto i vari post disponibili di linkwithin in modo lentissimo dopo aver caricato la pagina :(

    RispondiElimina
  2. @ivabellini
    Prova a inserire il primo codice subito sotto questo blocco
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    </b:if>

    RispondiElimina
  3. Mi son trovato meglio a piazzarlo sotto il testo, mettendo il tuo codice sotto:



    avendo cura di modificare questi così:

    g:text-color='data:red'
    g:width='250'/>

    ora il testo a destra appare più marcato e ben visibile.

    http://ivabellini.blogspot.com/2011/06/nicole-minetti-la-eva-d-italia.html

    come noterai si carica sempre per ultimo con una certa calma

    RispondiElimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  5. io le uso d aun po' però ho lavorato sull'html.in questo modo si può scegliere dove posizionarle senza andare ad incididere sui tasti di conidisione,che possono essere inseriti dopo data post body o nelle righe più in basso.

    RispondiElimina
  6. @ivano bellini se ti interessa puoi vedere questo post dove parla di un altro metodo semplicissimo per installare le stelline

    http://templatexblogger.blogspot.com/2010/01/come-aggiungere-le-stelline-per-votare.html

    P.S. ho visto il tuo log molto carino complimenti.Dove hai preso il widget dei post popolari?è da un po' che cerco uno simile al tuo.Grazie e a presto!

    RispondiElimina
  7. @ivano bellini se ti interessa puoi vedere questo post dove parla di un altro metodo semplicissimo per installare le stelline

    http://templatexblogger.blogspot.com/2010/01/come-aggiungere-le-stelline-per-votare.html

    P.S. ho visto il tuo log molto carino complimenti.Dove hai preso il widget dei post popolari?è da un po' che cerco uno simile al tuo.Grazie e a presto!

    RispondiElimina
  8. grazie del suggerimento e dei complimenti, per il widget dei post più popolari basta sceglierlo fra quelli che sono già presenti insieme agli altri di blogspot, forse tu non lo avevi notato prima di ora.

    RispondiElimina
  9. come non detto, le stellette non sono precise perchè nell uso ho riscontrato un difetto di precisione nel numero di valutazioni fatte, certe volte aumenta di 1, certe scende di 1....
    va molto bene quando si clicca le stelle ma poi non memorizza bene.

    RispondiElimina
  10. @ivabellini
    Devi considerare che è una funzionalità in Beta Test e che non è ancora stata messa nella Bacheca ufficiale di Blogger

    RispondiElimina
  11. io seguo tutti i passaggi ma proprio non riesco a metterle...

    RispondiElimina
  12. @watchingfilm.net
    Hai anche aggiunto il codice finale?

    RispondiElimina
  13. Ciao, innanzitutto complimenti e grazie per la guida.
    Io ho la necessità, oltre che di inserire questo bottone, anche di poter estrapolare le statistiche di voto. E' mia intenzione infatti usare questi dati per creare un microformato di ranking integrato nel mio template.
    Hai idea se ciò e possibile e, se sì, quali funzioni restituiscono i valori:
    - Voto Medio
    - Totale valutazioni

    Grazie per il prezioso aiuto!

    RispondiElimina
  14. Grazie mille, sai anche come è possibile farli apparire non solo all'interno del post ma anche diciamo della preview?

    credo che questo codice da mettere sotto la sezione post-footer
    debba essere incorporato all'interno di un'altro per renderlo visibile anche (volendo) nel modo in cui indicato sopra... ma non ricordo come =)

    RispondiElimina
  15. @Asgard
    Nella Anteprima? Non vedo a che possa servire e comunque non so come si potrebbe fare visto che dipende da come i server di blogger mostrano l'anteprima di un post prima di pubblicarlo. Se invece ti riferisci al Read More vale a dire al riassunto del post visibile anche in Homepage, devi togliere la prima e l'ultima riga del codice
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    .......
    </b:if>

    RispondiElimina

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