Pubblicato il 10/04/12e aggiornato il

Come inserire emoticon nei commenti di Blogger se sono state attivate le risposte o commenti nidificati.

Come inserire le emoticon nei commenti e nelle risposte di Blogger.
Mi sono occupato a più riprese di come inserire le emoticon nei commenti di Blogger. Ho illustrato tra l'altro un metodo per visualizzare le emoticon animate e un altro per le emoticon di Facebook.

Recentemente Blogger ha introdotto i commenti nidificati con delle classi di stile completamente diverse dalle precedenti. In alcuni modelli personalizzati queste modifiche non hanno cambiato il codice e in quel caso si possono seguire i tutorial precedenti per visualizzare le emoticon nei commenti. In altri modelli sono invece comparsi i pulsanti Rispondi e Elimina e, da un giorno all'altro, hanno smesso di funzionare tutte le personalizzazioni che erano state introdotte in quella zona del template.

E' il caso per esempio dei numeri posti al lato di ciascun commento, personalizzazione che per fortuna possiamo introdurre nuovamente mediante il tutorial per la numerazione dei commenti. 

Vediamo come introdurre nuovamente anche le emoticon, sia nei commenti unici sia nelle risposte o discussioni che dir si voglia. Si tratta delle emoticon classiche, quelle che vengono introdotte nei forum o su Facebook mediante delle scorciatoie da tastiera comuni a tutti i servizi.

emoticon-commenti-blogger
Qui di seguito posto la tabella delle corrispondenze


Significato Aspetto Scorciatoie
sorriso sorriso :) :-) :] :-]
pianto pianto :'-(  :((  :'( 
triste triste :( :[ :-( :-[
lingua lingua :P :-P
riso riso :D :-D xD
oops oops :$ :-$ 
ammiccamento ammiccamento ;) ;-) ;] ;-]
neutro neutro :-I  :| :-|
segreto segreto :-X 
sorpresa sorpresa :O :-O
arrabbiato arrabbiato |O  |-O  ¬¬
confuso confuso :S :-/

Come vedete per alcune emoticon ci sono più combinazioni di caratteri con cui si possono inserire. Prima di iniziare ogni modifica occorre salvare il template per un eventuale ripristino. Andate quindi in Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate la riga

<data:post.commentHtml/>

e, immediatamente sotto, incollate questo codice

<script type='text/javascript'>
//<![CDATA[
var emovar = 0;
function emocomm(el) {
    var elem = typeof el === "string" ? document.getElementById(el) : el,
    testo = elem.innerHTML,
    // :) :-) :] :-]                // :'-(  :((  :'(       // :( :[ :-( :-[      // :P :-P   // :D :-D xD  // :$ :-$ // ;) ;-) ;] ;-]        // :-I  :| :-|    // :-X // :O :-O // |O  |-O  ¬¬  // :S :-/
    regs = [":\\)|:-\\)|:\\]|:-\\]",":'-\\(|:\\(\\(|:'\\(",":\\(|:\\[|:-\\(|:-\\[",":P|:-P",":D|:-D|xD",":\\$|:-\\$",";\\)|;-\\)|;\\]|;-\\]",":-I|:\\||:-\\|",":-X",":O|:-O","\\|o|\\|-o|¬¬",":S|:-\\/"],
    classe = "sorriso pianto triste lingua riso oops ammiccamento neutro segreto sorpresa arrabbiato confuso".split(" "),
    i = 0,
    reg
    for(; regs[i]; i++){
        reg = new RegExp("("+regs[i]+")(\\s|$)", "gi")
        testo = testo.replace( reg, function(){emovar++;return "<i class='icon "+ classe[i] +"' id='icon"+(emovar).toString()+"'><\/i> "})
    }
    elem.innerHTML = testo
}
function emoannidate(){
    var commenti = document.getElementById('comments-block') || document.getElementById('comment-holder' ) , i = 0;
    commenti = commenti.getElementsByTagName('p')
    for(; commenti[i]; i++){
        emocomm(commenti[i])
    }
}
emoannidate()
//]]>
</script>

Cercate adesso la riga ]]></b:skin> e, subito sopra, incollate quest'altro codice

