Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

14 jun 2009

Emoticonos para los comentarios

¿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:
  1. Picasa: al fin y al cabo, es donde Blogger aloja nuestras imágenes.
  2. ImageShack: buen lugar para alojar cualquier tipo de imágenes.
  3. 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 Blogger

Geekaholic - De donde obtuve el script original

Vagabundia - Blogger y los emoticones

4 comentarios:

  1. Ejemplo práctico de lo expuesto más arriba :) ;) :S

    ResponderEliminar
  2. Cuánto tiempo hace que te pregunté por eso y aún no le he metido mano... aiss...

    Una cosita José, lo último que dices, para que funcione también en las entradas, es dependiente de la plantilla. Aunque en la gran mayoría de las plantillas será, efectivamente, "post-body", a buen seguro no lo será en todas. Mismamente en la mía sería "main".

    Saludos!

    ResponderEliminar
  3. Efectivamente, sería cuestión de mirar en la propia plantilla cómo están nombradas las partes, erMoya.

    Esa información se obtiene en la hoja de estilos de la plantilla. Si es una estándard de blogger saldrá más o menos como he puesto, pero si es una plantilla completamente creada de cero, como es tu caso, habría que saber antes cómo se llama cada parte.

    Muy buena esa observación ;)

    ResponderEliminar
  4. Genial :)

    A ver si encuentro algunos emos pequeñitos que vayan bien con el diseño del blog, y vuelvo a colocarlos, aunque sea... en los comentarios. Le da más alegría al blog ;)

    Buen consejo el de subir los script a google.sites cambiando la extensión. Yo ahora también hago lo mismo.

    ResponderEliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.