EmojiSup Widget

Chcesz taki pasek emoji u siebie na stronie?

Darmowy widget reakcji instaluje się w minutę. Bez rejestracji, bez konta, po naszej stronie nie trzeba niczego ustawiać.

Instalacja

W sekcji HEAD swojej strony dodaj:

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

W sekcji BODY, w miejscu, w którym ma pojawić się pasek, dodaj:

<div data-emojisup></div>

Na tym instalacja się kończy. Po załadowaniu skrypt podłącza swój arkusz stylów, przechodzi stronę w poszukiwaniu elementów z atrybutem data-emojisup i w każdym z nich rysuje pasek reakcji.

Identyfikatory widgetów

Identyfikator widgetu powstaje z adresu strony, dzięki czemu na jednej stronie może stać kilka widgetów, a każda strona ma własne liczniki. Parametry kampanii, takie jak utm_source czy fbclid, są pomijane, więc odwiedzający, który trafił z reklamy, widzi te same liczniki co wszyscy.

Identyfikator możesz też ustawić sam:

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

Jeśli identyfikator się zmieni, widget zaczyna od zera, a liczniki się zerują.

Ustawienia

Każde ustawienie to atrybut tego samego elementu i każde można pominąć.

data-emojisup-set — pokazuje tylko wymienione reakcje, po przecinku:

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

data-emojisup-theme — wybiera kolory: light domyślnie, dark na ciemne tło, auto idzie za ustawieniem systemu odwiedzającego.

data-emojisup-size — ustala rozmiar: s, m domyślnie albo l.

data-emojisup-align — wyrównuje rząd: left, center lub right. Bez tego atrybutu reakcje rozkładają się na całą szerokość bloku.

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

A tu ten sam widget w ciemnym motywie, z czterema reakcjami i wyśrodkowany:

Treść doczytywana po stronie

Jeśli widget znajduje się w treści, która pojawia się później, wywołaj po jej wstawieniu:

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

Metoda przechodzi stronę na nowo i uruchamia nowe widgety. Aby widget przestał odświeżać liczniki, wywołaj emojiSup.destroy().

Co widget przechowuje

Widget zapisuje jedno ciasteczko, ev_user_id, ważne rok. Jest w nim losowy identyfikator i nic więcej: dzięki niemu widget pamięta, którą reakcję wybrał ten odwiedzający, więc wybór przetrwa przeładowanie strony. Przy każdym żądaniu widget wysyła adres strony, na której stoi pasek, i tak właśnie liczniki są rozdzielone między strony. Żadnych imion, adresów e-mail ani danych z formularzy.

Liczniki odświeżają się, dopóki karta jest otwarta i widoczna. W karcie w tle widget przestaje pytać serwer, a po kilku minutach bez kliknięć sam zwalnia.

Pytania

Czy to naprawdę darmowe? Tak, i nie trzeba zakładać żadnego konta.

Ile widgetów zmieści się na stronie? Tyle, ile potrzeba. Każdemu nadaj własne id.

Czy odwiedzający może zmienić reakcję? Tak. Na widget liczy się jedna reakcja od odwiedzającego: kliknięcie innej przenosi głos, ponowne kliknięcie tej samej go cofa.

Czy liczniki przetrwają przebudowę strony? Tak, o ile adres strony albo ustawione ręcznie id pozostaną te same.

Czy potrzebny jest jQuery? Nie. Skrypt nie ma zależności i waży około 45 KB.