Widget EmojiSup

Vuoi una barra di emoji come questa sul tuo sito?

Il widget di reazioni è gratuito e si installa in un minuto. Senza registrazione, senza account, senza nulla da configurare dalla nostra parte.

Installazione

Nella sezione HEAD del tuo sito aggiungi:

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

Nella sezione BODY, nel punto in cui vuoi che compaia la barra, aggiungi:

<div data-emojisup></div>

L'installazione finisce qui. Una volta caricato, lo script collega il proprio foglio di stile, percorre la pagina in cerca di elementi con l'attributo data-emojisup e disegna in ognuno una barra di reazioni.

Identificatori dei widget

L'identificatore di ogni widget nasce dall'indirizzo della pagina, perciò una stessa pagina può ospitarne più d'uno e ogni pagina conserva i propri contatori. I parametri di campagna come utm_source o fbclid vengono ignorati, così chi arriva da un annuncio vede gli stessi contatori di tutti gli altri.

Puoi anche fissare tu l'identificatore:

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

Se l'identificatore cambia, il widget riparte da capo e i contatori tornano a zero.

Opzioni

Ogni opzione è un attributo dello stesso elemento e può essere omessa.

data-emojisup-set — mostra solo le reazioni che elenchi, separate da virgole:

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

data-emojisup-theme — sceglie i colori: light di base, dark per sfondi scuri, auto per seguire l'impostazione di sistema del visitatore.

data-emojisup-size — imposta la dimensione: s, m di base oppure l.

data-emojisup-align — allinea la fila: left, center o right. Senza questo attributo le reazioni si distribuiscono su tutta la larghezza del blocco.

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

Ed ecco lo stesso widget con tema scuro, quattro reazioni e centrato:

Contenuti caricati dopo la pagina

Se il widget si trova in contenuti che arrivano più tardi, chiama questo quando il contenuto è al suo posto:

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

Il metodo ripercorre la pagina e avvia i widget nuovi. Per fermare l'aggiornamento dei contatori di un widget, chiama emojiSup.destroy().

Che cosa conserva il widget

Il widget imposta un solo cookie, ev_user_id, valido un anno. Contiene un identificatore casuale e niente altro: serve perché il widget ricordi quale reazione ha scelto questo visitatore e la scelta sopravviva a un ricaricamento. A ogni richiesta il widget invia l'indirizzo della pagina su cui si trova la barra, ed è così che i contatori restano separati per pagina. Nessun nome, nessuna e-mail, nessun dato dei moduli.

I contatori si aggiornano finché la scheda è aperta e in primo piano. In una scheda di sfondo il widget smette di interrogare il server e dopo un paio di minuti senza clic rallenta da solo.

Domande

È davvero gratuito? Sì, e non c'è alcun account da creare.

Quanti widget può avere una pagina? Quanti ne servono. Dai a ciascuno il suo id.

Il visitatore può cambiare reazione? Sì. Vale una reazione per visitatore e per widget: toccarne un'altra sposta il voto, toccare la stessa lo ritira.

I contatori sopravvivono a un restyling? Sì, finché l'indirizzo della pagina o l'id che hai fissato restano gli stessi.

Serve jQuery? No. Lo script non ha dipendenze e pesa circa 45 KB.