Widget EmojiSup

Vous voulez une barre d'émojis comme celle-ci sur votre site ?

Le widget de réactions est gratuit et s'installe en une minute. Sans inscription, sans compte, rien à régler de notre côté.

Installation

Dans la section HEAD de votre site, ajoutez :

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

Dans la section BODY, à l'endroit où la barre doit apparaître, ajoutez :

<div data-emojisup></div>

L'installation s'arrête là. Une fois chargé, le script ajoute sa feuille de style, parcourt la page à la recherche des éléments portant l'attribut data-emojisup et dessine une barre de réactions dans chacun d'eux.

Identifiants des widgets

L'identifiant d'un widget est construit à partir de l'adresse de la page : une même page peut donc en accueillir plusieurs, et chaque page garde ses propres compteurs. Les paramètres de campagne comme utm_source ou fbclid sont ignorés, si bien qu'un visiteur venu d'une publicité voit les mêmes compteurs que les autres.

Vous pouvez aussi fixer l'identifiant vous-même :

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

Si l'identifiant change, le widget repart de zéro et ses compteurs sont remis à zéro.

Options

Chaque option est un attribut du même élément, et toutes peuvent être omises.

data-emojisup-set — n'affiche que les réactions que vous énumérez, séparées par des virgules :

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

data-emojisup-theme — choisit les couleurs : light par défaut, dark pour les fonds sombres, auto pour suivre le réglage système du visiteur.

data-emojisup-size — règle la taille : s, m par défaut ou l.

data-emojisup-align — cale la rangée : left, center ou right. Sans cet attribut les réactions occupent toute la largeur du bloc.

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

Et voici le même widget avec le thème sombre, quatre réactions et centré :

Contenu chargé après la page

Si le widget se trouve dans un contenu qui arrive plus tard, appelez ceci une fois le contenu en place :

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

La méthode reparcourt la page et démarre les nouveaux widgets. Pour qu'un widget cesse de rafraîchir ses compteurs, appelez emojiSup.destroy().

Ce que le widget conserve

Le widget dépose un seul cookie, ev_user_id, valable un an. Il contient un identifiant aléatoire et rien d'autre : c'est lui qui permet au widget de retenir la réaction choisie par ce visiteur, pour qu'elle survive à un rechargement. À chaque requête, le widget envoie l'adresse de la page où se trouve la barre, car c'est ainsi que les compteurs sont séparés page par page. Ni noms, ni adresses e-mail, ni données de formulaire.

Les compteurs se rafraîchissent tant que l'onglet est ouvert et visible. Dans un onglet d'arrière-plan, le widget cesse d'interroger le serveur, et après quelques minutes sans clic il ralentit de lui-même.

Questions

Est-ce vraiment gratuit ? Oui, et il n'y a aucun compte à créer.

Combien de widgets sur une même page ? Autant que nécessaire. Donnez à chacun son propre id.

Un visiteur peut-il changer de réaction ? Oui. Une réaction par visiteur et par widget : cliquer sur une autre déplace le vote, cliquer sur la même le retire.

Les compteurs survivent-ils à une refonte ? Oui, tant que l'adresse de la page, ou l'id que vous avez fixé, ne change pas.

Faut-il jQuery ? Non. Le script n'a aucune dépendance et pèse environ 45 Ko.