Come inserire le faccine animate nei commenti su Blogger!

Vi è mai capitato di entrare in un blog su Blogger senza particolari abbellimenti (magari col semplice template Minima Dark) e di provare un senso di tristezza infinita? Google potrebbe decidersi a darsi una mossa e permetterci di arricchire i nostri blog come fa la concorrenza.

Uno dei vantaggi di Blogger però, rispetto alla concorrenza di cui sopra, è che davvero in pochi minuti si riesce a mettere quello che Google ancora non ci ha dato.

In questo post vedremo come dare la possibilità ai lettori di inserire delle emoticon animate dentro i commenti, una cosa che certo fa il suo effetto:

L’idea originale l’ho presa da Bloggerstop, riadattandola e semplificando l’intervento, e conservando personalmente le immagini su Skydrive (non si sa mai l’autore dovesse scomparire!). Anche gli script originali li ho modificati e pubblicati in un mio spazio personale, per cui se dovessimo decidere di aggiungere altre faccine, la modifica si ripercuoterebbe in automatico su tutti i blog che faranno la modifica che sto per esporre. Questa modifica si sposa meglio con i blog che hanno abilitato la nuova gestione dei commenti, ma può essere fatta anche da quelli che non lo hanno fatto, purchè i commenti siano visibili sotto il post e non solo nella finestra.

Come sempre, prima di cominciare vi invito a fare la modifica in un blog di prova e prima di riportarla in quello ufficiale fate il backup del template. Lo so, siete stanchi di sentirmelo dire sempre.

Inseriamo le emoticon nel nostro template

Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice (per la ricerca, CTRL+F nel browser):

<b:if cond='data:post.embedCommentForm'>

Subito sotto, incollate questa riga di codice:

<script src='http://tinyurl.com/y9ep5y7' type='text/javascript'/>

AGGIORNAMENTO: a causa dei problemi avuti, ho modificato la parte in rosso nel codice sopra. Dovrete aggiornarlo nei vostri template altrimenti questa modifica non funzionerà più.

Adesso cercate questa riga di codice:

</body>

Subito sopra, incollate questo:

<script src='http://tinyurl.com/yz6s92u' type='text/javascript'/><noscript> <a href='http://creareblog.blogspot.com' target='_blank'> <span style='font-size: x-small;'>Add Smilies</span> </a></noscript>

AGGIORNAMENTO: a causa dei problemi avuti, ho modificato la parte in rosso nel codice sopra. Dovrete aggiornarlo nei vostri template altrimenti questa modifica non funzionerà più.

A questo punto salvate il template e il gioco è fatto:

Possibile problema (aggiornamento)

In alcuni template può verificarsi che le faccine della legenda si vedano in verticale:

Per risolvere questo problema, vi rimando alla lettura di questo post.

Per concludere

Per un limite di Blogger, purtroppo le emoticon saranno visibili solo alla pubblicazione del commento (non è possibile vederle già mentre si scrive), e per lo stesso motivo non mi è riuscito di far inserire le faccine semplicemente cliccandoci sopra (per i tecnici: essendo la textarea del commento in un iFrame pubblicato su altro dominio, javascript mi da errore di protezione – però se qualche genialoide ha la soluzione al problema, io sono qui!), è però possibile copiare e incollare i caratteri necessari.

E’ necessario separare le emoticon dal testo con uno spazio per farle visualizzare. La modifica è retroattiva, cioè vedrete comparire le emoticon anche nei commenti dei post precedenti.

A me l’idea piace, e ho deciso di farla io stesso in questo blog, quindi sbizzarritevi pure a provarla.