L’universo di applicazioni che sarebbero girate intorno a Friend Connect era già stato annunciato da Google e potete vedere in questo blog uno dei nuovi gadget messi a disposizione: dare la possibilità agli utenti di raccomandare gli articoli più interessanti agli altri lettori. Un esempio vale più di mille parole e andando in fondo a questo post potete vedere come funziona:
Tramite il pulsante l’articolo verrà votato e apparirà nella classifica (che vedete a destra):
Con la possibilità di vedere per ogni articolo quanti lo hanno votato e chi lo ha votato:
Come vedete, per fare le prove ho dovuto “auto-seguire” il mio stesso blog, perchè purtroppo la possibilità di voto è data solo agli utenti che seguono il blog con Friend Connect. Restrittivo, ma visto che la maggior parte dei lettori di questo blog mi segue così, nel mio caso va benissimo. Inoltre la diffusione di questo strumento è sempre in crescita.
Vediamo come e perchè inserire il gadget nel blog.
L’utilità del gadget
Il gadget si rivela utile su diversi fronti:
1. Maggiore interazione degli utenti. Sono gli utenti stessi a votare gli articoli migliori e questo crea un’atmosfera di partecipazione diversa.
2. Ripescaggio dei post. Molti post utilissimi finiscono spesso nel dimenticaio per mancanza di visibilità. Con questo gadget saranno messi in risalto.
3. Statistiche per l’autore. Sapere gli articoli che più hanno interessato i vostri lettori vi darà modo di conoscere in quali argomenti date il meglio di voi.
Come si installa
Purtroppo ancora l’installazione del gadget non è automatica in Blogger (lo diventerà sicuramente col tempo), per cui per installarlo dovrete mettere mano al codice del vostro template. Niente di particolarmente difficile però, giusto delle righe di codice da aggiungere e un nuovo gadget di tipo HTML/Javascript, ma non dimenticatevi di fare il backup del template per ogni evenienza. Prima di aggiungere il gadget, però, andiamo a personalizzarlo.
Personalizzare i gadget di Friend Connect
Per accedere ai gadget messi a disposizione da Friend Connect dovete andare in questa pagina:
Come potete vedere la scelta è molto ampia, in questo articolo parlo del gadget per gli articoli consigliati ma ce ne sono altri che meritano attenzione. A sinistra potete vedere l’elenco dei vostri blog registrati (nel caso di Blogger è automatico, in altri casi vanno aggiunti manualmente), selezionate quello in cui volete aggiungere il gadget e andate nella voce “Gadget” e da lì scegliete “Consiglio”:
Cliccando su “Guarda il video” vedrete un video in inglese che vi spiega il funzionamento del gadget, comunque la cosa è molto semplice. Nella parte superiore personalizzerete l’aspetto che avrà l’elenco degli articoli consigliati, con tanto di anteprima in tempo reale a destra:
Mentre sotto personalizzerete il pulsante di voto:
Per il pulsante è possibile scegliere tra due diverse opzioni: compatto o modulare. A parte l’oscuro uso del termine “modulare”, io ho preferito questa seconda visualizzazione.
La scelta dei colori usa la codifica RGB, e per il primo elemento impazzirete un po’ visto l’eccessivo numero di colori da personalizzare. La cosa migliore è sicuramente usare gli stessi colori del vostro template, della barra laterale in cui finirà il gadget. Per sapere quali colori sono usati date un’occhiata in Layout->Caratteri e colori, oppure utilizzate ColorPic come ho fatto io (lo segnalo in fondo a questo articolo).
Per ottenere l’effetto trasparenza basta non mettere niente:
Una volta fatte tutte le scelte (compreso il testo da far apparire nel pulsante o la larghezza dell’elenco degli articoli consigliati), in fondo alla pagina cliccate su “Genera codice”:
E preparatevi a smanettare col codice HTML.
Inserire l’elenco dei post consigliati nel blog
Copiate il codice HTML presente nella prima sezione:
E inseritelo in un elemento di tipo HTML/Javascript, lasciato senza titolo.
Inserire il pulsante di voto
Andate in Layout->Modifica HTML e cercate questa riga di codice:
<data:post.body/>
Subito dopo inserite questo:
<!-- pulsante di voto - inizio -->
<b:if cond='data:blog.pageType == "item"'>
Copiate il codice HTML presente nella seconda sezione:
E incollatelo dopo le righe che avete aggiunto prima. Alla fine, accodate questo:
</b:if>
<!-- pulsante di voto - fine -->
Riassumendo, il codice che verrà aggiunto seguirà questo modello:
<!-- pulsante di voto - inizio -->
<b:if cond='data:blog.pageType == "item"'>codice prelevato dalla seconda sezione
</b:if>
<!-- pulsante di voto - fine –>
Prima di salvare il template, però dovrete fare una piccola modifica.
Risolvere il problema delle segnalazioni duplicate con Friend Connect
Aggiungo questo paragrafo dopo aver notato (e dopo che mi è stato fatto notare) che alcuni post apparivano duplicati. Mai una cosa facile!! Il problema è dovuto al fatto che il pulsante per “riconoscere il post” utilizza l’indirizzo che al momento viene visualizzato nella barra del browser. Ma se una pagina originariamente ha questo indirizzo:
http://creareblog.blogspot.com/2009/11/possibilita-di-consigliare-gli-articoli.html
Cliccando si clicca su “Leggi tutto…” l’indirizzo diventa
http://creareblog.blogspot.com/2009/11/possibilita-di-consigliare-gli-articoli.html#more
E ancora quando si arriva al post dal feed reader apparirà qualcosa del genere:
http://creareblog.blogspot.com/2009/11/possibilita-di-consigliare-gli-articoli.html?url…
Nel primo caso il tag #more aggiunto serve a posizionarsi direttamente sulla parte del post ancora da leggere, mentre nel secondo caso serve a indicare la provenienza del lettore. La cosa problematica è che Friend Connect interpreta i tre indirizzi come diversi, permettendo di votarli in maniera separata. Senza entrare in ulteriori aspetti tecnici, spiego come ho risolto io. Per lavoro mi capita di usare Java ma mastico meno il JavaScript, quindi se qualcuno ha una soluzione più elegante (premesso che location.host + location.pathname non funziona) ben venga.
Nella porzione di codice del pulsante, aggiungete in testa la riga che ho evidenziato in rosso:
<script type='text/javascript'>
var skin = {};
var ind = location.href.split('?')[0].split('#')[0];
skin['HEIGHT'] = '73';
Mentre più sotto sostituite le due occorrenze di location.href con ind:
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
diventa
'view-params':{"pageUrl":ind,"pageTitle":(document.title ? document.title : ind),"docId":"recommendedPages"}
A questo punto potete salvare il template ed è fatta. Ricordatevi che se rigenerate il codice del pulsante dovrete rifare questa piccola modifica. Scelta tecnica discutibile da parte di Google, ma sono certo che quando l’integrazione con Blogger sarà automatica non lo avremo più. Nel frattempo dobbiamo fare da soli.
Pulsante troppo attaccato al post
Se il pulsante di voto vi finisce troppo attaccato al post, in testa alla seconda porzione di codice che dovete inserite aggiungete la riga che ho evidenziato in rosso:
<br/>
<!-- pulsante di voto - inizio -->
<b:if cond='data:blog.pageType == "item"'>
Potete metterne anche più di una, finchè otterrete l’aspetto desiderato.
Conclusioni
Mi sono deciso a provare questo gadget perchè per i motivi esposti sopra si rivela davvero utile, è di grande utilità per gli stessi lettori. Ho votato io alcuni post (un po’ a caso in verità) per fare la prova ma vi invito a farlo anche voi, in quelli che trovate davvero interessanti, per dargli maggiore visibilità e permettere anche agli altri di trovare argomenti utili.
La partecipazione effettiva poi a questa iniziativa sarà da provare sul campo, se installate il gadget fatemi sapere le reazioni dei vostri lettori!
Il gadget non ha mostrato problemi sotto i vari browser, ma non so se si presenta (e se esiste ancora) il problema avuto con Internet Explorer e il gadget dei lettori di Friend Connect. Se così dovesse essere, tenetemi informato!
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!
21 commenti:
Sei sempre il migliore... questo aspetto ancora ci mancava e... ce l'hai indicato! GRAZIE da http://italy-lowcost.blogspot.com/
sai qual è un problema? almeno da quello che ho notato con i miei lettori, è che molti sono ostici a registrarsi o comunque anche semplicemente a loggarsi, quindi sarebbe stato uno strumento più utile, e alla fine anche più attendibile, se chiunque avesse potuto votare
Come si suol dire Orazio, sei sempre sul pezzo.
Questo contrasta molto col senso del discorso che facevi qualche giorno fa nel post di riflessione che ci ha fatto temere nelle prime righe che non ti sentissi più all'altezza del tuo lavoro.
Sono molto contento di questa novità e tu sei sempre molto bravo.
La tua forza è la semplicità con cui spieghi il "mistero" dei codici, senza roboanti tecnicismi.
Codice tot, stringa di testo tot, finito. In questo modo chiunque può avvicinarsi all' esperienza Blog senza sentirsi umiliato. Grazie!!!
utilissimo come tantissimi tuoi post, ma la penso come Bobby almeno per la mia piccola esperienza da "blogger" , c'è qualcosa di simile ma che permette a tutti di votare ?
Ciao Tenebrae :)
Molto interessante, come idea (ho però notato che nell'elenco dei post ci sono ripetizioni di articolo :\ ).
Chiedo un parere (a te o chiunque voglia rispondere): può essere utile inserire questa funzionalità se il blog ha poche persone sottoscritte tramite friend connect (tipo per aumentarne il numero)?
Tutta la mia lista di contatti è dispersa fra altri 2-3 social network (e molti trovano complicato usare i servizi di Google... sigh) e, al momento, ho solo 8 "sostenitori"... Non è che rischio di fare ad un lettore casuale l'impressione che il blog sia non seguito, disincentivandolo dal sottoscriversi tramite quel servizio? :\
Se tornassi agli inizi della tua carriera da blogger, come ti comporteresti?
Danke! :)
K.
Non riesco assolutamente a trovare la prima riga di codice che indichi in HTML. Dove si trova esattamente?
grazie ragazzi, tranquilli che non ho intenzione di mollare questo blog, al momento :)
@boby: si, è molto restrittivo. io ho spiegato perchè nel mio caso può andare bene, ma non è detto che valga per tutti. dubito comunque che in futuro permetta la votazione anche per i non iscritti a friend connect
@kael: si ho visto il problema dei post duplicati, e ne ho anche capito il motivo, una scelta dubbia fatta da Google... mai una cosa facile! stasera cercherò di risolverlo
per quanto riguarda la tua considerazione... io l'elenco dei lettori l'ho messo subito, come vedi nelle immagini qui avevo solo 10 lettori.. questo per dire di fregartene del lettore casuale che basa il giudizio sul tuo blog solo in base al numero di sostenitori che vede... non sarà mai un buon lettore
per il pulsante di voto forse aspetterei di vedere come si evolvono le cose e vedere se friend connect viene usato per seguire il mio blog... ma d'altronde anche adesso io lo tengo "in prova", se non verrà utilizzato lo toglierò
@peter79: prova a cercare semplicemente post.body, e metti il codice dopo la porzione che lo racchiude
Ciao.
Ho installato ma avrei bisogno di distanziare di una riga l'inizio della cornice del pulsante dalla fine del post (altrimenti è proprio appiccicato al post).
Come faccio?
wow, 968 sostenitori in poco più di un anno (togliendo i 10 che già avevi)... hai fatto un bel balzo avanti ;)
vediamo come andrà per quella volta anche a me; intanto grazie per le dritte :)
K.
@benzene: problema che potrebbero avere in molti, aggiornerò il post
@kael: in realtà i "sostenitori" sono 1094... c'è un buon 10% di timidi che seguono anonimamente... si vede sempre nella pagina linkata sopra di friend connect
Bello e interessante. Per caso ne esiste uno che consente di far votare anche gli utenti che non hanno un account di nessuno dei servizi richiesti?
P.S. "grazie ragazzi, tranquilli che non ho intenzione di mollare questo blog, al momento"
e guai a te se le molli! ~x( ;)
@vinnie: ciao bello, per votare il post ci sono tanti modi il problema è la classifica, non conosco altri servizi che te ne diano una da esporre... magari farò una ricerca :)
dove posso trovare dei templates possibilmente in italiano come il tuo? o comunque c'è un sito oltre Phsyc(nn so se l'ho scritto bn) ke mi permetta di personalizzarlo in modo poco complicato?:)
complimenti x il blog, è stupendo!!
Ciao Tenebrae spero abbia tempo di rispondermi non so a ki rivolgermi è ormai qlc giorno che in home page sul mio blog non mi mostra più gli ultimi post ed i lettori che mi seguono , nonstante mi sembri tutto in regola e non abbia assolutamente cambiato o toccato nulla,
il blog è kuriosando.blogspot.com , a qualcuno di voi è successo ??? sapete come fare ??? e tu tenebrae ????
Grazie
wow sono un capra con l'html ma ci sono riuscito 8-}
Cristian mi dava il tuo stesso problema con i lettori... poi ho notato che sul browser di explorer non mi dava questo problema (uso firefox)... dopo un pò cmq si è risolto da solo... magie :-/
ok grazie ..comunque a me me piace (Proietti) :))
Buon giorno,
non ho resistito ed ho inserito sul mio blog il widget, volevo gentilmente chiedere se è normale, che all'inizio l'elenco dei consigliati non appaia proprio (non essendoci nessun voto) oppure bordi e testi dovrebbero almeno apparire?
Ringrazio anticipatamente per la cortese risposta e auguro a Tenebrae e a tutti gli utenti del blog un Felice Natale!!
Ciao! Dopo aver configurato tutto ottimamente (grazie!), volevo chiedere come mai sui post consigliati ora appaiono tutti elementi del tipo "Fatico a capire: nome post".
Fatico a capire sarebbe il titolo del mio blog, non è possibile eliminarlo in qualche modo dai nomi dei post consigliati?
Grazie e buone feste!
Sono riuscita a inserire il pulsante del voto, ma non riesco a capire perchè si visualizza solo nell'ultimo post, mentre negli altri si vede solo una riga.
Qual è il problema?
grazie tenebrae sono sempre utili i tuoi post ho seguito molti tuoi consigli vuoi vedere se ti piace ora il mio blog cerco di aggiornarlo ogni giorno e cerco sempre nuovi articoli ecco l'indirizzo:
http://dolciragazze.blogspot.com/
ciao e grazie ancora! :))
:)) ciao @peter79 ho io la soluzione per te è molto semplice e una volta l'ho letta in un articolo di tenebrae clicca ctrl e poi clicca F incolla la frase da cercare ed è fatta :))
Prima di lasciare un commento, leggete qui
Posta un commento
Nota. Solo i membri di questo blog possono postare un commento.