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 dopo la pubblicazione del commento.

• Demo delle emoticon di Facebook nei commenti di Blogger -

Prima del modulo dei commenti sarà mostrata una immagine con le associazioni di caratteri necessarie per generare le emoticon

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

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.