i.icon{
    width:15px;height:15px;
    background-image:url(https://lh4.googleusercontent.com/-dT7BW56jlFw/T4FOAQbFphI/AAAAAAAAXbA/h1lsSmTdH5A/s180/emoticon-commenti.png);
    background-repeat:no-repeat;
    display: inline-block;
}
i.icon.confuso{ background-position: 0 0;  }
i.icon.lingua{ background-position:-15px 0;  }
i.icon.arrabbiato{ background-position: -30px 0;  }
i.icon.pianto{ background-position: -45px 0;  }
i.icon.ammiccamento{ background-position: -60px 0;  }
i.icon.neutro{ background-position:-75px 0;  }
i.icon.oops{ background-position: -90px 0;  }
i.icon.riso{ background-position: -105px 0;  }
i.icon.segreto{ background-position: -120px 0;  }
i.icon.sorpresa{ background-position: -135px 0;  }
i.icon.sorriso{ background-position: -150px 0;  }
i.icon.triste{ background-position: -165px 0;  }

Opzionalmente si può inserire anche una immagine per mostrare ai commentatori le corrispondenze più comuni tra emoticon e combinazioni di caratteri. Si tratta di visualizzarla subito sotto al footer esclusivamente nei post e ha questo aspetto

emoticon-blogger

Se scegliete di mostrarla, cercate la riga

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


e, subito sotto, incollate quest'ultimo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<center><img src='https://lh4.googleusercontent.com/-rRuNzg3EA9o/T4FW3f7JZXI/AAAAAAAAXbM/a5pWsshSxAc/s549/emoticon-blogger.png'/></center>
</b:if>

in cui, oltre all'immagine, sono presenti anche i due tag condizionali. Finalmente si salva il modello e si possono inserire le emoticon nei commenti di Blogger semplicemente digitando una delle combinazioni di caratteri corrispondenti. Ho anche postato una
in cui potete testare il funzionamento della personalizzazione.




42 commenti :

  1. Anzitutto grazie
    poi volevo segnalarti che a me non funzionano quando fai rispondi a un commento (cioè in quelli nidificati)

    RispondiElimina
    Risposte
    1. @SergioGiorgianni
      Il tuo è un problema comune a molti con modelli personalizzati. Prova con questo
      http://www.ideepercomputeredinternet.com/2012/01/come-attivare-le-risposte-nidificate-ai.html

      Elimina
  2. Domanda Off Topic: è possibile con la piattaforma Blogger scrivere articoli costituiti da due o più pagine?

    RispondiElimina
    Risposte
    1. @Francesco
      Non mi risulta, c'era però uno script da qualche parte che mostrava i post incolonnati come nei quotidiani

      Elimina
  3. Grazie ottimo ma io ho sempre paura di mettere mani nel template prendo nota e ci devo pensare :-))
    Ciaoooo

    RispondiElimina
  4. miticoooooooooooooooooo
    anche le emoticon vanno!! :)

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

    RispondiElimina
  6. Ciao Ernesto c'è un modo per far funzionare le emoticon oltre che nei commenti anche nel testo del post?
    Ciao Giuliana

    RispondiElimina
    Risposte
    1. @LaCucinaImperfetta
      Ci sono almeno due modi per inserire le emoticon anche nei post. Il primo è quello di inserirle tramite codice ma ora non trovo il post, e l'altro, più semplice, è quello di usare Windows Live Writer
      http://www.ideepercomputeredinternet.com/2011/01/windows-live-mail-2011-e-il-miglior.html

      Elimina
  7. non le trova tutte le stringhe....mi sa o non'è piu compatibile o non va con tutti i template....

    eccoti un ottima idea per un post...come inserirle in commenti e messaggi...sarebbe grande!!!

    RispondiElimina
    Risposte
    1. @IvanDeFelice
      Funziona con i modelli nuovi. Se hai un modello vecchio puoi provare con questi altri tool
      http://www.ideepercomputeredinternet.com/2011/07/come-inserire-le-emoticon-di-facebook.html
      http://www.ideepercomputeredinternet.com/2011/06/come-inserire-emoticon-animate-nei.html

      Elimina
    2. Grazie! Finalmente sono riuscita a inserire le emoticon nel blog!!

      Elimina
  8. So inserirle però esteticamente si vede male perché hanno uno sfondo bianco e non render. Essendo scarso in photoshop volevo optare per la modifica del colore di quella parte dove devo reintegrare questo codice delle emoction, che io attualmente l'ho di colore grigio e la vorrei far diventare trasparente o bianca. Come dovrei fare?

    RispondiElimina
    Risposte
    1. @AndreaSapuppo
      Si tratta di un lavoro grafico non da poco. In realtà c'è una sola immagine, questa
      https://lh4.googleusercontent.com/-dT7BW56jlFw/T4FOAQbFphI/AAAAAAAAXbA/h1lsSmTdH5A/s180/emoticon-commenti.png
      in cui le emoticon sono state messe una accanto all'altra su sfondo bianco. Poi vedi quella inserita per il diverso valore della posizione orizzontale del background. Bisognerebbe creare una fila di emoticon uguali ma su sfondo trasparente. Io le ho create tramite screenshot. Il fatto è che non ci sono quelle ufficiali da scaricare o se ci sono non le ho trovate.

      Elimina
    2. Ma io volevo modificare il colore non dell'immagina ma del footer dove appaiono etichette, autore del blog, e orario. Ad esempio da te è azzurro e se volessi farlo bianco coi CSS si può?

      Elimina
    3. @AndreaSapuppo
      Leggi qui
      http://www.ideepercomputeredinternet.com/2012/03/come-modificare-gli-elementi-del-footer.html
      e qui
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html
      Per modificare il background usa questa riga
      background-color:#******;

      Elimina
    4. Perfetto si il firebug ho avuto modo di apprezzarlo con gli spostamente dei widget. Non mi ricordavo che si doveva scrive blackground. Risolto Grazie. :D

      Elimina
    5. Un altra cosa: Come faccio a capire se ho un modello vecchio o nuovo?
      Siccome non mi funziona questa emoction ;) e forse qualcun altra volevo capire se provassi a usare quelli degli altri tuoi link se ci fossero speranza che mi funzionino senza problemi.
      Sarebbe perfetto le emoction a bottoni, nel senso che appena clicchi sul emoction appare il simbolo nei commenti :P

      Elimina
    6. @AndreaSapuppo
      Nel post di demo
      http://shadowboxeffect.blogspot.it/2012/04/dimostrazione-dellinserimento-delle.html
      funziona. Le emoticon le ho provate tutte. Penso che tu abbia sbagliato a ricopiare il codice. Per trovare il nome del modello clicca su Ctrl+U e scorri il codice fino a che non trovi il nome dell'autore.

      Elimina
  9. funzionano ma non tutte, inserendo alcune scorciatoie le emoticon non compaiono, con altre scorciatoie sì. perché?

    RispondiElimina
    Risposte
    1. @ littlefive
      Nel post di demo
      http://shadowboxeffect.blogspot.it/2012/04/dimostrazione-dellinserimento-delle.html
      ho provato con tutte e mi pare che abbiano funzionato. Se una combinazione non funziona forse è perché è stata digitata insieme a altro testo. Si dovrebbe digitare la emoticon dopo uno spazio e farla seguire da un altro spazio

      Elimina
  10. Ciao,
    ho un problema che non riesco a risolvere..e forse non ci riuscirò mai!
    Tempo fa ho inserito le emoticon al blog...non ricordo ne come nè dove le ho prese..poi causa rallentamento al blog ho tentato di eliminarle..in parte l'operazione è servita e in parte no...le vedo io quando aggiorno un post..e in alcune delle pagine statiche...pensi che ci sia una possibilità di rimediare?
    Ti ringrazio moltissimo
    Cristina

    RispondiElimina
    Risposte
    1. @ Cristina
      Se non sai neppure da che post o da che blog le hai prese è un po' difficile venirne a capo :) Non saprei cosa consigliarti.

      Elimina
    2. ok grazie, cercherò di fare una ricerca e magari ti riscrivo, grazie ancora.

      Elimina
  11. Ciao Ernesto! Intanto grazie per le tue dritte :)

    Volevo chiederti una cosa: c'è un modo per inserire l'immagine che hai creato sopra il form per i commenti?

    Grazie :)

    RispondiElimina
    Risposte
    1. @ Dalila
      Il punto del modello in cui inserire il secondo codice deve essere diverso. Non mi ricordo bene. Prova a metterlo sopra a questo codice
      <dl class='comments-block' id='comments-block'>

      Elimina
    2. Non va, non si vede nulla e in più, inserendolo in quel punto, il form si vede tagliato :(

      Però non stare ad impazzire, non importa! :)

      Elimina
    3. @ Dalila
      Prova a incollare il codice subito sopra questa riga
      <div class='comments-content'>
      Non è però presente in tutti i modelli

      Elimina
  12. Fantastico !!! l'ho provato ed è una figata.
    Complimenti per la tua bravura e professionalità

    RispondiElimina
  13. Grazie!! Funziona benissimo!! Si potrebbe aggiungere tra le faccine qualche cuoricino... le gente ne è molto affezionata, penso che sia il più usato su facebook

    RispondiElimina
    Risposte
    1. @# Certo che si potrebbe fare ma bisognerebbe modificare la immagine di background, magari postami le scorciatoie a tastiera dei cuoricini e senza impegno vedrò cosa posso fare

      Elimina
    2. Su facebook il cuoricino si fa con <3

      Elimina
    3. @# Su Facebook con <3 viene un piccolo cuoricino nero e non una emoticon

      Elimina
  14. Ciao Ernesto ho inserito printfriendly e mi sono sparite le faccine... posso fare qualcosa per rimetterli?

    RispondiElimina
  15. Risolto, sono gia comparse da sole.... ehhh Grazie di tutto!

    RispondiElimina
  16. Grazie infinite! finalmente ho le emoticon nei commenti! :D

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.