FastComments.com

Προσαρμογές & Διαμόρφωση

Προσαρμογές και Διαμόρφωση

Πλαίσιο

Εδώ θα βρείτε εκτενή τεκμηρίωση για κάθε μία από τις λειτουργίες και τις ρυθμίσεις που υποστηρίζει το widget σχολίων.

Αυτή η τεκμηρίωση θα καλύψει βασικές έννοιες και θα εμβαθύνει σε κάθε περιοχή λειτουργικότητας, με οδηγίες βήμα‑βήμα και συνηθισμένες παγίδες.

Θα δοθούν παραδείγματα κώδικα, με τις σχετικές γραμμές επισημασμένες. Θα παρέχονται στιγμιότυπα οθόνης των σελίδων διαμόρφωσης όπου εφαρμόζεται.

Τα παραδείγματα κώδικα θα χρησιμοποιούν τη βασική βιβλιοθήκη JavaScript μας, ωστόσο οι επιλογές διαμόρφωσης χρησιμοποιούν ακριβώς τα ίδια ονόματα για όλες τις εκδόσεις του widget σχολίων (React, Vue κ.λπ.).

Οι περισσότερες ρυθμίσεις και λειτουργίες που περιγράφονται σε αυτόν τον οδηγό δεν απαιτούν τη συγγραφή κώδικα.

Απόδοση των Ίδιων Σχολίων σε Διάφορες Σελίδες Internal Link

Δεδομένου ότι η παράμετρος urlId μας επιτρέπει να ορίσουμε σε ποια σελίδα, ή id, συνδέονται τα σχόλια, μπορούμε απλώς να θέσουμε την urlId στην ίδια τιμή σε αυτές τις σελίδες.

The Same Comments on Multiple Pages
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "urlId": "https://example.com/source-page"
8}];
9</script>
10

Προσαρμοσμένες Γραμματοσειρές Internal Link

Το FastComments έχει σχεδιαστεί ώστε να προσαρμόζεται, και η γραμματοσειρά που χρησιμοποιούν τα widget μας δεν αποτελεί εξαίρεση.

Από προεπιλογή, το FastComments χρησιμοποιεί το system font stack για να εμφανίζεται όσο το δυνατόν καλύτερα σε ένα ευρύ φάσμα συσκευών.

Για να ορίσετε τις δικές σας γραμματοσειρές, δείτε την Τεκμηρίωση Custom CSS.

Εκεί θα βρείτε έναν τρόπο να ορίσετε προσαρμοσμένο CSS, που θα σας επιτρέψει να καθορίσετε τις επιθυμητές γραμματοσειρές.

Πώς να Ορίσετε τη Γραμματοσειρά

Για να παρακάμψετε τη γραμματοσειρά, προτείνουμε να ορίσετε το CSS σας χρησιμοποιώντας τους selectors .fast-comments, textarea. Για παράδειγμα:

Παράδειγμα Εξωτερικής Προσαρμοσμένης Γραμματοσειράς
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

Υποστήριξη Σκοτεινών Φόντων (Dark Mode) Internal Link

Εξ ορισμού, το widget σχολίων FastComments θα ανιχνεύει αυτόματα τη σκοτεινή λειτουργία στις περισσότερες ιστοσελίδες.

Όταν εντοπιστεί η σκοτεινή λειτουργία, το FastComments θα αλλάξει από μαύρο κείμενο σε λευκό φόντο σε λευκό κείμενο σε μαύρο φόντο. Οι εικόνες θα αλλάξουν επίσης.

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

Ωστόσο, ο μηχανισμός ανίχνευσης, που βασίζεται στον προσδιορισμό της "φωτεινότητας", ενδέχεται να μην ενεργοποιήσει τη σκοτεινή λειτουργία όταν το επιθυμείτε. Για να την ενεργοποιήσετε υποχρεωτικά, ορίστε τη σημαία hasDarkBackground σε true ως εξής:

