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

Υποστήριξη σκοτεινών φόντων (σκοτεινή λειτουργία) 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, ή κατά την απόδοση σχολίων σε διεπαφές χρήστη όπως η σελίδα διαχείρισης, είναι χρήσιμο να μπορείτε να συνδέσετε το σχόλιο με τη σελίδα στην οποία βρίσκεται.

If URL ID isn't always an ID, then we have to store the URL some place else. That's what the "url" property is for, defined as follows.

Defining a Custom 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

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

Defining Custom URL and URL IDs together
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 της σελίδας, αποθηκεύεται ως το 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 είναι το αναγνωριστικό (id) της σελίδας ή του άρθρου στο οποίο συνδέονται τα σχόλια.

Επίσης, για σύνοψη, εάν δεν οριστεί, το urlId θα οριστεί από προεπιλογή στο τρέχον URL της σελίδας.

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

Angular, React, Vue, etc

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

VanillaJS

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

Όταν δημιουργείτε μια παρουσία του 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 και μπορεί επίσης να προσαρμοστεί.

Πρότυπα ηλεκτρονικού ταχυδρομείου 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

By default, the FastComments widget will resize itself vertically to fit all visible comments. Pagination is achieved via a "Προβολή Επόμενων" button at the end of the current page, as we have found this to be the interaction that feels the nicest for most users.

However, there are some cases where infinite scrolling is preferred. For example, we use this feature in our Stream Chat product.

We can hide the "Προβολή Επόμενων" buttons and switch to infinite scrolling by setting the enableInfiniteScrolling flag to true:

Enabling Infinite Scrolling
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

This also requires the addition of custom CSS to be added. Add custom CSS for the .comments selector to enable scrolling, for example:

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

A full working example would be:

Enabling Infinite Scrolling
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

In the above example we use the customCSS property, however it is suggested the Widget Configuration UI is used instead for performance reasons. Δείτε την τεκμηρίωση για το Προσαρμοσμένο 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 θα απενεργοποιούσε όλες τις απαντήσεις, επιτρέποντας μόνο σχόλια κορυφαίου επιπέδου. Εάν δεν οριστεί, οι απαντήσεις μπορούν να εμφωλευτούν χωρίς όριο.

Επισκόπηση ενιαίας σύνδεσης (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 ή username. Κάποιες πλατφόρμες δεν παρέχουν emails κατά την εξαγωγή, όπως το Disqus, οπότε σε αυτή την περίπτωση καταφεύγουμε στο username.

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

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

Για να συνοψίσουμε, η πιο εύκολη διαδρομή για τη μετανάστευση είναι:

  1. Import comments.
    1. Avatars and other media is migrated automatically if using the Import UI in Manage Data -> Imports.
  2. Setup Secure or Simple SSO.
  3. Let the migration happen per-user automatically when they log in for the first time.
    1. This usually adds less than a second to the page load time if the user has less than 50k comments.

Χρήστες WordPress

Εάν χρησιμοποιείτε το πρόσθετο WordPress μας τότε δεν χρειάζεται να γράψετε κώδικα! Απλώς μεταβείτε στη σελίδα Διαχείρισης του plugin, κάντε κλικ στο Ρυθμίσεις SSO, και μετά Ενεργοποίηση.

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

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

WordPress SSO - Moderators

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

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

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

Επιλογή 1 - Secure SSO

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

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

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

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

Απαιτήσεις

  • Κάποια βασική γνώση ανάπτυξης backend.
  • Κάποια βασική γνώση χειρισμού μυστικών API keys.
  • Κάποια βασική γνώση ανάπτυξης API ή server-side rendering.

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

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

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

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

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

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

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

Secure SSO API

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

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

Επιλογή 2 - Simple SSO

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

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

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

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

Απαιτήσεις

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

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

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

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

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

Simple SSO API

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

Προσαρμοσμένες ενσωματώσεις - Απλή ενιαία σύνδεση (SSO) Internal Link

Με το Simple SSO, μπορούμε να παρέχουμε στο widget σχολιασμού πληροφορίες για τον χρήστη ώστε να μην χρειάζεται να εισάγει το όνομα χρήστη ή το email του για να σχολιάσει.

Μπορούμε να ρυθμίσουμε το Simple SSO ως εξής:

Simple SSO
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 "simpleSSO": {
8 "username": "Bob",
9 "email": "bob@example.com",
10 "avatar": "https://example.com/bob.png",
11 "websiteUrl": "https://example.com/profiles/bob",
12 "displayName": "Bob's Name",
13 "displayLabel": "VIP User",
14 "loginURL": "https://example.com/login",
15 "logoutURL": "https://example.com/logout",
16 "badgeConfig": {
17 "badgeIds": [
18 "badge-id-1",
19 "badge-id-2"
20 ],
21 "override": false
22 }
23 }
24}];
25</script>
26

Ο χρήστης θα έχει συνδεθεί, και θα δημιουργηθεί ένας SSO χρήστης στο παρασκήνιο. Ο χρήστης θα έχει createdFromSimpleSSO ορισμένο σε true αν ανακτηθεί από το API.

Σημειώσεις:

  • Το email είναι ο μοναδικός αναγνωριστής για το Simple SSO.
  • Δεν απαιτείται να παρέχεται email με το Simple SSO, ωστόσο από προεπιλογή τα σχόλιά τους θα εμφανίζονται ως «Μη επαληθευμένο». Εάν δεν δοθεί email, ο χρήστης δεν μπορεί να πιστοποιηθεί πλήρως.
  • ΝΕΟ Από τον Ιανουάριο 2022: Τα ονόματα χρήστη δεν χρειάζεται να είναι μοναδικά σε όλο το fastcomments.com
  • Το Simple SSO μπορεί αυτόματα να δημιουργεί και να ενημερώνει SSO χρήστες, εφόσον παρέχεται email και ο χρήστης δεν δημιουργήθηκε αρχικά από το Secure SSO.
  • Μπορείτε να καθορίσετε badges για τον χρήστη με την ιδιότητα badgeConfig. Ο πίνακας badgeIds περιέχει τα IDs των badges που θα συσχετιστούν με τον χρήστη. Εάν το override είναι ορισμένο σε true, θα αντικαταστήσει όλα τα υπάρχοντα badges που εμφανίζονται στα σχόλια· εάν σε false, θα προσθέσει στα υπάρχοντα badges.

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

Τίτλοι σελίδων 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

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

Αναφορά αναγνωριστικών ομάδων 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