10 giugno 2009

Come aggiungere le emoticon animate (smiley) nei commenti di un blog su Blogger.

Per inserire le emoticons o smilies che dir si voglia all’interno di un post si possono utilizzare due metodi

1)Usare Windows Live Writer e scaricare dei plug-in adatti al caso come quello che permette di inserire le emoticon di Live Space oppure quello per gli smilies di MSN e Yahoo.
2)Se non si usa WLW possiamo utilizzare il metodo illustrato in questo articolo
Per quanto riguarda i commenti la cosa è in linea di massima impossibile senza modificare il template.
La modifica che bisogna fare consiste nell’inserire uno script che sostituisca automaticamente delle combinazioni di segni ortografici con le corrispondenti immagini animate. Il lavoro è stato fatto dal blog citato a piè di pagina e mi sono limitato a
  1. Caricare le immagini in GIF delle emoticon sul mio account Skydrive
  2. Modificare il codice con i nuovi URL delle immagini
  3. Caricare il codice su Google Sites
  4. Modificare lo script sempre con i nuovi URL e caricarlo su Google Sites
Dico subito che la personalizzazione funziona su Firefox, Chrome e Opera mentre non si vede in Explorer, d’altra parte in IE non funziona mai niente . Mi stupisco che ci sia ancora chi si ostina a usarlo.
Prima di iniziare la procedura ancora due precisazioni

  1. Se qualcuno avesse fatto la personalizzazione dei commenti dell’autore del blog come spiegato in questo post deve effettuare il percorso inverso e togliere il codice che aveva immesso sostituendolo con quello che c’era prima. Nell’articolo citato ci sono entrambi i blocchi di codice
  2. Andare in Blogger in Draft e verificare che i nostri commenti siano effettivamente visualizzati sotto il post. Il percorso è Personalizza > Impostazioni > Commenti > Posizionamento modulo dei commenti > Incorporato sotto il post (Mettere segno di spunta e salvare le impostazioni)
    posizione_commenti
Adesso andare in Layout > Modifica HTML e scarica modello completo per un eventuale back-up. Espandere i modelli widget e cercare, pigiando su F3 o Ctrl+F, la seguente riga di codice



<b:if cond='data:post.embedCommentForm'>
code
ed immediatamente sotto incollare il codice che prima avete selezionato e copiato da questa pagina.
Le personalizzazioni da fare sono due come evidenziato in questo screenshot

codice

  1. Il colore dello sfondo del rettangolo in cui si visualizzeranno le emoticon sopra il modulo dei commenti. Ho inserito #ffffff che significa colore bianco ma può essere variato a seconda dei colori del vostro blog
  2. width: 65% – E’ la larghezza in percentuale del riquadro delle emoticon. Questo è un dato fondamentale e dipende molto dal tipo di modello. Nel caso di questo blog tale valore permette di visualizzare le emoticon su due linee. Ma se avete un modello più stretto il valore deve essere cambiato. Le emoticon volendo si possono visualizzare anche su tre linee, questo per chi ha un modello con i post molto stretti. Se non siete sicuri cominciate con 100% per poi diminuire fino ad arrivare alla percentuale giusta. Questo va fatto naturalmente in un secondo momento.
Andate proprio alla fine del modello dove troverete la tag </body> e, subito sopra, inserite il seguente codice

<script src='http://www.mdn.fm/files/112492_zgc4b/smiley2.js' type='text/javascript'/> 
<noscript><a href='http://www.ideepercomputeredinternet.com' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>

come mostrato in quest’altro screenshot

image

Non resta che Salvare il Modello. Quando nei commenti saranno presenti delle combinazioni di segni ortografici che sono sulla destra di ogni singola emoticon in fase di visualizzazione dei commenti saranno sostituiti con le faccine di Yahoo. Bisogna attendere che si carichi completamente la pagina prima di vedere la metamorfosi
image

Il commento :)):|:) dopo essere stato pubblicato diventa così

image

Ultime considerazioni  

1) Mi sono accorto solo a lavoro ultimato che una delle emoticon ha nella combinazione di segni anche la tilde ~. Se me ne fossi accorto prima magari la sostituivo con un segno di più facile accessibilità. Di rimettere mano al codice e allo script per una cosa di questo genere non me la sento. Coloro che volessero utilizzare l’emoticon con quel segno per digitare la tilde sul modulo dei commenti di Blogger devono inserire 126 col tastierino numerico tenendo premuto Alt.

