EmojiSup Widget

Möchten Sie so eine Emoji-Leiste auf Ihrer Website?

Das kostenlose Reaktions-Widget ist in einer Minute eingebaut. Ohne Anmeldung, ohne Konto, auf unserer Seite ist nichts einzurichten.

Einbau

Fügen Sie im HEAD-Bereich Ihrer Website ein:

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

Fügen Sie im BODY-Bereich an der Stelle, an der die Leiste erscheinen soll, ein:

<div data-emojisup></div>

Damit ist der Einbau fertig. Nach dem Laden bindet das Skript sein Stylesheet ein, durchsucht die Seite nach Elementen mit dem Attribut data-emojisup und zeichnet in jedem davon eine Reaktionsleiste.

Kennungen der Widgets

Die Kennung eines Widgets entsteht aus der Seitenadresse. Deshalb können mehrere Widgets auf einer Seite stehen, und jede Seite behält ihre eigenen Zähler. Parameter wie utm_source oder fbclid werden dabei übergangen, ein Besucher aus einer Kampagne sieht also dieselben Zähler wie alle anderen.

Sie können die Kennung auch selbst vergeben:

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

Ändert sich die Kennung, beginnt das Widget von vorn und die Zähler stehen wieder auf null.

Einstellungen

Jede Einstellung ist ein Attribut desselben Elements, und jede darf fehlen.

data-emojisup-set — zeigt nur die aufgezählten Reaktionen, durch Kommas getrennt:

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

data-emojisup-theme — wählt die Farben: light als Vorgabe, dark für dunkle Hintergründe, auto folgt der Systemeinstellung des Besuchers.

data-emojisup-size — bestimmt die Größe: s, m als Vorgabe oder l.

data-emojisup-align — richtet die Leiste aus: left, center oder right. Ohne dieses Attribut verteilen sich die Reaktionen über die volle Breite des Blocks.

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

Und hier dasselbe Widget mit dunklem Thema, vier Reaktionen und zentriert:

Nachgeladene Inhalte

Steht das Widget in Inhalten, die erst später eintreffen, rufen Sie danach auf:

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

Der Aufruf durchsucht die Seite erneut und startet neue Widgets. Damit ein Widget seine Zähler nicht mehr aktualisiert, rufen Sie emojiSup.destroy() auf.

Was das Widget speichert

Das Widget setzt ein einziges Cookie, ev_user_id, für ein Jahr. Darin steht eine zufällige Kennung und sonst nichts: Sie sorgt dafür, dass das Widget die gewählte Reaktion dieses Besuchers behält und die Wahl einen Neuladen übersteht. Mit jeder Anfrage sendet das Widget die Adresse der Seite, auf der die Leiste steht, denn so werden die Zähler je Seite getrennt. Keine Namen, keine E-Mail-Adressen, keine Formulardaten.

Die Zähler werden aktualisiert, solange der Tab offen und sichtbar ist. In einem Hintergrund-Tab fragt das Widget den Server nicht mehr, und nach ein paar Minuten ohne Klicks verlangsamt es sich von selbst.

Fragen

Ist es wirklich kostenlos? Ja, und ein Konto müssen Sie nicht anlegen.

Wie viele Widgets passen auf eine Seite? So viele wie nötig. Geben Sie jedem eine eigene id.

Kann ein Besucher seine Reaktion ändern? Ja. Pro Widget zählt eine Reaktion je Besucher: ein Klick auf eine andere verschiebt die Stimme, ein zweiter Klick auf dieselbe nimmt sie zurück.

Überstehen die Zähler einen Relaunch? Ja, solange die Seitenadresse oder die selbst vergebene id gleich bleibt.

Wird jQuery gebraucht? Nein. Das Skript hat keine Abhängigkeiten und wiegt rund 45 KB.