Force Dark Background Mode
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "hasDarkBackground": true
8}];
9</script>
10

Σύνδεση από Σχόλια σε Σελίδες Internal Link

Όταν αποστέλλονται email ειδοποιήσεων ή όταν τα σχόλια εμφανίζονται σε διεπαφές χρήστη όπως η σελίδα διαχείρισης, είναι χρήσιμο να υπάρχει δυνατότητα σύνδεσης από το σχόλιο προς τη σελίδα στην οποία βρίσκεται.

Αν το URL ID δεν είναι πάντα ένα ID, τότε πρέπει να αποθηκεύουμε το URL κάπου αλλού. Αυτός είναι ο σκοπός της ιδιότητας "url", η οποία ορίζεται ως εξής.

Ορισμός Προσαρμοσμένου URL
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5"
8}];
9</script>
10

Μια συνηθισμένη περίπτωση χρήσης είναι η σύνδεση του νήματος σχολίων με ένα αναγνωριστικό, όπως ένα άρθρο, και στη συνέχεια η επιστροφή σε μια συγκεκριμένη σελίδα, για παράδειγμα:

Ορισμός Προσαρμοσμένου URL και URL ID μαζί
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

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

Καθορισμός Ποια Σελίδα να Αποδοθεί Internal Link

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

Εάν επιθυμείτε, η ακριβής σελίδα που θα αποδοθεί μπορεί να περαστεί στο widget σχολίων μέσω της ρύθμισης startingPage.

Specifying The Page to Render
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": 1
8}];
9</script>
10

Σημειώστε ότι οι αριθμοί σελίδων ξεκινούν από το μηδέν, οπότε το παραπάνω παράδειγμα αποδίδει τη δεύτερη σελίδα.

Αλλαγή Νήματος Σχολίων χωρίς Επαναφόρτωση Σελίδας Internal Link

Έχουμε δει πώς το urlId είναι το αναγνωριστικό της σελίδας ή του άρθρου στο οποίο είναι συνδεδεμένα τα σχόλια.

Επίσης, για να το επαναλάβουμε, αν δεν οριστεί, το urlId θα πάρει ως προεπιλογή το URL της τρέχουσας σελίδας.

Τι γίνεται όμως με τα SPAs, ή Single-Page-Applications, όπου η σελίδα ή το περιεχόμενο στο οποίο είναι συνδεδεμένα τα σχόλια αλλάζει δυναμικά χωρίς νέα επαναφόρτωση της σελίδας;

Angular, React, Vue, κ.λπ.

Με τις βιβλιοθήκες μας όπως το Angular και το React, η απλή ενημέρωση της ιδιότητας urlId που περνάει στο widget θα προκαλέσει την ανανέωση του widget σχολίων. Μπορείτε να το δείτε σε δράση για την εφαρμογή React, για παράδειγμα, εδώ.

VanillaJS

Αν χρησιμοποιείτε τη βιβλιοθήκη VanillaJS, τα πράγματα είναι λίγο πιο περίπλοκα, καθώς δεν υπάρχει ένα framework όπως το Angular ή το React που να χειρίζεται το data binding ή τη διάδοση της κατάστασης.

Όταν δημιουργείτε το widget VanillaJS, επιστρέφει κάποιες συναρτήσεις που μπορούν να κληθούν για να το ενημερώσουν.

Ακολουθεί ένα λειτουργικό παράδειγμα όπου αλλάζουμε το hash της σελίδας και ενημερώνουμε το widget σχολίων:

Παράδειγμα Αλλαγής Hash Σελίδας
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // Ενημερώνουμε και το url, ώστε οι ειδοποιήσεις να συνδέονται με τη σωστή σελίδα
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

Απενεργοποίηση Ανακατεύθυνσης Εικόνας Internal Link

