¿Tenéis un blog en Blogger y os gustaría tener emoticonos o emoticones para los comentarios? Pues continuad leyendo...
Antes de hacer nada conviene que os busquéis unos emoticonos que os gusten. Aparte del servicio del que yo los tomé,
http://smilies-gifs.com/, no os voy a recomendar ningún sitio en concreto, pues sitios así
los hay a montones y no sabría orientaros. Además, es cuestión de gustos sobre todo...
Una vez elegidos los
monigotes, hay que alojarlos en algún servidor. Tres sitios son recomendables para ello:
- Picasa: al fin y al cabo, es donde Blogger aloja nuestras imágenes.
- ImageShack: buen lugar para alojar cualquier tipo de imágenes.
- SkyDrive: el servicio anexo a MSN y Hotmail. A pesar de los cambios de URL en otros tipos de archivos, parece ser que con las imágenes, de momento, no cambian.
Para BlogConsejo estoy utilizando el último servicio. No obstante, yo recomiendo usar uno de los dos primeros para más seguridad.
Una vez alojados los archivos, tomamos buena nota de sus direcciones, porque las vamos a necesitar muy pronto.
Lo siguiente que necesitamos es un
script para transformar determinadas combinaciones de letras en las imágenes de los emoticonos. Lo tenéis
tras este enlace, en un archivo comprimido.
Descomprimimos y abrimos el archivo con un editor de textos, tipo Bloc de Notas. Localizamos estas lineas y ponemos las direcciones web de nuestras imágenes en sus lugares correspondientes:
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\)/g, ' <img src="URL_IMAGEN_SONRISA" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s;-?\)/g, ' <img src="URL_IMAGEN_GUIÑO" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\$/g, ' <img src="URL_IMAGEN_RUBOR" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\(/g, ' <img src="URL_IMAGEN_TRISTE" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?D/ig, ' <img src="URL_IMAGEN_RISAS" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\sx-?D/ig, ' <img src="URL_IMAGEN_(IGUAL QUE EL ANTERIOR, ES POR SI ALGUIEN USA LA COMBINACIÓN xD)" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\sX-?D/ig, ' <img src="URL_IMAGEN_(IGUAL QUE EL ANTERIOR, ES POR SI ALGUIEN USA LA COMBINACIÓN XD)" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?P/ig, ' <img src="URL_IMAGEN_LENGUA" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?p/ig, ' <img src="URL_IMAGEN_LENGUA(IGUAL QUE EL ANTERIOR, ES POR SI SE USA LA p EN MINÚSCULAS)" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?S/ig, ' <img src="URL_IMAGEN_SUSTO" id="new" /> ');
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\O/g, ' <img src="URL_IMAGEN_OOOooo" id="new" /> ');
Sustituimos todo el texto que está en rojo por sus correspondientes direcciones, con el http:// incluido, y guardamos el archivo.
A continuación, lo subimos a un servidor. Yo lo que hago es cambiar la extensión .js del archivo a .txt y lo subo a Google Sites. No aconsejo, bajo ningún concepto, subir este archivo a SkyDrive, porque aunque recién subido funciona, a las pocas horas te cambian la URL y ya no te va.
Una vez subido, podemos hacer una llamada al script cualquier punto de la plantilla antes de </head>:
<script src='URL_DEL_ARCHIVO' type='text/javascript'/>
O bien, podemos hacer
lo que aconseja JMiur de
Vagabundia, de hacer que se cargue sólo cuando se abre una entrada concreta, aligerando la carga de la página principal. ¿Cómo? Colocando estas líneas de código justo antes de
</body>, o justo antes de la side bar, es decir, antes de una linea que pone
<div id='sidebar-wrapper'> o similar.
Yo lo he puesto
en mi blog antes de
</body> y, aunque ahora los emoticonos son los últimos en cargar, la página entera tarda menos en cargar.
Por último, el script que facilitamos está preconfigurado para funcionar sólo en los comentarios. Si queréis que funcione en más sitios, antes de subirlo deberíais buscar dentro del código del script esta línea:
var d = [], i=0, def = ['comment-body'];
Y entonces, entre los corchetes donde está ['comment-body'] añadir, separado por comas, las clases que queráis poner del blog para que funcionen los emoticonos en ellas. Por ejemplo, si en el ejemplo anterior, queremos que funcione también en las entradas, pondríamos lo resaltado en rojo:
var d = [], i=0, def = ['comment-body','post-body'];
Seguramente se han quedado cosas en el tintero. Si tenéis alguna duda, no dudéis en comentarlas.
Referencias:
Blotecnia: Tecnología y Sociedad -
Emoticonos, smilies en BloggerGeekaholic -
De donde obtuve el script originalVagabundia -
Blogger y los emoticones
