Agregar Emojis en tu sitio o blog


Dato: si odiás a los emojis sos una persona completamente normal, si los amás sos Capitán Intriga

No, tranquilos, no voy a agregar Emojis aquí, es ya mucho peso y haría que la página tarde mucho en cargar, pero el otro día me pregunté si tenía a mano alguna librería que me permitiese hacerlo ¿De dónde los saco?

Para empezar no voy a juzgar demasiado (mentira) a quienes utilizan los emojis, para mi hay tres clases de personas, las que utilizan sólo palabras para expresarse (grandes escritores/redactores), los que utilizan palabras y gestos (yo me siento así) y los mudos que necesitan señas, claro. Pero los Emojis los ubico en un cuarto y nuevo grupo: los que no siendo mudos aun necesitan hacer señas porque no se saben ni una puta palabra :D

Bueno, no todos, si los usamos como los viejos símbolos ASCII que inventábamos, una vez cada tanto, estarías en el segundo grupo, son gestos, pero hay gente que no hace más que utilizar Emojis y encontré que existe forma de incorporarlos en un blog o sitio.



Si en un comentario dejan un emoji se verá como una cosa sin sentido, una cruz negra que no significa nada, este blog no sólo no tiene soporte, no creo que lo tenga nunca, hay cosas más importantes para agregarle/arreglarle :P

Peeero, por suerte hay una forma medio cochina, digo cochina porque requiere un parseo total sobre el texto de la página por parte de javascript, utilizando la librería Twemoji puede detectar cualquier caracter Unicode Emoji y reemplazarlo por una imagen adecuada.

Parsea el DOM, encuentra los tags de símbolos unicode, los reemplaza por uno de imagen, y listo, sale todo como debe

Lo interesante es que permite un parseo de todo el BODY, twemoji.parse(document.body); y listo, el browser se encarga del reemplazo ¿El costo? Bueno, no sólo procesador en el cliente, además carga de imágenes externas.

Aquí una buena noticia, los de MaxCDN entregan los Emojis gratuitamente, si utilizan twemoji.maxcdn.com/twemoji.min.js como librería tienen todas las imagenes allí y no tienen ni que subirla a su propio servidor ni consumir ancho de banda de su propio blog.

Claro, son más llamadas a una IP distinta, eso agrega un extra en tiempo de carga pero al menos es una CDN comprobada y que funciona bien.

La librería Twemoji la encuentran aquí es libre y gratuita (viene de la mano de Twitter) y tiene muchos más ejemplos de modo de uso, una versión simplificada de instrucciones la encontré aquí.

Si quieren entender cómo es la distribución unicode de emojis y cómo los muestra cada medio aquí tienen una genial tabla

Si te gustó esta nota podés...
Invitame un café en cafecito.app


Otros posts que podrían llegar a gustarte...

Comentarios

  • Cattel     04/11/2015 - 13:50:35

    Buenísimo, vas a poder sacar la reedición del libro de fabio.com.ar todo con emojis para las nuevas generaciones (!!).

    Con las 15 caritas de los coments me basta y sobra

  • tucho235     04/11/2015 - 14:14:12 Revisado: 04/11/2015 - 11:16:23

    pensé que lo habías habilitado :S

  • Fabio Baccaglioni     04/11/2015 - 14:28:58

    tucho235 dijo:

    pensé que lo habías habilitado :S


    no, no pienso hacerlo

  • GoFa     04/11/2015 - 14:53:50

    :D:D:DGuiño:|:|Guiño:|Guiño

    A falta de emollis...

  • Mu     04/11/2015 - 14:56:50

    jaja recuerdo hace unos 10 años estas cosas se hacian con str_replace en php, al menos los de mi escuela jajaja

  • Alejandra     04/11/2015 - 15:58:15

    Justo hoy leía que lanzaron un teclado físico emoji. Sumalo al selfie stick. Cada día un pasito más cerca de Idiocracy.

  • Fabio Baccaglioni     04/11/2015 - 17:04:44

    Mu dijo:

    jaja recuerdo hace unos 10 años estas cosas se hacian con str_replace en php, al menos los de mi escuela jajaja


    el problema de hacerlo server-side es que tenés que tener actualizada la librería de emojis (que cambia todo el tiempo), alojarlos vos mismo, y un largo etcétera de problemas que, con esta solución, se los dejás al tarado que gusta de los emojis :D

  • Gustavo V     04/11/2015 - 20:32:47

    no entiendo esta gente que solo sabe escribir con estos emojis...

    sera que son unos VRUTOS IJNORANTEZZZZ????


    creo que si... en lo personal solo te uso el verde: :D:D:D

  • Marco Antonio Scevola     04/11/2015 - 22:57:48

    Los de tu blog yo los conocí en T! (la vieja, previa al medio millón de usuarios). Son lo máximo

  • Galmor     05/11/2015 - 16:51:20

    qué?! acaso mis ascii no valen vieja?!!


    ...funcionará el ? ya lo veré...

  • Galmor     05/11/2015 - 16:51:54

    Galmor dijo:


    ...funcionará el ? ya lo veré...

    Nop

  • Galmor     05/11/2015 - 16:55:13

    Galmor dijo:

    Galmor dijo:

    ...funcionará el ? ya lo veré...

    Nop


    Che Fabio, no da para poner un "previsualizar" (del lado del cliente) en los comentarios? como para tener una idea de qué funciona y qué no antes de mandar fruta y después editar.. o hacer rulos infinitos de auto-citas...

  • Fabio Baccaglioni     05/11/2015 - 18:03:39

    Galmor dijo:

    Galmor dijo:
    Galmor dijo:

    ...funcionará el ? ya lo veré...

    Nop


    Che Fabio, no da para poner un "previsualizar" (del lado del cliente) en los comentarios? como para tener una idea de qué funciona y qué no antes de mandar fruta y después editar.. o hacer rulos infinitos de auto-citas...


    si estás con el usuario registrado, como vos, podés editar el comentario y no, no voy a poner un previsualizador para que lo use el 1% de los comentadores :P tengo qeu arreglar otras cosas antes, jejeje

  • Rekufad     12/11/2015 - 09:58:49

    Fabio Baccaglioni dijo:

    Galmor dijo:
    Galmor dijo:
    Galmor dijo:

    ...funcionará el ? ya lo veré...

    Nop


    Che Fabio, no da para poner un "previsualizar" (del lado del cliente) en los comentarios? como para tener una idea de qué funciona y qué no antes de mandar fruta y después editar.. o hacer rulos infinitos de auto-citas...


    si estás con el usuario registrado, como vos, podés editar el comentario y no, no voy a poner un previsualizador para que lo use el 1% de los comentadores :P tengo qeu arreglar otras cosas antes, jejeje

    emezeta.com permite previsualizar comentarios, ¿tanto te cuesta preguntarle al chabon si te puede decir de donde lo saco (o si lo hizo el)?

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https

Negrita Cursiva Imagen Enlace


Comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador. Los comentarios son filtrados por ReCaptcha V3.