Από προεπιλογή, το FastComments επιτρέπει στους χρήστες να ανεβάζουν εικόνες. Όταν ο χρήστης κάνει κλικ σε αυτήν την εικόνα, το FastComments, από προεπιλογή, θα ανοίξει μια νέα καρτέλα για να εμφανίσει την εικόνα σε πλήρες μέγεθος. Η ρύθμιση αυτής της σημαίας σε true απενεργοποιεί αυτή τη συμπεριφορά:

Disable Image Redirect
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "disableImageRedirect": true
8}];
9</script>
10

Αν δεν σκοπεύετε να χειριστείτε εσείς το κλικ στην εικόνα (βλέπε onImageClicked), συνιστούμε να το συνδυάσετε με κάποια στυλ ώστε να αφαιρέσετε την εντύπωση ότι η εικόνα μπορεί να γίνει κλικ.

Επισήμανση Νέων Σχολίων Internal Link

FastComments παρέχει αρκετούς τρόπους για να επισημαίνονται τα νέα σχόλια.

Πρωτίστως, από προεπιλογή, τα σχόλια που προκάλεσαν μια εντός-εφαρμογής ειδοποίηση (απαντήσεις, απαντήσεις στο ίδιο νήμα ή σχόλια σε μια σελίδα στην οποία είστε εγγεγραμμένοι), θα επισημαίνονται αυτόματα με το avatar του χρήστη να λάμπει ελαφρώς. Το χρώμα μπορεί να προσαρμοστεί μέσω CSS χρησιμοποιώντας την κλάση is-unread.

Στα σχόλια που δημοσιεύτηκαν τις τελευταίες 24 ώρες εφαρμόζεται η κλάση 24hr που μπορεί να χρησιμοποιηθεί για στυλ.

Τέλος, οποιαδήποτε νέα σχόλια σε πραγματικό χρόνο που εμφανίζονται στη συνεδρία του χρήστη θα επισημαίνονται για μερικά δευτερόλεπτα μέσω μιας κινούμενης εικόνας. Αυτό γίνεται μέσω της κλάσης CSS is-live και μπορεί επίσης να προσαρμοστεί.

Πρότυπα Email Internal Link

Τα email που αποστέλλονται από το FastComments στους πελάτες σας μπορούν να προσαρμοστούν. Το πρότυπο, η λογική, και οι μεταφράσεις μπορούν όλες να τροποποιηθούν. Το κείμενο μπορεί να προσαρμοστεί ανά τοπική ρύθμιση, και το στυλ μπορεί ακόμη να αλλάξει ανά τομέα. Μάθετε περισσότερα για τα προσαρμοσμένα πρότυπα email εδώ.

Νέα Ζωντανά Σχόλια στο Κάτω Μέρος Internal Link

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

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

New Live Comments to Bottom
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "newCommentsToBottom": true
8}];
9</script>
10

Με αυτή τη ρύθμιση ενεργοποιημένη:

  • Τα νέα ζωντανά σχόλια που δημοσιεύονται από άλλους χρήστες θα εμφανίζονται στο κάτω μέρος της λίστας σχολίων
  • Οι χρήστες θα βλέπουν τα νέα σχόλια να εμφανίζονται κάτω από τα υπάρχοντα σχόλια σε πραγματικό χρόνο
  • Αυτό επηρεάζει μόνο τις ενημερώσεις ζωντανών σχολίων — όχι την αρχική φόρτωση της σελίδας
  • Αυτό μπορεί να βοηθήσει στη διατήρηση της ροής ανάγνωσης όταν οι χρήστες ακολουθούν μια συζήτηση

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

Ενεργοποίηση Άπειρης Κύλισης Internal Link

Από προεπιλογή, το widget του FastComments προσαρμόζει το ύψος του κάθετα ώστε να χωράνε όλα τα ορατά σχόλια. Η σελιδοποίηση επιτυγχάνεται μέσω ενός κουμπιού "View Next" στο τέλος της τρέχουσας σελίδας, καθώς έχουμε διαπιστώσει ότι αυτή η αλληλεπίδραση είναι η πιο ευχάριστη για τους περισσότερους χρήστες.

