EmojiSup Widget

Quer uma barra de emojis como esta no seu site?

O widget de reações é gratuito e instala-se num minuto. Sem registo, sem conta, sem nada para configurar do nosso lado.

Instalação

Na secção HEAD do seu site, acrescente:

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

Na secção BODY, no ponto onde a barra deve aparecer, acrescente:

<div data-emojisup></div>

A instalação acaba aqui. Depois de carregado, o script liga a sua folha de estilos, percorre a página à procura de elementos com o atributo data-emojisup e desenha uma barra de reações em cada um deles.

Identificadores dos widgets

O identificador de cada widget é formado a partir do endereço da página, por isso a mesma página pode ter vários e cada página guarda os seus próprios contadores. Parâmetros de campanha como utm_source ou fbclid são ignorados, de modo que quem chega por um anúncio vê os mesmos contadores que os restantes.

Também pode definir o identificador à mão:

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

Se o identificador mudar, o widget recomeça do zero e os contadores voltam a zero.

Opções

Cada opção é um atributo do mesmo elemento e todas podem ser omitidas.

data-emojisup-set — mostra apenas as reações que indicar, separadas por vírgulas:

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

data-emojisup-theme — escolhe as cores: light por omissão, dark para fundos escuros, auto para seguir a definição do sistema do visitante.

data-emojisup-size — define o tamanho: s, m por omissão ou l.

data-emojisup-align — alinha a fila: left, center ou right. Sem este atributo as reações espalham-se por toda a largura do bloco.

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

E aqui o mesmo widget com tema escuro, quatro reações e centrado:

Conteúdo carregado depois da página

Se o widget estiver em conteúdo que chega mais tarde, chame isto assim que o conteúdo estiver no lugar:

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

O método percorre a página outra vez e arranca os widgets novos. Para que um widget deixe de atualizar os contadores, chame emojiSup.destroy().

O que o widget guarda

O widget cria um único cookie, ev_user_id, válido por um ano. Contém um identificador aleatório e mais nada: é o que permite ao widget lembrar-se da reação escolhida por este visitante, para que a escolha resista a um recarregamento. Em cada pedido o widget envia o endereço da página onde a barra está, e é assim que os contadores ficam separados por página. Sem nomes, sem endereços de e-mail, sem dados de formulários.

Os contadores atualizam-se enquanto o separador estiver aberto e à vista. Num separador em segundo plano o widget deixa de consultar o servidor e, ao fim de alguns minutos sem cliques, abranda sozinho.

Perguntas

É mesmo gratuito? Sim, e não há nenhuma conta para criar.

Quantos widgets cabem numa página? Os que precisar. Dê a cada um o seu próprio id.

O visitante pode mudar de reação? Pode. Conta uma reação por visitante e por widget: carregar noutra transfere o voto, carregar na mesma retira-o.

Os contadores sobrevivem a uma remodelação? Sim, desde que o endereço da página, ou o id que definiu, não mude.

É preciso jQuery? Não. O script não tem dependências e pesa cerca de 45 KB.