Add Live Discussions to Super.So Sites

Per prima cosa dobbiamo aprire l'editor del codice. Se vuoi aggiungere FastComments a tutte le pagine, seleziona semplicemente Code in basso a sinistra:

Apri Impostazioni Codice

Se vuoi aggiungerlo a una pagina specifica, seleziona Edit Custom Code nelle impostazioni di quella pagina.

Now let's select the Body tab. This is important!. Installing the code snippet in Head does not work.

Seleziona Body

Ora sei pronto per il passo 2.

In questo passaggio successivo è necessario copiare il codice del widget predefinito qui sotto.

Finché sei connesso a FastComments.com, lo snippet di codice qui sotto conterrà già le informazioni del tuo account. Copiamolo:

Codice 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 // Pulisci l'istanza esistente

22 if (target.fastCommentsInstance) {

23 target.fastCommentsInstance.destroy();

24 }

25

26 // Pulisci la top bar esistente se presente

27 if (currentTopBar && currentTopBar.parentNode) {

28 currentTopBar.parentNode.removeChild(currentTopBar);

29 }

30

31 // Crea una nuova 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 // Inizializza FastComments Collab Chat

40 target.fastCommentsInstance = FastCommentsCollabChat(target, {

41 tenantId: "demo",

42 topBarTarget: topBarTarget

43 });

44

45 // Aggiorna il pathname corrente

46 currentPathname = window.location.pathname;

47 }

48

49 // Caricamento iniziale

50 load();

51

52 // Controlla ogni 500ms per cambiamenti

53 setInterval(() => {

54 // Ricarica se il pathname è cambiato

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

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

57 load();

58 return;

59 }

60

61 // Ricarica se il widget è stato rimosso

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

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

64 load();

65 return;

66 }

67

68 // Ricarica se il contenitore è stato svuotato

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

Ora incolla nell'area Body:

Codice incollato

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

• Assicurati di aver effettuato l'accesso al tuo account su fastcomments.com.
• Assicurati che i cookie di terze parti siano abilitati.
• Quindi aggiorna questa pagina e copia nuovamente lo snippet di codice. Dovrebbe avere tenantId popolato con l'identificatore del tuo tenant.

Aggiungere un widget di commenti live ai tuoi articoli Notion su Super.so

Oltre a Collab Chat, puoi aggiungere un widget di commenti tradizionale alla parte inferiore dei tuoi articoli Notion. Questo permette ai lettori di lasciare commenti e discutere dell'intero articolo.

Passaggi di installazione

Copia il seguente codice e incollalo nella sezione Body delle impostazioni del tuo sito Super.so:

Widget di commenti live FastComments per 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 // Pulire l'istanza esistente

21 if (contentArea.fastCommentsInstance) {

22 contentArea.fastCommentsInstance.destroy();

23 }

24

25 // Crea nuovo target

26 const target = document.createElement('div');

27 contentArea.append(target);

28 currentWidget = target;

29

30 // Inizializza FastComments

31 contentArea.fastCommentsInstance = FastCommentsUI(target, {

32 tenantId: "demo",

33 urlId: window.location.pathname

34 });

35

36 // Aggiorna pathname corrente

37 currentPathname = window.location.pathname;

38 }

39

40 // Caricamento iniziale

41 load();

42

43 // Controlla ogni 500ms per modifiche

44 setInterval(() => {

45 // Ricarica se il pathname è cambiato

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

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

48 load();

49 return;

50 }

51

52 // Ricarica se il widget è stato rimosso

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

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

55 load();

56 return;

57 }

58

59 // Ricarica se il contenitore è stato svuotato

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

Note importanti

• Il widget dei commenti apparirà in fondo ai tuoi articoli Notion
• Ogni pagina avrà il proprio thread di commenti univoco basato sul percorso URL
• Assicurati di sostituire "demo" con il tuo tenant ID reale del tuo account FastComments
• Il widget gestisce automaticamente il caricamento dinamico delle pagine di Super.so

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni per scoprire come.