Ωστόσο, υπάρχουν περιπτώσεις όπου προτιμάται η ατελείωτη κύλιση (infinite scrolling). Για παράδειγμα, χρησιμοποιούμε αυτή τη λειτουργία στο προϊόν μας Stream Chat.

Μπορούμε να κρύψουμε τα κουμπιά "View Next" και να μεταβούμε σε ατελείωτη κύλιση ορίζοντας τη σημαία enableInfiniteScrolling σε true:

Ενεργοποίηση Ατελείωτης Κύλισης
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true
8}];
9</script>
10

Αυτό απαιτεί επίσης την προσθήκη προσαρμοσμένου CSS. Προσθέστε προσαρμοσμένο CSS για τον selector .comments ώστε να ενεργοποιηθεί η κύλιση, για παράδειγμα:

Ενεργοποίηση Ατελείωτης Κύλισης
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

Ένα πλήρες λειτουργικό παράδειγμα θα ήταν:

Ενεργοποίηση Ατελείωτης Κύλισης
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

Στο παραπάνω παράδειγμα χρησιμοποιούμε την ιδιότητα customCSS, ωστόσο προτείνεται, για λόγους απόδοσης, να χρησιμοποιείται αντ' αυτού το Widget Configuration UI. Δείτε την τεκμηρίωση Custom CSS.

Απόδοση Όλων των Σχολίων Μαζί - Απενεργοποίηση Σελιδοποίησης Internal Link

Για να απενεργοποιήσετε τη σελιδοποίηση και να εμφανίσετε απλώς όλα τα σχόλια ταυτόχρονα, ορίστε το startingPage σε -1.

Render All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "startingPage": -1
8}];
9</script>
10

Αποτροπή Νέων Σχολίων Κορυφαίου Επιπέδου Internal Link

Ορίζοντας το noNewRootComments σε true θα προκαλέσει το widget να αποκρύψει την περιοχή απάντησης ρίζας, αλλά θα επιτρέψει ακόμα στους χρήστες να απαντούν σε υποσχόλια. Για παράδειγμα, μπορείτε να το ορίσετε υπό όρους κατά τη φόρτωση της σελίδας ώστε να επιτρέπεται μόνο σε κάποιους χρήστες να αφήνουν σχόλια πρώτου επιπέδου.

Prevent New Root Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "noNewRootComments": true
8}];
9</script>
10

Μέγιστο Βάθος Απάντησης Internal Link

Εξ ορισμού, το FastComments επιτρέπει απεριόριστη εμφώλευση απαντήσεων, δημιουργώντας μια δομή νήματος όπου οι χρήστες μπορούν να απαντούν σε απαντήσεις επ' αόριστον.

Η επιλογή maxReplyDepth σας επιτρέπει να περιορίσετε πόσο βαθιά μπορούν να φτάσουν τα νήματα απαντήσεων. Όταν επιτευχθεί το μέγιστο βάθος, οι χρήστες δεν θα βλέπουν πλέον κουμπί απάντησης στα σχόλια σε αυτό το επίπεδο.

Limiting Reply Depth to 2 Levels
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "maxReplyDepth": 2
8}];
9</script>
10

Με το maxReplyDepth ορισμένο σε 2:

  • Οι χρήστες μπορούν να σχολιάζουν στο ανώτατο επίπεδο (επίπεδο 0)
  • Οι χρήστες μπορούν να απαντούν σε σχόλια κορυφαίου επιπέδου (επίπεδο 1)
  • Οι χρήστες μπορούν να απαντούν σε αυτές τις απαντήσεις (επίπεδο 2)
  • Δεν επιτρέπονται περαιτέρω απαντήσεις πέρα από το επίπεδο 2

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

Ο ορισμός του maxReplyDepth σε 0 θα απενεργοποιούσε όλες τις απαντήσεις, επιτρέποντας μόνο σχόλια κορυφαίου επιπέδου. Εάν δεν οριστεί, οι απαντήσεις μπορούν να εμφωλευτούν χωρίς όριο.

