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

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

Αν κάνετε κλικ στο Run στο παράδειγμα παρακάτω μπορείτε να το δείτε σε δράση.

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

• Ποιες εικόνες αντιδράσεων να χρησιμοποιηθούν.
• Ένα σύντομο 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

The type signature of the constructor is:

Διαμόρφωση

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

It supports sso to tie the reacts to the user's account for authentication.

Currently, only VanillaJS is supported. If you'd like this widget to be added to one of our client libraries, let us know!

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

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

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

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

Παράδειγμα κώδικα Floating Likes με Secure 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 με Simple 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 στο υποσέλιδο του ιστολογίου:

Κώδικας Επιπλέουσων 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