Προσθήκη ζωντανών συζητήσεων σε ιστότοπους Super.so

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

Άνοιγμα ρυθμίσεων Code

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

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

Επιλογή Body

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

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

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

Κώδικας Super.so FastComments Collab Chat

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 // Clean up existing instance

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Clean up existing top bar if it exists

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Create new top bar

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 // Initialize FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Update current pathname

46 currentPathname = window.location.pathname;

47 }

48

49 // Initial load

50 load();

51

52 // Check every 500ms for changes

53 setInterval(() => {

54 // Reload if pathname changed

55 if (window.location.pathname !== currentPathname) {

56 console.log('Pathname changed, reloading...');

57 load();

58 return;

59 }

60

61 // Reload if widget was removed

62 if (currentWidget && !currentWidget.parentNode) {

63 console.log('Widget removed, reloading...');

64 load();

65 return;

66 }

67

68 // Reload if container was emptied

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:

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

Αν δείτε ένα μήνυμα "this is a demo message" μετά την επικόλληση του κώδικα:

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

Προσθήκη widget ζωντανών σχολίων στα άρθρα Notion του Super.so σας

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

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

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

Widget ζωντανών σχολίων FastComments για Super.so

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 // Ενημέρωση του τρέχοντος pathname

37 currentPathname = window.location.pathname;

38 }

39

40 // Αρχική φόρτωση

41 load();

42

43 // Έλεγχος για αλλαγές κάθε 500ms

44 setInterval(() => {

45 // Επαναφόρτωση εάν το pathname άλλαξε

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 // Επαναφόρτωση εάν το container αδειάστηκε

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 έχει σχεδιαστεί ώστε να προσαρμόζεται για να ταιριάζει στον ιστότοπό σας.

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