FastComments.com

Add Live Discussions to Super.So Sites


FastComments Collab Chat ανεβάζει τα sites του Super.so στο επόμενο επίπεδο προσθέτοντας ζωντανές ενσωματωμένες συζητήσεις. Οι χρήστες μπορούν να επισημαίνουν και να σχολιάζουν τμήματα κειμένου συνεργατικά, μαζί — σε πραγματικό χρόνο!

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


Βήμα 1: Άνοιγμα Ρυθμίσεων Internal Link

Πρώτα πρέπει να ανοίξουμε τον επεξεργαστή κώδικα. Αν θέλετε να προσθέσετε το FastComments σε όλες τις σελίδες, απλώς επιλέξτε Κώδικας κάτω αριστερά:

Άνοιγμα ρυθμίσεων Κώδικα
Άνοιγμα ρυθμίσεων Κώδικα

Αν θέλετε να το προσθέσετε σε μια συγκεκριμένη σελίδα, επιλέξτε Edit Custom Code στις ρυθμίσεις αυτής της σελίδας.

Τώρα ας επιλέξουμε την καρτέλα Body. Αυτό είναι σημαντικό!. Η εγκατάσταση του αποσπάσματος κώδικα στο Head δεν λειτουργεί.

Επιλέξτε Body
Επιλέξτε Body

Τώρα είστε έτοιμοι για το βήμα 2.

Βήμα 2: Προσθήκη Έτοιμου Κώδικα Internal Link


Στο επόμενο βήμα πρέπει να αντιγράψετε τον έτοιμο κώδικα του widget παρακάτω.

Εφόσον είστε συνδεδεμένος στο FastComments.com το παρακάτω απόσπασμα κώδικα θα περιέχει ήδη τις πληροφορίες του λογαριασμού σας. Ας το αντιγράψουμε:

Κώδικας Συνεργατικού Chat FastComments για Super.so
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 (function () {
5 let currentPathname = window.location.pathname;
6 let currentWidget = null;
7 let currentTopBar = null;
8
9 function load() {
10 if (!window.FastCommentsCollabChat) {
11 console.log('...no script, trying again...');
12 return setTimeout(load, 100);
13 }
14
15 const target = document.querySelector('.super-content');
16 if (!target || !target.innerHTML || target.innerHTML.length < 100) {
17 console.log('...no content, trying again...');
18 return setTimeout(load, 100);
19 }
20
21 // Καθαρισμός υπάρχουσας παρουσίας
22 if (target.fastCommentsInstance) {
23 target.fastCommentsInstance.destroy();
24 }
25
26 // Καθαρισμός υπάρχουσας κορυφαίας γραμμής αν υπάρχει
27 if (currentTopBar && currentTopBar.parentNode) {
28 currentTopBar.parentNode.removeChild(currentTopBar);
29 }
30
31 // Δημιουργία νέας κορυφαίας γραμμής
32 const topBarTarget = document.createElement('div');
33 target.parentNode.insertBefore(topBarTarget, target);
34 topBarTarget.style.maxWidth = 'var(--layout-max-width)';
35 topBarTarget.style.margin = '0 auto';
36 currentTopBar = topBarTarget;
37 currentWidget = target;
38
39 // Αρχικοποίηση FastComments Collab Chat
40 target.fastCommentsInstance = FastCommentsCollabChat(target, {
41 tenantId: "demo",
42 topBarTarget: topBarTarget
43 });
44
45 // Ενημέρωση τρέχοντος pathname
46 currentPathname = window.location.pathname;
47 }
48
49 // Αρχική φόρτωση
50 load();
51
52 // Έλεγχος για αλλαγές κάθε 500ms
53 setInterval(() => {
54 // Επαναφόρτωση αν αλλάξει το pathname
55 if (window.location.pathname !== currentPathname) {
56 console.log('Pathname changed, reloading...');
57 load();
58 return;
59 }
60
61 // Επαναφόρτωση αν το widget αφαιρέθηκε
62 if (currentWidget && !currentWidget.parentNode) {
63 console.log('Widget removed, reloading...');
64 load();
65 return;
66 }
67
68 // Επαναφόρτωση αν ο container αδειάσει
69 const target = document.querySelector('.super-content');
70 if (target && target.innerHTML.length < 100) {
71 console.log('Container emptied, reloading...');
72 load();
73 }
74 }, 500);
75 })();
76</script>
77

