EmojiSup Widget

Θέλετε μια τέτοια μπάρα emoji στον δικό σας ιστότοπο;

Το δωρεάν widget αντιδράσεων μπαίνει σε ένα λεπτό. Χωρίς εγγραφή, χωρίς λογαριασμό, χωρίς τίποτα να ρυθμίσετε από την πλευρά μας.

Εγκατάσταση

Στην ενότητα HEAD του ιστότοπού σας προσθέστε:

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

Στην ενότητα BODY, εκεί όπου θέλετε να εμφανιστεί η μπάρα, προσθέστε:

<div data-emojisup></div>

Εδώ τελειώνει η εγκατάσταση. Μόλις φορτωθεί, το script συνδέει το φύλλο στυλ του, σαρώνει τη σελίδα για στοιχεία με το χαρακτηριστικό data-emojisup και σχεδιάζει σε καθένα μια μπάρα αντιδράσεων.

Αναγνωριστικά των widget

Το αναγνωριστικό κάθε widget προκύπτει από τη διεύθυνση της σελίδας, οπότε μια σελίδα μπορεί να έχει πολλά και κάθε σελίδα κρατά τους δικούς της μετρητές. Παράμετροι καμπάνιας όπως utm_source ή fbclid αγνοούνται, ώστε ο επισκέπτης που ήρθε από διαφήμιση να βλέπει τους ίδιους μετρητές με όλους.

Μπορείτε να ορίσετε και μόνοι σας το αναγνωριστικό:

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

Αν το αναγνωριστικό αλλάξει, το widget ξεκινά από την αρχή και οι μετρητές μηδενίζονται.

Ρυθμίσεις

Κάθε ρύθμιση είναι χαρακτηριστικό του ίδιου στοιχείου και μπορεί να παραλειφθεί.

data-emojisup-set — δείχνει μόνο τις αντιδράσεις που απαριθμείτε, χωρισμένες με κόμματα:

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

data-emojisup-theme — επιλέγει τα χρώματα: light εξ ορισμού, dark για σκούρο φόντο, auto ακολουθεί τη ρύθμιση συστήματος του επισκέπτη.

data-emojisup-size — ορίζει το μέγεθος: s, m εξ ορισμού ή l.

data-emojisup-align — στοιχίζει τη σειρά: left, center ή right. Χωρίς αυτό οι αντιδράσεις απλώνονται σε όλο το πλάτος του μπλοκ.

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

Και εδώ το ίδιο widget με σκούρο θέμα, τέσσερις αντιδράσεις και στο κέντρο:

Περιεχόμενο που φορτώνεται αργότερα

Αν το widget βρίσκεται σε περιεχόμενο που έρχεται αργότερα, καλέστε αυτό μόλις μπει στη θέση του:

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

Η μέθοδος σαρώνει ξανά τη σελίδα και ξεκινά τα νέα widget. Για να σταματήσει ένα widget να ανανεώνει τους μετρητές του, καλέστε emojiSup.destroy().

Τι κρατά το widget

Το widget βάζει ένα μόνο cookie, το ev_user_id, με ισχύ ενός έτους. Περιέχει ένα τυχαίο αναγνωριστικό και τίποτε άλλο: χάρη σε αυτό το widget θυμάται ποια αντίδραση διάλεξε ο επισκέπτης, ώστε η επιλογή να επιβιώνει μετά από ανανέωση. Σε κάθε αίτημα το widget στέλνει τη διεύθυνση της σελίδας όπου βρίσκεται η μπάρα, γιατί έτσι χωρίζονται οι μετρητές ανά σελίδα. Κανένα όνομα, καμία διεύθυνση e-mail, κανένα δεδομένο από φόρμες.

Οι μετρητές ανανεώνονται όσο η καρτέλα είναι ανοιχτή και ορατή. Σε καρτέλα στο παρασκήνιο το widget σταματά να ρωτά τον διακομιστή και μετά από λίγα λεπτά χωρίς κλικ επιβραδύνει από μόνο του.

Ερωτήσεις

Είναι πράγματι δωρεάν; Ναι, και δεν χρειάζεται να δημιουργήσετε λογαριασμό.

Πόσα widget χωρούν σε μια σελίδα; Όσα χρειάζεστε. Δώστε στο καθένα δικό του id.

Μπορεί ο επισκέπτης να αλλάξει αντίδραση; Ναι. Μετρά μία αντίδραση ανά επισκέπτη και widget: το κλικ σε άλλη μεταφέρει την ψήφο, το κλικ στην ίδια την αποσύρει.

Επιβιώνουν οι μετρητές μετά από ανασχεδίαση; Ναι, εφόσον η διεύθυνση της σελίδας ή το id που ορίσατε μείνουν ίδια.

Χρειάζεται jQuery; Όχι. Το script δεν έχει εξαρτήσεις και ζυγίζει περίπου 45 KB.