Προειδοποίηση πριν την Αναχώρηση με Μη Απεσταλμένο Σχόλιο Internal Link

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

Ορίζοντας το warnOnUnsavedComment σε true, ο φυλλομετρητής ζητάει από τον χρήστη να επιβεβαιώσει πριν φύγει από τη σελίδα ενώ οποιοδήποτε πλαίσιο σχολίου ή μια επεξεργασία σε εξέλιξη περιέχει ακόμη κείμενο. Μόλις υποβληθεί το σχόλιο, το κείμενο διαγράφεται, έτσι δεν εμφανίζεται προτροπή.

Προειδοποίηση για Μη Αποθηκευμένο Σχόλιο
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "warnOnUnsavedComment": true
8}];
9</script>
10

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

Αυτή η επιλογή φορτώνει μια μικρή επέκταση κατόπιν ζήτησης, έτσι δεν προσθέτει τίποτα στο widget για ιστότοπους που δεν την ενεργοποιούν.

Επισκόπηση Single Sign On (SSO) Internal Link

Το SSO, ή single-sign-on, είναι ένα σύνολο συμβάσεων που σας επιτρέπουν σε εσάς ή στους χρήστες σας να χρησιμοποιείτε το FastComments χωρίς να χρειάζεται να δημιουργήσετε άλλον λογαριασμό.

Υποθέτοντας ότι δεν επιτρέπετε ανώνυμα σχόλια, απαιτείται λογαριασμός για να σχολιάσετε με το FastComments. Κάνουμε τη διαδικασία εγγραφής πολύ εύκολη - ο χρήστης απλώς αφήνει το email του όταν σχολιάζει. Ωστόσο, κατανοούμε ότι ακόμα και αυτό είναι επιπλέον τριβή που ορισμένοι ιστότοποι θέλουν να αποφύγουν.

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

Πώς το αποκτώ;

Όλοι οι τύποι λογαριασμών έχουν επί του παρόντος πρόσβαση στο SSO. Ωστόσο, ο μέγιστος αριθμός χρηστών SSO θα ποικίλλει ανάλογα με το πακέτο σας. Όπως και με άλλες λειτουργίες, τα σχέδια Pro και υψηλότερα παρέχουν άμεση υποστήριξη ανάπτυξης.

Ας συγκρίνουμε τις επιλογές και μετά ας δούμε τις λεπτομέρειες καθεμιάς.

Μεταφορά Χρηστών και Σχολίων

Κατά τη μετάβαση από μια πλατφόρμα με SSO όπως το Disqus, θα έχετε ήδη χρήστες και τα σχόλιά τους.

Τα σχόλια εισάγονται ως μέρος της μετάβασής σας, είτε μέσω του API, του Import UI μας, είτε της υποστήριξης πελατών. Το Import UI προτιμάται αν υποστηρίζει την πλατφόρμα από την οποία μεταφέρεστε, καθώς ενσωματώνει διαχείριση σφαλμάτων, εξαγωγή και μεταφόρτωση avatar και πολυμέσων, και σύστημα παρακολούθησης μαζικών εργασιών.

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

Αν τα σχόλια έχουν εισαχθεί, και οι χρήστες SSO δεν έχουν προστεθεί χειροκίνητα μέσω του API, τότε τα σχόλια θα μεταφερθούν αυτόματα στον λογαριασμό του χρήστη την πρώτη φορά που δημιουργείται όταν προβάλει οποιοδήποτε νήμα σχολίων. Στη συνέχεια θα μπορεί να διαχειρίζεται, να επεξεργάζεται και να διαγράφει τα σχόλια που είχε αρχικά γράψει.

