Add Live Discussions to Super.So Sites

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

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

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

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

Επιλέξτε Body

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

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

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

Κώδικας Συνεργατικού Chat FastComments για Super.so

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 Σχολίων σε άρθρα Notion στο Super.so

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

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

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

Super.so FastComments Ζωντανό Widget Σχολίων

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

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

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