Widget EmojiSup

¿Quiere una barra de emojis como esta en su sitio?

El widget de reacciones es gratuito y se instala en un minuto. Sin registro, sin cuenta, sin nada que configurar de nuestro lado.

Instalación

En la sección HEAD de su sitio, añada:

<script src="https://api.emojisup.org/widget.js?4"></script>

En la sección BODY, donde quiera que aparezca la barra, añada:

<div data-emojisup></div>

Con eso la instalación termina. Al cargarse, el script añade su hoja de estilos, recorre la página en busca de elementos con el atributo data-emojisup y dibuja una barra de reacciones en cada uno.

Identificadores de los widgets

El identificador de cada widget se forma a partir de la dirección de la página, así que una misma página admite varios widgets y cada página conserva sus propios contadores. Los parámetros de campaña como utm_source o fbclid no se tienen en cuenta, de modo que quien llega desde un anuncio ve los mismos contadores que el resto.

También puede fijar usted el identificador:

<div data-emojisup id="my-article-42"></div>

Si el identificador cambia, el widget empieza de cero y los contadores vuelven a cero.

Opciones

Cada opción es un atributo del mismo elemento y todas pueden omitirse.

data-emojisup-set — muestra solo las reacciones que enumere, separadas por comas:

<div data-emojisup data-emojisup-set="👍,❤️,🔥,🤣"></div>

data-emojisup-theme — elige los colores: light por defecto, dark para fondos oscuros, auto para seguir la preferencia del sistema del visitante.

data-emojisup-size — fija el tamaño: s, m por defecto o l.

data-emojisup-align — alinea la fila: left, center o right. Sin este atributo las reacciones se reparten por todo el ancho del bloque.

<div data-emojisup data-emojisup-theme="dark" data-emojisup-size="l" data-emojisup-align="center"></div>

Y este es el mismo widget con tema oscuro, cuatro reacciones y centrado:

Contenido que llega después

Si el widget está dentro de contenido que se carga más tarde, llame a esto cuando el contenido ya esté en su sitio:

<script>
    emojiSup.update();
</script>

Vuelve a recorrer la página y arranca los widgets nuevos. Para que un widget deje de actualizar sus contadores, llame a emojiSup.destroy().

Qué guarda el widget

El widget crea una sola cookie, ev_user_id, con un año de validez. Contiene un identificador aleatorio y nada más: sirve para que el widget recuerde qué reacción eligió este visitante y la elección sobreviva a una recarga. En cada petición el widget envía la dirección de la página donde está la barra, que es como se separan los contadores por página. Ni nombres, ni correos, ni datos de formularios.

Los contadores se actualizan mientras la pestaña está abierta y a la vista. En una pestaña de fondo el widget deja de consultar al servidor, y tras un par de minutos sin clics baja el ritmo por su cuenta.

Preguntas

¿De verdad es gratis? Sí, y no hay ninguna cuenta que crear.

¿Cuántos widgets caben en una página? Los que necesite. Dele a cada uno su propio id.

¿Puede el visitante cambiar su reacción? Sí. Cuenta una reacción por visitante y widget: pulsar otra mueve el voto, pulsar la misma lo retira.

¿Sobreviven los contadores a un rediseño? Sí, mientras no cambie la dirección de la página o el id que usted haya fijado.

¿Hace falta jQuery? No. El script no tiene dependencias y pesa unos 45 KB.