Η αυτόματη μετάβαση γίνεται μέσω email ή ονόματος χρήστη. Ορισμένες πλατφόρμες δεν παρέχουν emails στην εξαγωγή, όπως το Disqus, οπότε σε αυτή την περίπτωση χρησιμοποιούμε το όνομα χρήστη.

  • Αρκεί να περάσετε ένα αντίστοιχο όνομα χρήστη, και ένα email στο SSO payload, και θα προσθέσουμε το email στα μεμονωμένα αντικείμενα σχολίων ώστε οι ειδοποιήσεις και οι αναφορές να λειτουργούν.

Αν επιθυμείτε να εισαγάγετε τα σχόλια και τους χρήστες σας ταυτόχρονα, συνεργαστείτε με την υποστήριξη για να μεταφερθούν τα σχόλια στους αντίστοιχους λογαριασμούς των χρηστών αφού οι χρήστες εισαχθούν μέσω του API.

Έτσι, για να συνοψίσουμε την ευκολότερη διαδρομή για τη μετάβαση:

  1. Εισαγωγή σχολίων.
    1. Τα avatars και άλλα πολυμέσα μεταφέρονται αυτόματα αν χρησιμοποιείτε το Import UI στο Manage Data -> Imports.
  2. Ρύθμιση Secure ή Simple SSO.
  3. Αφήστε τη μετάβαση να γίνει ανά χρήστη αυτόματα όταν συνδεθεί για πρώτη φορά.
    1. Αυτό συνήθως προσθέτει λιγότερο από ένα δευτερόλεπτο στον χρόνο φόρτωσης της σελίδας αν ο χρήστης έχει λιγότερα από 50k σχόλια.

Χρήστες WordPress

Αν χρησιμοποιείτε το WordPress plugin μας, τότε δεν χρειάζεται να γράψετε κώδικα! Απλώς πηγαίνετε στη σελίδα Admin του plugin, κάντε κλικ στο SSO Settings, και μετά στο Enable.

Αυτό θα σας οδηγήσει σε έναν οδηγό ενός κλικ που θα δημιουργήσει το API key σας, θα το στείλει στην εγκατάσταση WordPress σας και θα ενεργοποιήσει το SSO. Το έχουμε ενοποιήσει σε ένα μόνο κλικ για εσάς.

Σημειώστε ότι αν εγκαθιστάτε το plugin για πρώτη φορά, θα πρέπει να ολοκληρώσετε τη διαδικασία εγκατάστασης πριν δείτε τη σελίδα admin με το κουμπί SSO Settings.

WordPress SSO - Συντονιστές

Σημειώστε ότι επί του παρόντος, για να εμφανίζεται το σήμα "Moderator" δίπλα στους συντονιστές σας όταν σχολιάζουν με το FastComments WordPress plugin, πρέπει επίσης να έχουν προστεθεί ως Moderators στο dashboard του FastComments, και να έχουν επαληθευμένο email τους.

Προσαρμοσμένες Ενσωματώσεις

Για προσαρμοσμένες ενσωματώσεις, υπάρχουν δύο επιλογές.

Επιλογή Ένα - Secure SSO

Με το Secure SSO, το FastComments γνωρίζει ότι ο χρήστης που σχολιάζει, ψηφίζει και διαβάζει σχόλια είναι πραγματικός χρήστης στον ιστότοπό σας.

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

Με το Secure SSO, το SSO payload δημιουργείται server-side χρησιμοποιώντας HMAC authentication και στη συνέχεια περνάει στο widget στο client.

Με το Secure SSO, ο λογαριασμός του χρήστη είναι εντελώς ξεχωριστός από την υπόλοιπη βάση χρηστών του FastComments. Αυτό σημαίνει ότι αν έχουμε δύο συνεργάτες την Εταιρεία Α και την Εταιρεία Β, η καθεμία μπορεί να έχει χρήστη SSO με το όνομα χρήστη "Bob".

Απαιτήσεις

  • Βασικές γνώσεις ανάπτυξης backend.
  • Βασικές γνώσεις διαχείρισης μυστικών API keys.
  • Βασικές γνώσεις ανάπτυξης API ή server-side rendering.