Τώρα επικολλήστε στην περιοχή Body:

Επικολλημένος Κώδικας
Επικολλημένος Κώδικας

If you see a "this is a demo message" after pasting the code:

  • Βεβαιωθείτε ότι έχετε συνδεθεί στον λογαριασμό σας στο fastcomments.com.
  • Ενεργοποιήστε τα cookies τρίτων (3rd party cookies).
  • Στη συνέχεια ανανεώστε αυτή τη σελίδα και αντιγράψτε ξανά το απόσπασμα κώδικα. Πρέπει να έχει tenantId συμπληρωμένο με το αναγνωριστικό του tenant σας.

Δείτε επίσης: Κανονικό widget σχολίων Internal Link

Προσθήκη Ζωντανού Widget Σχολίων σε άρθρα Notion στο Super.so

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

Βήματα Εγκατάστασης

Αντιγράψτε τον ακόλουθο κώδικα και επικολλήστε τον στην ενότητα Body των ρυθμίσεων του site σας στο Super.so:

Super.so FastComments Ζωντανό Widget Σχολίων
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<script>
4 (function () {
5 let currentPathname = window.location.pathname;
6 let currentWidget = null;
7
8 function load() {
9 if (!window.FastCommentsUI) {
10 console.log('...no script, trying again...');
11 return setTimeout(load, 100);
12 }
13
14 const contentArea = document.querySelector('.notion-root');
15 if (!contentArea || !contentArea.innerHTML || contentArea.innerHTML.length < 100) {
16 console.log('...no content, trying again...');
17 return setTimeout(load, 100);
18 }
19
20 // Καθαρισμός υπάρχουσας παρουσίας
21 if (contentArea.fastCommentsInstance) {
22 contentArea.fastCommentsInstance.destroy();
23 }
24
25 // Δημιουργία νέου στόχου
26 const target = document.createElement('div');
27 contentArea.append(target);
28 currentWidget = target;
29
30 // Αρχικοποίηση FastComments
31 contentArea.fastCommentsInstance = FastCommentsUI(target, {
32 tenantId: "demo",
33 urlId: window.location.pathname
34 });
35
36 // Ενημέρωση της τρέχουσας διαδρομής
37 currentPathname = window.location.pathname;
38 }
39
40 // Αρχικό φόρτωμα
41 load();
42
43 // Έλεγχος για αλλαγές κάθε 500ms
44 setInterval(() => {
45 // Φόρτωση ξανά αν άλλαξε η διαδρομή
46 if (window.location.pathname !== currentPathname) {
47 console.log('Pathname changed, reloading...');
48 load();
49 return;
50 }
51
52 // Φόρτωση ξανά αν το widget αφαιρέθηκε
53 if (currentWidget && !currentWidget.parentNode) {
54 console.log('Widget removed, reloading...');
55 load();
56 return;
57 }
58
59 // Φόρτωση ξανά αν το περιέκτη αδειάσει
60 const contentArea = document.querySelector('.notion-root');
61 if (contentArea && contentArea.innerHTML.length < 100) {
62 console.log('Container emptied, reloading...');
63 load();
64 }
65 }, 500);
66 })();
67</script>
68

Σημαντικές Σημειώσεις

  • Το widget σχολίων θα εμφανίζεται στο κάτω μέρος των άρθρων Notion σας
  • Κάθε σελίδα αποκτά το δικό της μοναδικό νήμα σχολιασμού βάσει της διαδρομής του URL
  • Βεβαιωθείτε ότι θα αντικαταστήσετε το "demo" με το πραγματικό tenant ID από τον λογαριασμό FastComments σας
  • Το widget χειρίζεται αυτόματα το δυναμικό φόρτωμα σελίδων του Super.so

Προσαρμογή Internal Link

Το FastComments έχει σχεδιαστεί για να προσαρμόζεται ώστε να ταιριάζει με τον ιστότοπό σας.

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