2) Lo script è retroattivo, nel senso che se in qualche commento del passato è presente una combinazione uguale a quelle previste allora apparirà l’emoticon anche nel relativo commento.

3) Una modesta considerazione linguistica. In italiano credo che si debba scrivere sempre e comunque emoticon e smiley (e non emoticons e smilies) anche al plurale. Non mi va però di correggere la prima riga del post .
4) Se si usa come commenti la pagina popup oppure la pagina intera allora seguite le indicazioni dell'articolo su come inserire le animoticon.


Fonte | Bloggerstop -

Aggiornamento importante: a seguito di commenti in cui mi si faceva notare che lo script non funzionava, ho caricato tutto su un altro hosting, consultate quindi quest'altro articolo.
Aggiornamento n°2: Nei modelli con commenti nidificati è opportuno seguire il tutorial per le faccine di Facebook  o quello per le emoticon animate di Facemoods.


35 commenti:

  1. Ciao Parsifal
    grazie per la tua guida è stato facile inserire le emoticon nel mio blog

    RispondiElimina
  2. @paoma
    felice di esserti stato di aiuto :-)

    RispondiElimina
  3. ciao, se volessi personalizzare le immagini utilizzandone altre.. dovrei caricare le immagini su un sito hosting, sostituire il link tra le stringhe che usiamo con queste.. inserire una combinazione di tasti..
    ma non capisco l'ultima parte del procedimento..andrebbe modificato qualcosa dell'ultimo passaggio?

    RispondiElimina
  4. @Stregatto
    I file di tipo Javascript e HTML essenziali sono due
    Primo file
    Secondo file
    Il primo file è quello essenziale che comanda la sostituzione di una combinazione di segni con una emoticon. Se tu guardi accanto a "replace" si sono dei segni ortografici che vengono rimpiazzati con un'emoticon di cui viene inserito l'indirizzo. Ogni elemento è presente tre volte, guarda per esempio l'indirizzo dell'immagine che finisce con 21.gif. Per inserirne altre devi caricare l'emoticon su un hosting e copiare la sintassi delle righe già presenti aggiungendone altre tre per ogni emoticon.
    Il secondo file non è altro che quello che si vede sopra il modulo dei commenti cioè le emoticon a disposizione e i relativi simboli. Quindi nel caso di aggiunta di un'altra emoticon anche lì devi aggiungere il relativo indirizzo copiando la sintassi delle altre. In questo caso è più semplice perché c'è una sola riga per emoticon.
    Questi due file hanno i seguenti indirizzi accorciati
    http://is.gd/1CA3L
    http://tinyurl.com/mt9t4v
    Il primo, dopo averlo modificato lo inserisci sotto il codice del modulo dei commenti come detto nel post ed il secondo lo sostituisci nel codice da inserire sopra il tag "/body".
    Ciao

    RispondiElimina
  5. ho seguito le istruzioni
    compaiono gli smile tutti insieme ma poi non vengono tradotti nel commento
    insomma rimane solamente il due punti più la parentesi... :)

    cosa ho sbagliato?

    grazie

    Vale

    RispondiElimina
  6. @tork
    Se hai seguito tutte le istruzioni del post e non funziona può essere che l'articolo abbia avuto un così grande successo da superare la larghezza di banda.
    Ho caricato quindi il javascript da un'altra parte Prova a inserire l'URL
    http://sites.google.com/site/ideepercomputeredinternet/script-1/smiley2.js
    al posto di quello
    http://tiny... ecc
    Comunque ho cambiato il codice dell'articolo.
    Fammi saper se in questo caso funziona.
    Ciao

    RispondiElimina
  7. Niente questo l'ho provato ma non mi funziona :(

    RispondiElimina
  8. @darkoide
    Ho caricato lo script da un'altra parte. Prova a vedere se adesso funziona

    RispondiElimina
  9. nada de nada non mi appare proprio nulla...forse dipende dal template

    RispondiElimina
  10. Ahem... (non fate caso all'immagine nel riquadro).
    Problema: la procedura va a buon fine, il riguadro risulta, ma non compaiono nei commenti le emoticons, ma solamente la stringa di simboli utilizzata per crearle: innanzitutto, chiedo se sia retroattiva questa modifica (mi spiego: avevo già utilizzato questo modello di inserimento, ma mi risultava lo stesso problema e non l'ho mai corretto); in caso negativo, cosa posso aver sbagliato? Grazie mille.

    RispondiElimina
  11. @camilla
    Il sistema è retroattivo però ha degli inconvenienti
    1)Non funziona con tutti i modelli
    2)Non si vedono le emoticon con Internet Explorer

    RispondiElimina
  12. ciao...ho riscontrato lo stesso problema di Camilla, ho letto la tua risposta, ma io uso firefox dunque credo si tratti del modello a questo punto...percaso sapresti indicarmi un modello in cui la modifica funziona? grazie

    RispondiElimina
  13. @unangoloinblu
    Blogger cerca di limitare le personalizzazioni al di fuori dei suoi modelli e del suo Designer Modelli. Comunque se vai in Design > Modifica HTML, in basso dovrebbe esserci un link che rimanda ai modelli introdotti nel 2006; uno dei quei modelli è quello che uso anche io. Comunque stai attenta e prima di fare modifiche salva il modello completo

    RispondiElimina
  14. Ok... vediamo un po' cosa riesco a combinare...grazie! :)

    RispondiElimina
  15. mi spiace annoiarti con le mie continue rischieste, ma se ti è possibile rispondermi potresti dirmi quale modello hai adoperato per il tuo blog? ho provato con i modelli 2006 senza nessun successo, anzi in molti casi non riuscivo neanche a trovare le frasi da te indicate per poi inserire le variazioni...ti ringrazio sin da adesso...ciao

    RispondiElimina
  16. @unangoloinblu
    Il modello è quello Trekka modificato da http://www.glish.com
    Comunque non so quanto ti può essere di aiuto perché anche in questi vecchi modelli Blogger tende a impedire le personalizzazioni e alcune non sono più possibili. Per esempio su questo blog avevo il calendario cn archivio che ho dovuto togliere perché non funzionava più. Non so se rimettessi le faccine queste funzionerebbero di nuovo...

    RispondiElimina
  17. in effetti non so se è ancora disponibile...cmq sono riuscita ad inserire le faccine nei post grazie adoperando delle istruzioni trovate in un altro blog il problema però riguarda solo le faccine animate, infatti in precedenza avevo quelle statiche e funzionavano sia nei post che nei commenti, ma non mi piacevano tanto...peccato non riuscire! ti ringrazio tanto per la tua pazienza e la tua collaborazione, ciao alla prossima! :)

    RispondiElimina
  18. ciao1 io invece ho un problema diverso: nel mio template non è prevista la stringa . l'ho cercata col F3 ma non la trova. C'è un'altra soluzione per me? Grazie!

    RispondiElimina
  19. @Mamma C
    Invece di cercare quella riga prova con quella precedente cioè con
    class='comment'footer' come si vede anche dallo screenshot, o quella successiva
    name='comment-form'

    RispondiElimina
  20. ho un problema...il riquadro delle emoticon mi appare a fine blog, e non sopra il riquadro del modulo commento...come mai? Grazie

    RispondiElimina
  21. @Mario Alan
    Non lo so prova a inserirlo poco sopra finché non trovi la giusta posizione

    RispondiElimina
  22. @Mario Alan
    Prova a inserirlo sopra a questa riga
    <b:if cond='data:post.embedCommentForm'>

    RispondiElimina
  23. risolto!
    lo mettevo sotto la riga che dici tu però in quella sbagliata (ce ne sono 2...)..Grazie!

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

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

    RispondiElimina
  26. nel caso io volessi aggiungere altre emoticon tra queste
    http://messenger.yahoo.com/features/emoticons
    come posso fare?...esiste uno script che le contenga tutte?

    RispondiElimina
  27. non avevo letto i commenti precedenti...ti hanno già fatto la stessa domanda...grazie!

    RispondiElimina
  28. @Mario Alan
    Le inserisci con la stessa sintassi in questo codice
    http://www.mdn.fm/files/112493_wsvtf/codice%20emoticon.txt
    e in quest'altro
    http://www.mdn.fm/files/112492_zgc4b/smiley2.js

    RispondiElimina
  29. salve ernesto..risulta anche a te non funzionare lo script delle emoticons?

    RispondiElimina
  30. @Mario Alan
    Questo tutorial ha più di due anni. Alla fine del post c'è un link a un articolo più recente in cui è postato un codice che funziona (vedi le demo del post linkato)

    RispondiElimina

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