Usar emojis
en tu sitio web

La imágen que aprecias sobre este texto es una muestra, cargada sobre un HTML, de los 874 emojis disponibles en una de las herramientas más usadas para trabajar con estos peculiares personajes que hoy en día forman una parte de nuestro diario convivir y socializar.

874 son pocos

Anteriormente dije, una de las herramientas. Lo cierto es que muchas empresas y organizaciones se pusieron manos a la obra en cuanto vieron que estos personajes cobraron gran relevancia y su demanda fue en aumento, por lo que existen variantes de casi todos los 2623 emojis, aunque incluyendo los novedosos cambios de tono y variantes de género esta herramienta suma un total de 2661 emojis soportados de manera oficial. 🤩

Entre la lista de variantes se encuentras los sets de emojis de Apple, Google (aunque para hacer uso de los más recientes emojis se requiere Android O, la aún por estrenarse oficialmente actualización del sistema operativo del gigante G), Twitter, EmojiOne, Facebook (que tiene a la vez variantes para su Messenger diferentes de los de la página principal), Samsung, Microsoft, entre algunos más usados específicamente en aplicaciones de correo electrónico pero que usan versiones más antiguas de los que conocemos hoy en día.

Además de la gran lista de emojis que se pueden usar en cada set, algunos incluso te permiten seleccionar variantes de tono de un mismo emoji. Puedes, por ejemplo, decirle a tu amigo:
"No me lo vas a creer, estaba feliz en la playa 🏊🏼, pero olvidé ponerme bloqueador solar y 👩🏿 😱"
Así como sus respectivas variantes de género:
"Tuve que ir con el doctor 👨🏽‍⚕️ y me mandó con una dermatóloga muy amable 👩🏼‍⚕️"

Como puedes ver las opciones son muchas; un mismo emoji puede representarse en el género opuesto, y en ambos géneros el mismo emoji puede representarse usando diferentes tonos. Eso sí, como son variantes que representan personas, sólo está permitido usarlos para emojis de personas o en su defecto partes de personas como el brofist (👊🏻 👊🏽 👊🏿). La herramienta que se usa en este sitio web no es otra sino Twem❤ji, el set de emojis de Twitter que hizo open source el 6 de noviembre del 2014.

Pequeña introducción la tuya

Ya se, ya se. Si ya estás convencido de querer usarlos, a continuación tienes los pasos y algunos detalles para implementar la herramienta que aquí se usa y que recomiendo, o si prefieres la versión super corta está aquí ⬅.

Paso 1.- Decidir si lo implementarás de manera manual o automática

Quizá suene absurdo o quizá no tenga sentido para ti esto pero ciertamente existen personas que prefieren tomar el código y pasarlo a un archivo local para ser usado mediante un src="". La ventaja es que pueden revisar cada parte del código y, si consideran necesario, hacer sus propias adaptaciones, cambios o mejoras. La desventaja es que tienen que estar siempre al pendiente de nuevas versiones o tienen que desarrollarlas ellos mismos, de otra forma usarán versiones que quizá se queden antiguas y no se darían cuenta.
Si eres de ellos tendrás que abrir el archivo con el código , seleccionarlo todo (Ctrl + A, CMD + A), copiarlo y pegarlo en un archivo en tu editor de código de tu elección.
A continuación deberás guardar ese archivo en un lugar accesible y en tu HTML tendrás que hacer el enlace a tu archivo ".js":
<script src="[ruta local de la ubicación del archivo]/[nombre de tu archivo].js"></script>
Te brincas el paso 2 y continúas con el paso 3 en adelante.
O si prefieres usar el modo automático ignora lo mencionado en el paso 1 y continua al siguiente paso.

Paso 2.- Copiar el link del CDN

