Το widget Page Reacts εμφανίζει ένα προσαρμόσιμο σύνολο εικονιδίων αντιδράσεων στο widget σχολίων.

Οι χρήστες μπορούν να κάνουν κλικ στις εικόνες για να αντιδράσουν, και θυμάται τις αντιδράσεις που έχουν επιλέξει ανά σελίδα. Αν είναι συνδεδεμένοι στο fastcomments.com, αυτό συνδέεται με τον λογαριασμό τους.

If you click Run on the example below you can see it in action.

Για τις Αντιδράσεις Σελίδας πρέπει να αποφασίσουμε δύο πράγματα:

• Ποιες εικόνες αντίδρασης θα χρησιμοποιηθούν.
• Ένα σύντομο id για να ονομαστεί κάθε αντίδραση.

Προαιρετικά:

• Μπορείτε επίσης να ορίσετε προαιρετικές ξεχωριστές εικόνες για επιλεγμένες/μη επιλεγμένες αντιδράσεις.
• Μπορείτε να αποφασίσετε αν θέλετε να εμφανίζεται η λίστα χρηστών που αντέδρασαν όταν τοποθετείτε το ποντίκι πάνω σε μία από τις αντιδράσεις.

Παράδειγμα κώδικα για τις Αντιδράσεις Σελίδας

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="page-reacts-example"></div>

4<script>

5 window.FastCommentsUI(document.getElementById('page-reacts-example'), {

6 tenantId: 'demo',

7 pageReactConfig: {

8 showUsers: true,

9 reacts: [

10 {id: 'droll', src: 'https://docs.fastcomments.com/images/emojis/droll.png'},

11 {id: 'he', src: 'https://docs.fastcomments.com/images/emojis/heart-eyes.png'},

12 {id: 'laugh', src: 'https://docs.fastcomments.com/images/emojis/laugh.png'},

13 {id: 'puke', src: 'https://docs.fastcomments.com/images/emojis/puke.png', selectedSrc: 'https://docs.fastcomments.com/images/emojis/puke-bw.png' },

14 {id: 'rofl', src: 'https://docs.fastcomments.com/images/emojis/rofl.png' },

15 ]

16 }

17 });

18</script>

19

Η διαμόρφωση για τις βιβλιοθήκες frontend όπως React, Angular κ.λπ. είναι η ίδια.

Το αιωρούμενο widget για τα «Μου αρέσει» εμφανίζει ένα κιβώτιο που αιωρείται στο κάτω δεξιό μέρος της οθόνης με αριθμούς για τα «Μου αρέσει» και τα σχόλια. Μπορείτε να το δείτε σε δράση σε αυτή τη σελίδα!

Οι χρήστες μπορούν να κάνουν κλικ στην καρδιά για να δηλώσουν ότι τους αρέσει η σελίδα, και το σύστημα θυμάται τις σελίδες που έχουν επισημάνει με «Μου αρέσει». Αν είναι συνδεδεμένοι στο fastcomments.com, αυτό συνδέεται με τον λογαριασμό τους για να βοηθάει στην αποτροπή των πολλαπλών επισημάνσεων «Μου αρέσει» στην ίδια σελίδα.

Επίσης εντοπίζει αυτόματα τις προτιμήσεις του χρήστη για το σκοτεινό θέμα του προγράμματος περιήγησης και αλλάζει την εμφάνισή του σε σκοτεινή έκδοση, αν ο χρήστης το επιθυμεί.

Η εγκατάσταση είναι απλή:

Παράδειγμα κώδικα Floating Likes

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo'

7 });

8</script>

9

Η υπογραφή τύπου του constructor είναι:

Διαμόρφωση

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Αλλάξτε αυτό για να ορίσετε το id της σελίδας/άρθρου. Από προεπιλογή, είναι το URL της σελίδας.

8 * @property {() => void} [onOpenComments]

9 * @property {object} [sso]

10 * @constructor

11 */

12

Υποστηρίζει sso για να συνδέει τις αντιδράσεις με τον λογαριασμό του χρήστη για σκοπούς αυθεντικοποίησης.

Προς το παρόν, υποστηρίζεται μόνο VanillaJS. Αν θέλετε αυτό το widget να προστεθεί σε μία από τις βιβλιοθήκες πελάτη μας, ενημερώστε μας!

Ασύγχρονη Έκδοση

Παράδειγμα ασύγχρονου κώδικα Floating Likes

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js?v=2" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

9 tenantId: 'demo'

10 });

11 } else {

12 setTimeout(tryLoad, 50);

13 }

14 }

15

16 tryLoad();

17 })();

18</script>

19

Με SSO

Μπορούμε επίσης να περάσουμε φορτία Secure SSO ή Simple SSO:

Παράδειγμα κώδικα Floating Likes με Ασφαλές SSO

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 sso // περάστε το αντικείμενο sso

8 });

9</script>

10

Παράδειγμα κώδικα Floating Likes με Απλό SSO

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 simpleSSO: {

8 id: 'some-user-id',

9 username: 'some username',

10 email: 'some@email.com',

11 }

12 });

13</script>

14

Για το WordPress, αυτή η λειτουργία μπορεί να ενεργοποιηθεί εγκαθιστώντας ένα πρόσθετο όπως το WPCode και προσθέτοντας το παρακάτω απόσπασμα HTML στο υποσέλιδο (footer) του ιστολογίου:

Κώδικας Floating Likes για WordPress

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 const articles = document.getElementsByTagName('article');

9 if (!articles.length) {

10 return console.warn('Article not found to show fastcomments likes.');

11 }

12 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

13 tenantId: '-VuPDR12d-v_',

14 urlId: articles[0].id.replace('post-', '')

15 });

16 } else {

17 setTimeout(tryLoad, 50);

18 }

19 }

20

21 tryLoad();

22 })();

23</script>

24