Blogger y los emoticones

Aprovechando que se cumplen 25 años de existencia de los emoticones y que la mayoría de nosotros los usamos diariamente para expresar o enfatizar algo cuando escribimos, se me ocurre que una buena manera de celebrarlo es mostrando un pequeño truco para poder utilizarlos en Blogger.

Existen varios métodos desarrollados, incluso, un par de ellos fueron publicados en este blog hace ya varios meses [1] [2], sin embargo, tanto los comentarios como los mails que he recibido a lo largo de este tiempo, hablaban de problemas serios o, directamente, de no lograr que funcionaran.

En algunos casos se trataba de un truco para las viejas plantillas de Blogger, en otros, se producían interferencias con otros scripts o trucos más o menos difundidos.

Tratando de entender un poco este tema, me decidí por volver sobre la idea del truco original, el que se utilizaba en el viejo Blogger que es el que me parece más sencillo y más fácil de entender. Todo se basa en utilizar una facilidad de JavaScript, poder reemplazar un texto una vez que se ha cargado en la página (una vez que es visible). No importa no saber el lenguaje, basta imaginar que hay una instrucción que lee lo que está escrito y, cuando encuentra ciertos caracteres, los reemplaza por otros o, en este caso, por una imagen.

Ver/Ocultar detalles técnicos: [+]

La instrucción JavaScript se llama replace y esta es su sintaxis:
elemento.replace(textoViejo,textoNuevo)
más específicamente:
elTexto.replace(/XXXX/g,'<img src="URL_imagen" />');
donde usamos "expresiones regulares" para evaluar y comparar.

Una expresión regular tiene esta sintaxis:
/XXXX/
a la que le agregamos un flag para indicar que no tenga en cuenta minúsculas/mayúsculas:
/XXXX/g
ese pattern, puede estar formado por simples caracteres como /abcd/ o por combinaciones de caracteres especiales, por ejemplo, /ab*c/ donde el asterisco indica que entre b y c hay cualquier cosa.

Ya que los textos que vamos a reemplazar están formados por algunos caracteres que tienen un significado especial como ( ) / | \ [ $ ] etc, debemos anteponerles el carácter slash (\) para indicar que el siguiente carácter debe ser tratado literalmente y que no es un símbolo especial. Por ejemplo:

/:D/g	busca	:D	todo es literal
/:\$/g	busca	:$	el carácter $ lo indicamos como \$
/;\)/g	busca	;)	el carácter ) lo indicamos como \)

Para simplificar aún más el proceso, lo he limitado para que sólo funcione en los comentarios que, en Blogger, sólo se muestran cuando abrimos una página individual. De esta manera, el script funciona con bastante velocidad y sólo es ejecutado en las páginas menos pesadas.

En la plantilla de Blogger, vamos a agregar sólo dos cosas. En el encabezado, por ejemplo, antes de la etiqueta </head> vamos a incluir un pequeña definición de estilo que va a alinear la imagen respecto del texto y que cada uno deberá adaptar en función del tipo de fuente que utilice:

<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>

Luego, habiendo marcado la opción expandir elementos, vamos a buscar el lugar donde insertar el script. Podemos ubicarlo en cualquier lugar DESPUES de los comentarios. Dos posibilidades sencillas son, buscar el inicio de la sidebar y colocar el script justo antes de esta:

</b:includable>
</b:widget>
</b:section>
</div>

<!-- aquí pondremos el script -->

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

En este caso, se cargará antes de iniciarse la carga de la sidebar.

O podemos ponerlo justo antes de terminar la plantilla:

<!-- aquí pondremos el script -->

</body>
</html>

En cualquiera de los dos casos, debemos agregar los siguiente:

<b:if cond='data:blog.pageType == "item"'>
<script src='direccion_URL/VEmoticones.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Todo el código está incluido dentro de un bloque b:if que verifica si estamos en una página individual y sólo entonces se carga el script y se ejecuta la función de reemplazo.

El script está funcionando en el blog desde hace ya casi dos semanas sin que parezca haber causado ningún inconveniente. De cualquier manera, me anticipo a una posible pregunta. Tal y como está, sólo funcionará si la plantilla que usamos es una plantilla que utiliza para los elementos internos, los nombres genéricos de Blogger. Es decir, los comentarios se encuentran en un bloque cuyo id tiene el valor comments:

<b:includable id="comments">

Si bien esto es lo común, es posible que en alguna plantilla tenga otro nombre, en ese caso, bastará cambiar la línea correspondiente del script:

bodyText = document.getElementById('comments');

Si bien el script puede usarse así como está ya que todas las imágenes utilizadas están alojadas en ImageShack y asociadas a determinados emoticones, basta editar el archivo para cambiarlas por otras, agregarle variantes o eliminar alguna.

Veamos un ejemplo:

// :$ :-$
cualTexto = cualTexto.replace(/:\$/g,'<img src="oops.gif" />');
cualTexto = cualTexto.replace(/:-\$/g,'<img src="oops.gif" />');

:$ y :-$ son reemplazados por la imagen.

Si eliminamos la línea o le anteponemos dos barras inclinadas (//) esa combinación no tendrá efecto. Si queremos usar otra imagen, la alojamos en algún lado y luego modificamos la dirección URL.

Esta es la lista completa de los emoticones incluidos:

	:)	:-)	:]	:-]
	:'-(	:((	:'(
	:(	:-(	:[	:-[
	:P	:-P
	:D	:-D	xD
	:$	:-$
	;)	;-)	;]	;-]
	:-I	:-|
	:-X
	:o	:-o
	:O	:-O
	|O	|-O
	:/	:-/	:S