Agregar Emojis en tu sitio o blog

Escrito el , visto 9442 veces Ver usuariopor


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


Comentarios

  1. 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

    Citar »
  2. pensé que lo habías habilitado :S

    Comentario editado el 04/11/2015 - 11:16:23

    Citar »
  3. tucho235 dijo:
    pensé que lo habías habilitado :S

    no, no pienso hacerlo

    Citar »
  4. :D:D:DGuiño:|:|Guiño:|Guiño

    A falta de emollis...

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

    Citar »
  6. 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.

    Citar »
  7. 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

    Citar »
  8. 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

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

    Citar »
  10. qué?! acaso mis ascii no valen vieja?!!
    [size=15]✌[/size]

    ...funcionará el [ / size ] ? ya lo veré...

    Citar »
  11. Galmor dijo:

    ...funcionará el [ / size ] ? ya lo veré...

    Nop

    Citar »
  12. Galmor dijo:
    Galmor dijo:

    ...funcionará el [ / size ] ? 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...

    Citar »
  13. Galmor dijo:
    Galmor dijo:
    Galmor dijo:

    ...funcionará el [ / size ] ? 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

    Citar »
  14. Fabio Baccaglioni dijo:
    Galmor dijo:
    Galmor dijo:
    Galmor dijo:

    ...funcionará el [ / size ] ? 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)?

    Citar »

Deje su comentario:

(comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador sin previo aviso)

Security Image

Negrita Cursiva Imagen Enlace

Guardar los datos: Si / No