Πλεονεκτήματα

  • Ασφαλές.
  • Απρόσκοπτη εμπειρία σχολιασμού.

Μειονεκτήματα

  • Απαιτεί ανάπτυξη backend.

Ενημέρωση Δεδομένων Χρήστη

Με το Secure SSO, κάθε φορά που περνάτε το sso user payload, θα ενημερώνουμε τον χρήστη με τις πιο πρόσφατες πληροφορίες. Για παράδειγμα, αν ο χρήστης έχει όνομα χρήστη X, και περάσετε Y στο SSO payload, το όνομα χρήστη του θα γίνει Y.

Αν θέλετε να αφαιρέσετε τιμές με αυτή την προσέγγιση, τότε ορίστε τις σε null (όχι undefined).

Secure SSO API

Παρέχουμε επίσης ένα API για αλληλεπίδραση με τους χρήστες SSO. Δείτε την τεκμηρίωση.

Σημειώστε ότι όταν χρησιμοποιείτε Secure SSO, οι χρήστες δημιουργούνται αυτόματα στο παρασκήνιο κατά τη φόρτωση της σελίδας. Δεν χρειάζεται να κάνετε μαζική εισαγωγή των χρηστών σας.

Επιλογή Δύο - Simple SSO

Η εναλλακτική του Secure SSO είναι να περάσετε απλώς τις πληροφορίες του χρήστη στο widget σχολιασμού.

Η παροχή email με το Simple SSO δεν απαιτείται, ωστόσο χωρίς αυτό τα σχόλιά τους θα εμφανίζονται ως "Unverified".

Σημείωση! Από τις αρχές του 2022, τα ονόματα χρήστη με Simple SSO δεν χρειάζεται να είναι μοναδικά σε όλο το FastComments.com.

Ιδανικά, το Simple SSO θα πρέπει να επιλέγεται μόνο όταν αναπτύσσετε σε μια πλατφόρμα που δεν παρέχει πρόσβαση σε backend.

Απαιτήσεις

  • Βασικές γνώσεις ανάπτυξης client-side.
  • Πρέπει να γνωρίζετε τουλάχιστον το email του χρήστη.

Πλεονεκτήματα

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

Μειονεκτήματα

  • Λιγότερο ασφαλές από το Secure SSO καθώς το payload στο client side θα μπορούσε να κατασκευαστεί ώστε να γίνει οποιοσδήποτε χρήστης.

Simple SSO API

Οι χρήστες που δημιουργούνται αυτόματα μέσω της ροής Simple SSO αποθηκεύονται ως αντικείμενα SSOUser. Μπορούν να προσπελαστούν και να διαχειριστούν μέσω του API SSOUser. Δείτε την τεκμηρίωση.

Προσαρμοσμένες Ενσωματώσεις - Μεταφορά από Disqus SSO Internal Link

Οι μεγαλύτερες διαφορές μεταξύ του Disqus και του FastComments Secure SSO είναι ότι το Disqus χρησιμοποιεί SHA1 για την κρυπτογράφηση ενώ εμείς χρησιμοποιούμε SHA256.

Αυτό σημαίνει ότι η μετάβαση από το Disqus είναι εύκολη - αλλάξτε τον αλγόριθμο κατακερματισμού που χρησιμοποιείται από SHA1 σε SHA256 και ενημερώστε τα ονόματα ιδιοτήτων που περνιούνται στο UI.

Προσαρμοσμένες Ενσωματώσεις - Μεταφορά από Commento SSO Internal Link

Commento χρησιμοποιεί μια ριζικά διαφορετική προσέγγιση SSO - απαιτούν να έχετε ένα endpoint που καλούν για να αυθεντικοποιήσουν τον χρήστη. FastComments είναι το αντίθετο - απλώς encode και hash τις πληροφορίες του χρήστη χρησιμοποιώντας το secret key σας και τις προωθείτε.

Κλήσεις Επιστροφής Internal Link

