Pubblicato il 26/07/11e aggiornato il

Come inserire le emoticon di Facebook nei commenti di Blogger.

Ho già avuto modo di presentare alcuni post che riguardavano la possibilità di inserire le emoticon nei commenti di Blogger. Si trattava di quelle animate di Yahoo. Ricordo gli articoli che ho sviluppato su questo argomento
  1. Come aggiungere animoticon nei commenti -
  2. Come inserire emoticon con l'opzione pagina intera o finestra popup -
  3. Inserire emoticon animate nei commenti di Blogger -
L'ultimo post è il più recente ed è quello a cui si deve fare riferimento se si vogliono inserire le emoticon animate di Yahoo. Come succede praticamente con tutte le personalizzazioni di Blogger, anche questa non riesce a funzionare con tutti i template e con tutti i browser. Con questo articolo voglio presentare una nuova opzione di inserimento di emoticon. Stavolta si tratta degli smiley di Facebook e che quindi non sono animati. L'idea di fondo per questa personalizzazione rimane comunque immutata. Si tratta di creare uno script che rimpiazzi automaticamente delle associazioni di caratteri con delle faccine, quando questi caratteri vengono digitati nei commenti. Se per esempio si digita :( si vedrà questa emoticon emoticon-triste dopo la pubblicazione del commento.
Prima del modulo dei commenti sarà mostrata una immagine con le associazioni di caratteri necessarie per generare le emoticon
emoticon facebook su blogger
La personalizzazione è fattibile sia nel caso si sia optato per il modulo dei commenti incorporato sotto il post piuttosto che si sia invece scelto la finestra popup o la pagina intera. In tutti e due i casi si va su Design > Modifica HTML (vecchia grafica) o su Modello > Modifica modello (nuova Bacheca) e si salva il modello completo per un eventuale backup di ripristino. Si cerca la solita riga </head> e, immediatamente sopra, si incolla il seguente codice
<!-- Facebook Emoticon  Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonCommenti(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambioSegni = bodyText.innerHTML;
cambioSegni = cambioSegni.replace(/:\)/g,'<img src="https://lh5.googleusercontent.com/-QhWaa6Lu7Es/Ti1pMxLU6PI/AAAAAAAAUAw/nOjH66niapc/sorriso.gif" />');
cambioSegni = cambioSegni.replace(/:\(/g,'<img src="https://lh6.googleusercontent.com/-B_viW_1KMmw/Ti1pgNqc_AI/AAAAAAAAUA0/1iMMQA4VLVE/triste.gif" />');
cambioSegni = cambioSegni.replace(/;\)/g,'<img src="https://lh3.googleusercontent.com/-JWk0bj4pZ28/Ti1p_k47-KI/AAAAAAAAUA4/8KZ6x3gI7Lo/occhietto.gif" />');
cambioSegni = cambioSegni.replace(/:\P/g,'<img src="https://lh4.googleusercontent.com/-CopuKUR0p1w/Ti1qS2Vj1KI/AAAAAAAAUA8/4Z5gwzSh7dE/linguaccia.gif" />');
cambioSegni = cambioSegni.replace(/:\p/g,'<img src="https://lh4.googleusercontent.com/-CopuKUR0p1w/Ti1qS2Vj1KI/AAAAAAAAUA8/4Z5gwzSh7dE/linguaccia.gif" />');
cambioSegni = cambioSegni.replace(/:D/g,'<img src="https://lh3.googleusercontent.com/-ZLE_mnlFVuA/Ti1q485GL9I/AAAAAAAAUBE/Dt3gDVE2X6E/32denti.png" />');
cambioSegni = cambioSegni.replace(/:d/g,'<img src="https://lh3.googleusercontent.com/-ZLE_mnlFVuA/Ti1q485GL9I/AAAAAAAAUBE/Dt3gDVE2X6E/32denti.png" />');
cambioSegni = cambioSegni.replace(/XD/g,'<img src="https://lh4.googleusercontent.com/-PHSjIlgePfc/Ti1rhUzZ4DI/AAAAAAAAUBI/NVapFWDTl3Y/occhietti.gif" />');
cambioSegni = cambioSegni.replace(/:S/g,'<img src="https://lh5.googleusercontent.com/-qK0yIKMOgRE/Ti1r8N-fojI/AAAAAAAAUBQ/y6nkq3LTKFg/perplesso.gif" />');
cambioSegni = cambioSegni.replace(/:s/g,'<img src="https://lh5.googleusercontent.com/-qK0yIKMOgRE/Ti1r8N-fojI/AAAAAAAAUBQ/y6nkq3LTKFg/perplesso.gif" />');
cambioSegni = cambioSegni.replace(/X\(/g,'<img src="https://lh5.googleusercontent.com/-2hxf2buwHGU/Ti1sqVkqCjI/AAAAAAAAUBU/a_ylSns_jcg/aggressivo.gif" />');
cambioSegni = cambioSegni.replace(/:'\(/g,'<img src="https://lh5.googleusercontent.com/-t4dk9lN8-QA/Ti1tlLq7VDI/AAAAAAAAUB0/ztsEl19OBwk/pianto.gif" />');
cambioSegni = cambioSegni.replace(/8\)/g,'<img src="https://lh3.googleusercontent.com/-XGNT94mDD6E/Ti1t3JcNYwI/AAAAAAAAUB4/i9R-wyAPs20/occhiali.gif" />');
cambioSegni = cambioSegni.replace(/:\O/g,'<img src="https://lh5.googleusercontent.com/-z9RFk5ERNww/Ti1uZpDp1uI/AAAAAAAAUCA/GCPTVC-nzuA/sorpresa.gif" />');
cambioSegni = cambioSegni.replace(/:\o/g,'<img src="https://lh5.googleusercontent.com/-z9RFk5ERNww/Ti1uZpDp1uI/AAAAAAAAUCA/GCPTVC-nzuA/sorpresa.gif" />');
cambioSegni = cambioSegni.replace(/:\*/g,'<img src="https://lh3.googleusercontent.com/-ZnOKFQXtkrE/Ti1usecAFhI/AAAAAAAAUCE/-9AT5vZKVn0/bacio.gif" />');
cambioSegni = cambioSegni.replace(/:A/g,'<img src="https://lh4.googleusercontent.com/--6ePdTHF0v4/Ti1u85FvHEI/AAAAAAAAUCI/K9v0KgqHric/santo.gif" />');
cambioSegni = cambioSegni.replace(/:a/g,'<img src="https://lh4.googleusercontent.com/--6ePdTHF0v4/Ti1u85FvHEI/AAAAAAAAUCI/K9v0KgqHric/santo.gif" />');
cambioSegni = cambioSegni.replace(/3:/g,'<img src="https://lh6.googleusercontent.com/-VNwDeecVsoY/Ti1vOcqLzoI/AAAAAAAAUCM/62MG9kWZK3w/diavolo.gif" />');
bodyText.innerHTML = cambioSegni;
}
//]]>
</script>
<noscript><a href='http://goo.gl/o7IaP' target='_blank'><span style='font-size: x-small;'>Facebook Emoticon</span></a></noscript>
</b:if>
<!-- Facebook Emoticon Fine - http://www.ideepercomputeredinternet.com -->
Si salva il modello. Si va nuovamente su Modifica HTML, si espandono i modelli widget e si cerca questo blocco di codice
<p><data:comment.body/></p>
che deve essere sostituito con quest'altro
<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonCommenti(emoticon);
</script>
Si salva nuovamente il modello. Adesso dobbiamo inserire una immagine per mostrare ai potenziali commentatori quali siano le corrispondenze tra combinazioni di segni ortografici e emoticon. Nel caso del modulo incorporato sotto il post, dopo aver messo la spunta a espandi modelli widget, si cerca
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
cliccando su F3 o su Ctrl+F. In quasi tutti i modelli ci sono due linee come questa. Subito sotto alla seconda linea si incolla questo HTML
<img border='0' src='https://lh6.googleusercontent.com/-xDhC6NrcZ6I/Ti1lPYLrjHI/AAAAAAAAUAo/dmJyXxXWn5g/emoticonlight.png'/>
Si salva nuovamente il modello. L'immagine ha una larghezza di 410 pixel che è quella tipica del modulo dei commenti e ha uno sfondo bianco. Può naturalmente essere sostituita da un'altra di diversi colori e diverse dimensioni.
Se su Impostazioni > Commenti > Posizionamento del modulo dei commenti abbiamo selezionato finestra popup o pagina intera, l'immagine può essere inserita subito sopra alla riga
 <div class='post-footer-line post-footer-line-3'/>
In questo caso occorre inserire un tag condizionale che ne limiti la sua visione ai soli post e il codice da incollare potrebbe essere
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<img border='0' src='https://lh3.googleusercontent.com/-QGhb42JCiSQ/Ti6GmMT4z7I/AAAAAAAAUCo/heejnzz3jdM/emoticon-popup.png'/>
</b:if>
con una immagine visualizzata alla fine del post come questa
emoticon facebook commenti blogger
Anche in questo caso si può modificare, sceglierne un'altra oppure optare per la precedente che non ha testo esplicativo. Per talune emoticon ci sono doppie opzioni di sostituzione come si vede anche dal codice. Si può per esempio indifferentemente usare :P o :p, :D o :d, :S o :s, :O o :o, :A o :a. Concludo osservando che si possono aggiungere anche altre emoticon inserendo nuove righe con la stessa sintassi ma con diverse associazioni di segni e un diverso URL della emoticon associata che dovrà preventivamente essere caricata su Picasa.




2 commenti :

  1. Salve vorrei sapere come mai l'immagine mi compare sotto il modulo dei commenti. Dove sbaglio?
    Grazie

    RispondiElimina
    Risposte
    1. @ Mamè
      Invece di mettere l'immagine sopra a questa linea
      div class='post-footer-line post-footer-line-3
      mettila sopra quest'altra
      div class='post-footer-line post-footer-line-2
      o quest'altra ancora
      div class='post-footer-line post-footer-line-1
      Se ancora non va bene mettila sopra a questa
      div class='post-footer'

      Elimina

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.