Existen CDNs (Content Delivery Network) que facilitan el uso y distribución de contenido a través de la red. La ventaja es que las actualizaciones se registran de manera automática, si el creador del contenido realiza alguna modificación, el contenido se cambia en todos los sitios en donde se haga uso del mismo. La desventaja es que no se permite realizarle modificaciones por parte de terceras personas.
El link del CDN que contiene el archivo javascript es:
<script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.3.0"></script>
Coloca esa línea de código en cualquier parte dentro de tu etiqueta <head>. Ahora, a menos que tengas bien diseñada tu página y el servicio de hosting te ofrezca la posibilidad de SSL y HTTPS, y entiendas por qué el link empieza con "//twemoji.maxcdn.com", te sugiero que hagas lo que yo y completes el link con "https:" para terminar con
<script src="https://twemoji.maxcdn.com/2/twemoji.min.js?2.3.0"></script>

Paso 3.- Asegurarse que se muestren correctamente

Según los tips en el github de twemoji para que funcione correctamente el código, debes asegurarte que el set de caracteres que usa tu HTML sea UTF-8. Esto se logra añadiendo o modificando una etiqueta <meta> con el set unicode:
<meta charset="utf-8">
De nuevo, esta etiqueta debe ir dentro de tu etiqueta <head>

Otra cosa importante es que le indiques explícitamente a tu HTML que cada parte de unicode que representa un emoji, sea convertido mediante el javascript a una imágen en formato svg que contiene la forma que conocemos y podemos interpretar (en lugar de, digamos, ver "\\U6259\\EMOJI166" veríamos 🐷). Esto se logra añadiendo:
<script type="text/javascript"> twemoji.parse(document.body); </script>
En cualquier parte dentro de tu etiqueta <body>
Ahora que si quieres y lo prefieres puedes evitar que ciertos caracteres se conviertan, más que nada para evitar el cambio de diseño y de tamaño como lo son el © o el ™. Esto se consigue cambiando un poco el código y dejarlo así:
<script type="text/javascript"> twemoji.parse(document.body, { callback: function(icon, options, variant) { switch ( icon ) { case 'a9': // © copyright case 'ae': // ® registered trademark case '2122': // ™ trademark return false; } return ''.concat(options.base, options.size, '/', icon, options.ext); } }); </script>

Paso 4.- Visitar un sitio de referencia

A menos que de antemano te hayas memorizado todos los códigos o tengas dónde obtener los unicodes, lo mejor sería que visitaras la página de muestra de los 2661 emojis de Twemoji para tomar el que pienses usar.
Sólo visita https://twitter.github.io/twemoji/2/test/preview.html para la vista previa de los emojis de la versión 2 de Twemoji que incluye los nuevos sets de la versión Unicode 10 donde se añadieron emojis para formar la más reciente versión de Emoji 5.0
Tan sólo visita ese enlace, selecciona uno de los emojis, y copialo. Lo pegas en donde quieras en tu HTML dentro de tu etiqueta <body>, no importa que salga sólo un rectángulo, una vez procesado el archivo tu ícono se transforma automáticamente. Siempre y cuando tengas acceso al archivo javascript, lo que casi siempre significa que tengas conexión a internet para acceder al link del CDN.

Eso sería todo. Ya deberías estar disfrutando de los emojis tanto los clásicos 😉, como los nuevos 🤙 🦋 🥂. Espero que te haya ayudado pero si tienes más dudas o sugerencias no te detengas y házmelo saber en mis redes sociales. El conocimiento no debe limitarse, sino expandirse 🧠.

Pasos versión 'al grano':

1.- Copia y pega en tu<head>tag:
https://twemoji.maxcdn.com/2/twemoji.min.js?2.3
2.- Copia y pega en tu<body>tag:
<script type="text/javascript"> twemoji.parse(document.body); </script> 3.- Copia y pega en tu<body>tag cualquier emoji (solo lo seleccionas, la página tiene un poco de código para que te salga un cuadro donde puedas copiar el emoji) de:
https://twitter.github.io/twemoji/2/test/preview.html
4.- Listo. Me das las gracias después.

No olvides visitar la sección Tips de la fuente de Twemoji. Siempre es bueno revisarla para entender por qué algunas cosas pueden salir mal. Como el © convertido a emoji teniendo un tamaño enorme. En fin.
Espero que te haya ayudado pero si tienes más dudas o sugerencias no te detengas y házmelo saber en mis redes sociales. El conocimiento no debe limitarse, sino expandirse 🧠.