Όλες οι βιβλιοθήκες για το widget σχολίων (προς το παρόν Angular, React, Vue) υποστηρίζουν callbacks.

Οι callbacks ορίζονται στο αντικείμενο διαμόρφωσης, με την ίδια υπογραφή για κάθε βιβλιοθήκη.

Οι υποστηριζόμενες callbacks είναι:

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

Τις ακριβείς υπογραφές μπορείτε να βρείτε στους ορισμούς TypeScript.

Εδώ είναι ένα παράδειγμα που χρησιμοποιεί όλες τις callbacks:

Παραδείγματα callbacks
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: 'demo',
8 onInit: function () {
9 console.log('Library started to fetch comments!');
10 },
11 onAuthenticationChange: function (eventName, userObj) {
12 console.log('User authenticated!', eventName, userObj);
13 },
14 onRender: function () {
15 console.log('Render event happened!');
16 },
17 commentCountUpdated: function (newCount) {
18 console.log('New comment count:', newCount);
19 },
20 onReplySuccess: function (comment) {
21 console.log('New comment saved!', comment);
22 },
23 onVoteSuccess: function (comment, voteId, direction, status) {
24 console.log('New vote saved!', comment, voteId, direction, status);
25 },
26 onImageClicked: function (src) {
27 console.log('Image clicked!', src);
28 },
29 onOpenProfile: function (userId) {
30 console.log('User tried to open profile', userId);
31 // return true; // επιστροφή true για να αποτρέψετε την προεπιλεγμένη συμπεριφορά (άνοιγμα προφίλ χρήστη fastcomments.com).
32 },
33 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
34 console.log('Trying to submit comment', comment);
35 setTimeout(function() { // προσομοίωση ασύγχρονης συμπεριφοράς (κλήση API κ.λπ).
36 if(confirm('Should submit?')) {
37 continueSubmitFn();
38 } else {
39 cancelFn('Some optional error message');
40 }
41 }, 1000);
42 },
43 onCommentsRendered: function(comments) {
44 // Τα σχόλια είναι ταξινομημένα με την προεπιλεγμένη ταξινόμηση στη σελίδα, η οποία μπορεί να είναι Most Relevant (π.χ. most upvoted, κ.λπ.) ή Newest First
45 const topCommentInList = comments[0];
46 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
47 }
48 }];
49</script>
50

Τίτλοι Σελίδας Internal Link

Ο τρέχων τίτλος της σελίδας συσχετίζεται με το καθορισμένο urlId και αποθηκεύεται για χρήση στα εργαλεία εποπτείας.

Από προεπιλογή, αυτό ανακτάται από το document.title.

Εάν θέλετε, μπορείτε να καθορίσετε τον δικό σας τίτλο σελίδας ως εξής:

Specifying The Page Title
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "pageTitle": "Article 42"
8}];
9</script>
10

Καταμέτρηση Σχολίων & Καταμέτρηση Όλων των Ενσωματωμένων Απαντήσεων Internal Link

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

Προεπιλεγμένα, αυτό είναι true - είναι μέτρηση του δεύτερου - όλων των σχολίων. Σε παλαιότερες εκδόσεις του widget σχολίων το προεπιλεγμένο είναι false.

Μπορούμε να αλλάξουμε τη συμπεριφορά, ώστε να είναι μέτρηση όλων των εμφωλευμένων σχολίων ορίζοντας τη σημαία countAll σε true.

Counting All Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": true
8}];
9</script>
10

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

Counting Top Level Comments
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "countAll": false
8}];
9</script>
10

Αυτό δεν μπορεί αυτή τη στιγμή να προσαρμοστεί χωρίς αλλαγές στον κώδικα.

Αναφορά IDs Ομάδων Internal Link

Μια λίστα με ids για χρήση στην αυτόματη συμπλήρωση των @mentions. Χρήσιμο όταν θέλετε να αποτρέψετε τη σήμανση χρηστών όταν δεν έχουν κοινές ομάδες.

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

Limit Groups for Mentions
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo",
7 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13