Códigos para insertar y mostrar las imágenes Emoji de Twitter

Recientemente Twitter ha liberado la librería que usa esta red social para mostrar las vistosas imágenes Emoji en los tweets y publicaciones.
Como todos sabemos al insertar cualquier símbolo o carácter especial en un tweet, este es transformado de forma automática en imágenes Emoji muy expresivas y hermosas.
En las publicaciones normales se muestran en un tamaño de 32 pixeles y en las destacadas mucho mayor, a 72 pixeles.
Los iconos o imágenes usados han sido creados en colaboración con IconFactory y ahora están disponibles para su uso por cualquier persona o aplicación web.
En otra página de nuestro sitio se pueden ver todas las imágenes Emoji (más de 800 figuras).
Para los que están interesados en este artículos mostramos de forma sencilla, como hacer para que los símbolos o emoticonos habituales en cualquier página de un sitio web, se transformen en estas imágenes Emoji.

Como insertar las figuras Emoji en las páginas web

Las imágenes originales Emoji están almacenadas en MaxCDN, una poderosa red de contenidos de internet.
Solo es necesario cargar el script JS de este sitio en la página donde se desean mostrar las figuras y un script con la función que transforma los caracteres especiales por las imágenes.
Toda la información avanzada para esta tarea está disponible en Github, en este artículo solo mostramos ejemplos sencillos para nuestros lectores aficionados.

Códigos para sustituir los caracteres especiales por imágenes Emoji

El script para cargar el archivo JS que hace posible escribir las imágenes es el siguiente:
Se puede insertar en el área del HEAD para hacer más rápida la renderizacion o en cualquier otra área.
Se pueden transformar los caracteres especiales por las imágenes Emojis usando dos métodos: "string parsing" o "DOM parsing".
El primero de ellos es el mas sencillo, el código necesario es similar al siguiente:
Entidad es la entidad en formato HTML o Javascript necesaria para escribir el carácter especial.
Por ejemplo para escribir un emoticono de un corazón podemos usar ❤ o \u2764

Ejemplo 1

En este caso insertamos los caracteres dentro de un contenedor DIV de la siguiente forma:
<div> &#128147; &#128148; &#128149; &#128150; &#128151; &#128152; </div>
Se mostrarán de forma predeterminada usando los glifos de la fuente "Segoe UI Emoji" incluida en Windows.
Después de cargar el archivo JS desde MaxCDN serán sustituidos todos por las imágenes Emoji que les corresponden.
Para eso usamos el siguiente script que usa el método de "string parsing"
<script> twemoji.parse(document.getElementsByTagName('div')[17], {size: 72}); </script>
Debemos especificar el número del contenedor DIV, en esta página es el 17.

Ejemplo 2

Otra forma escribir las imágenes Emoji es mediante el método "DOM parsing"
En este caso no se sustituyen, se escriben directamente, solo que es más lento cuando se trata de muchos elementos.
En este ejemplo usamos el siguiente código.
Se usa la entidad Javascript de cada emoticono.
<div id="emoji2"></div> <script> var pa = document.getElementById('emoji2'); pa.textContent = '\ud83c\udf00 \ud83c\udf02 \ud83c\udf08 \ud83c\udf09 \ud83c\udf0a \ud83c\udf0d'; twemoji.parse(pa,{size: 72}); </script>
Imagenes Emoji

Estilo y tamaño de las imágenes Emoji

En todos los casos es necesario incluir en cada página o en la plantilla del sitio el siguiente código de estilo CSS:
Las imágenes Emoji de forma predeterminada se cargan en un tamaño de 32 por 32 pixeles, pero es posible especificar un tamaño mayor usando la propiedad "size", como se puede ver en el primer ejemplo, en el que se especifica 72 pixeles.

La versión V2 de Twitter Emoji

Los códigos que compartimos en esta página se refieren a la versión V1 de Twitter Emoji.
Esta versión usa Unicode 7.0 y soporta 872 diferentes figuras emoji.
Ya está disponible la versión V2 de Twitter Emoji, que se adhiere a Unicode 8.0 y soporta 1661 diferentes figuras emoji.
El servicio de MaxCDN provee el soporte para ambas versiones, pero es diferente el archivo JS para cargar la librería de iconos.
Otras diferencias es que solo hay soporte para el protocolo HTTPS y el tamaño de las imágenes es de 72 pixeles.
El script que debemos usar es el siguiente:
<script src="//twemoji.maxcdn.com/2/twemoji.min.js"></script> Se pueden leer en Github las especificaciones de Twitter Emoji V2