Add Comments To a Website

Installazione

FastComments rende facile aggiungere commenti al tuo sito web, che sia statico o dinamico, con tema chiaro o scuro, pagine pubbliche o interne. Dovrebbe essere facile da installare e da adattare a qualsiasi tipo di sito o applicazione web. Questo ti permette di avere commenti in tempo reale, immediatamente, senza bisogno di ulteriori configurazioni nella maggior parte dei casi.

WordPress

Per aggiungere commenti al tuo sito WordPress, puoi trovare il nostro plugin WordPress qui.

Una guida completa all'installazione e la documentazione sul plugin sono qui.

Questo plugin supporta i commenti in tempo reale, SSO e l'installazione senza codice. Segui semplicemente la guida all'installazione nella pagina di amministrazione dopo aver installato il plugin. Ti guiderà nella connessione della tua installazione di WordPress al tuo account.

Qualsiasi commento lasciato con FastComments tramite il nostro plugin WordPress può essere sincronizzato automaticamente nella tua installazione di WordPress in modo da mantenere il controllo sui tuoi dati. Questa opzione può essere disattivata per limitare le dimensioni del database di WordPress.

VanillaJS / frammento HTML

La versione VanillaJS del widget è il modo più semplice per aggiungere commenti al tuo sito web, senza richiedere sistemi di build o codice lato server.

Aggiungi semplicemente lo snippet di codice seguente a qualsiasi pagina per aggiungere commenti al tuo sito:

Simple Code Snippet
Copy Run 
<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo"
}];
</script>

Puoi usare lo stesso snippet di codice su più pagine; creerà automaticamente un thread separato per pagina.

Molte applicazioni hanno un'opzione "HTML Embed Code". Seleziona quella e incolla lo snippet di codice sopra.

Non è necessario nemmeno un account per provarlo! Potresti vedere "tenantId: demo" nello snippet sopra se non hai effettuato l'accesso. In questo modo verrà usato l'account demo.

Puoi trovare la documentazione sulla configurazione del widget qui.

Tutte le versioni del widget FastComments sono dei wrapper attorno alla libreria core VanillaJS. Questo ci consente di aggiungere funzionalità e correggere problemi in un unico posto - e le modifiche si propagano automaticamente alle altre varianti del widget dei commenti.

Angular

Per aggiungere commenti a un sito realizzato con Angular, puoi trovare la nostra libreria Angular su NPM qui.

Il widget di commenti FastComments per Angular supporta tutte le stesse funzionalità di quello VanillaJS - commenti in tempo reale, SSO, e così via.

Avrai bisogno di fastcomments-typescript, che è una dipendenza peer. Assicurati che sia inclusa nella compilazione TypeScript. In futuro, questa dipendenza peer verrà spostata su @types/fastcomments, il che semplificherà questa installazione.

FastComments Angular tramite NPM

Copy

  npm install fastcomments-typescript --save
  npm install ngx-fastcomments --save

La dipendenza peer dovrebbe essere aggiunta nel tuo file tsconfig.json, per esempio:

Aggiunta della dipendenza peer fastcomments-typescript

Copy

"include": [
  "src/**/*.ts",
  "node_modules/fastcomments-typescript/src/index.ts"
],

Quindi, aggiungi il FastCommentsModule alla tua applicazione:

Aggiungi il modulo alla tua applicazione

Copy

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FastCommentsModule } from 'ngx-fastcomments';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FastCommentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Utilizzo

Per iniziare, passiamo un oggetto di configurazione per il tenant demo:

Utilizzo - Configurazione inline

Copy

<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>

Poiché la configurazione può diventare piuttosto complicata, possiamo passare un riferimento a un oggetto:

Utilizzo - Passare un oggetto per la configurazione

Copy

<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>

Utilizzo - UE

Copy

<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

Il widget utilizza il rilevamento delle modifiche, quindi modificare qualsiasi proprietà dell'oggetto di configurazione ne causerà il ricaricamento.

Puoi trovare la configurazione supportata dal componente Angular qui.

React

Per aggiungere commenti a un sito creato con React, puoi trovare la nostra libreria React su NPM qui.

Il widget di commenti FastComments per React supporta tutte le stesse funzionalità di quello per VanillaJS - commenti in tempo reale, sso, e così via.

FastComments React tramite NPM

Copy

npm install --save fastcomments-react

FastComments React tramite Yarn

Copy

yarn add fastcomments-react

Esempio React

Copy

import React, { Component } from 'react'
import {FastCommentsCommentWidget} from 'fastcomments-react'
class Example extends Component {
  render() {
    return <FastCommentsCommentWidget tenantId="demo" />
  }
}

Se ti trovi nell'UE, vorrai impostare il parametro region in questo modo:

Esempio React - UE

Copy

    <FastCommentsCommentWidget tenantId="demo" region="eu" />

Puoi trovare la configurazione supportata dal componente React qui.

React Native

Per aggiungere commenti alla tua app React Native, puoi trovare la nostra libreria React Native su NPM qui.

Il widget di commenti FastComments per React Native supporta tutte le stesse funzionalità di quello VanillaJS - commenti in tempo reale, SSO, ecc.

FastComments React Native tramite NPM

Copy

npm install --save fastcomments-react-native

FastComments React Native tramite Yarn

Copy

yarn add fastcomments-react-native

La configurazione è specificata leggermente in modo diverso rispetto alla libreria fastcomments-react:

Esempio React Native

Copy

import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
  const tenantId = 'demo'; // Il tuo tenant id. Può essere recuperato da https://fastcomments.com/auth/my-account/api-secret
  const pageId = 'native-test'; // l'ID o l'URL del thread dei commenti nella tua app.
  const config = {
    tenantId: tenantId,
    urlId: pageId
  };
  return (
      <FastCommentsCommentWidget config={config}/>
  );

Se ti trovi nell'UE, dovrai impostare il parametro region:

React Native - UE

Copy

  // ...
  const config = {
    tenantId: tenantId,
    urlId: pageId,
    region: 'eu'
  };
  // ...

Puoi trovare la configurazione che il componente React Native supporta qui.

Vue

Per aggiungere commenti al tuo sito web costruito con Vue, puoi trovare la nostra libreria Vue su NPM qui.

Inoltre, una libreria vue-next è disponibile su NPM qui

Il codice sorgente è disponibile su GitHub.

Il widget di commenti FastComments per Vue supporta tutte le stesse funzionalità della versione VanillaJS - live commenting, sso, e così via.

Le istruzioni seguenti sono per Vue 3 poiché è disponibile da tempo, comunque FastComments supporta anche Vue 2 tramite la libreria fastcomments-vue.

FastComments Vue tramite NPM

Copy

npm install --save fastcomments-vue-next

FastComments Vue tramite Yarn

Copy

yarn add fastcomments-vue-next

Esempio Vue

Copy

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <fast-comments v-bind:config="{tenantId: 'demo'}"/>
</template>
<script>
import {FastComments} from 'fastcomments-vue-next';
export default {
  name: 'App',
  components: {
    FastComments
  }
}
</script>

Se ti trovi nell'UE, dovrai impostare il region su EU:

FastComments Vue - UE

Copy

<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>

Le librerie fastcomments-vue e fastcomments-vue-next supportano la stessa configurazione del widget di commenti VanillaJS.

Puoi trovare la configurazione supportata dal componente Vue qui.

TypeScript

Le definizioni TypeScript per FastComments, che includono i tipi per tutta la configurazione passata al widget dei commenti, possono essere trovate su NPM qui.

Puoi trovarle su GitHub qui.

Più istanze sulla stessa pagina

Ogni istanza del widget dei commenti è isolata. Per questo motivo, FastComments supporta nativamente più di un'istanza per pagina, o più istanze che puntano allo stesso thread di chat.

Nel caso della libreria VanillaJS, ad esempio, devi semplicemente collegare il widget dei commenti a diversi nodi DOM. Se vuoi semplicemente aggiornare il thread corrente sulla pagina, vedi Cambiare thread di commenti senza ricaricare la pagina;

Sincronizzazione dello stato di autenticazione tra più istanze

Esaminiamo l'esempio di un'applicazione single-page personalizzata che è una lista di domande frequenti con il proprio thread di commenti.

In questo caso, abbiamo più istanze di FastComments nel DOM contemporaneamente.

Questo va bene, ma pone alcune sfide per l'esperienza utente.

Considera questo flusso:

L'utente visita la pagina con una lista di domande, ognuna con il proprio widget dei commenti.
L'utente inserisce il proprio nome utente ed email e lascia una domanda in uno dei thread.
Vede un altro elemento FAQ su cui ha una domanda.
Va a commentare di nuovo. Deve inserire nuovamente email e nome utente?

In questo caso, FastComments gestisce la sincronizzazione dello stato di autenticazione tra le istanze del widget per te. Nel quarto passaggio, l'utente sarà già temporaneamente autenticato poiché ha inserito nome utente ed email sulla stessa pagina.

Casi d'uso comuni

Mostrare i commenti in tempo reale immediatamente

Il widget dei commenti è in tempo reale per impostazione predefinita, tuttavia i commenti in tempo reale appaiono sotto un pulsante "Mostra N nuovi commenti" per evitare che il contenuto della pagina si sposti.

In alcuni casi, è comunque desiderabile mostrare immediatamente i nuovi commenti, senza dover cliccare un pulsante.

In questo caso, vorrai abilitare il flag showLiveRightAway, la cui documentazione puoi trovare qui.

Consentire commenti anonimi (non richiedere email)

Per impostazione predefinita, FastComments richiede che l'utente lasci un'email quando commenta.

Questo può essere disabilitato, le istruzioni sono qui.

Stile personalizzato

Molti dei nostri clienti applicano il proprio stile al widget dei commenti. Puoi trovare la documentazione qui.

Mostrare gli stessi commenti su più domini

Mostrare gli stessi commenti su più siti è qualcosa che FastComments supporta nativamente. Vedi la nostra documentazione su questo argomento.

Cambiare la pagina corrente

FastComments supporta SPA e applicazioni complesse. Cambiare la pagina corrente è facile ed è trattato qui.

Risoluzione dei problemi comuni

Qui ci sono alcuni sintomi che riscontriamo frequentemente e le soluzioni comuni.

Messaggio "Questa è una demo"

Questo viene mostrato quando hai copiato il codice del widget dalla nostra homepage, che utilizza il nostro tenant demo. Per usare il tuo tenant, copia il codice del widget da qui.

Errore "FastComments non riesce a caricarsi su questo dominio"

FastComments deve sapere quali domini sono di tua proprietà per autenticare le richieste associate al tuo account. Consulta la nostra documentazione per vedere come risolvere questo errore (aggiungi semplicemente il sottodominio + dominio esatti al tuo account).

Nota che questo dovrebbe verificarsi solo dopo la fine del periodo di prova. Durante il periodo di prova, tutte le richieste da nuovi domini verranno automaticamente aggiunte al tuo account.

Commenti migrati non visualizzati per installazioni personalizzate

Di solito ciò accade quando i commenti importati sono legati a un Page ID, e tu stai passando un URL (o nessun valore, nel qual caso viene usato l'URL della pagina).

Puoi fare il debug esportando i tuoi commenti e visualizzando la colonna URL ID (attualmente Colonna B).

Assicurati che i valori che vedi nella colonna URL ID siano gli stessi valori che stai passando alla configurazione del widget come parametro urlId.

Per ulteriori spiegazioni, prova a leggere la nostra documentazione Come i commenti sono legati alle pagine e agli articoli.

Se tutto il resto fallisce, contattaci.

Se il widget dei commenti non viene visualizzato, controlla la console sviluppatore di Chrome per eventuali errori.

Per la maggior parte delle errate configurazioni, il widget dei commenti mostrerà almeno un errore sulla pagina se riesce a caricarsi. Non vedere nulla è solitamente un'indicazione di un errore di scripting.

La configurazione desiderata non funziona come previsto

Prova la nostra estensione Chrome per vedere quale configurazione viene passata al widget dei commenti. Se tutto fallisce, fai uno screenshot di ciò che indica l'estensione Chrome e contattaci.

Commenti mancanti sulla stessa URL con differenti Hash Bang

Per impostazione predefinita, FastComments utilizza l'URL della pagina per il "bucket" in cui i commenti vengono archiviati. Se i tuoi URL includono #hashbangs, e questi #hashbangs non dovrebbero far parte dell'identificatore che identifica un thread di commenti, possiamo semplicemente ignorare il valore dell'hash bang, per esempio:

Esempio: ignorare gli hash bang

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: "demo",
    url: location.href.replace(location.hash, ''),
    urlId: location.href.replace(location.hash, '')
}];
</script>

Nota che dopo aver effettuato questa modifica, sarà necessario eseguire una migrazione per i commenti esistenti. Per questo, contattaci.

Per impostazione predefinita, FastComments utilizza l'URL della pagina per il "bucket" in cui i commenti vengono archiviati. Se i tuoi URL includono parametri di query che non dovrebbero far parte dell'identificatore che identifica un thread di commenti, possiamo semplicemente ignorarli, per esempio:

Ignora i parametri di query

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: "demo",
    url: location.protocol + '//' + location.host + location.pathname,
    urlId: location.pathname
}];
</script>

Nota che dopo aver effettuato questa modifica, sarà necessario eseguire una migrazione per i commenti esistenti. Per questo, contattaci.

Non ricevere le email

In FastComments dedichiamo molti sforzi per garantire che l'invio delle email sia il più affidabile possibile. Tuttavia, alcuni provider di posta elettronica sono notoriamente difficili da raggiungere in modo affidabile. Controlla la cartella spam per i messaggi provenienti da fastcomments.com.

Se ci contatti di solito possiamo fornire maggiori informazioni sul motivo per cui potresti non ricevere le nostre email.

Notion e Google Sites

Vuoi aggiungere commenti alle tue pagine Notion, su Google Sites o su Nimbus Note? Ci pensiamo noi.

Notion

Per aggiungere commenti ai documenti Notion, vedi il video esplicativo qui.

Google Sites

Google Sites è supportato anche, e il flusso è simile.

Crea una conversazione da incorporare.
Quando modifichi il tuo Google Site, vai su Insert -> Embed. Seleziona By URL.
Incolla l'URL del Passo 1.
Clicca Insert. Fatto!

Nota: i commenti non appariranno fino alla pubblicazione

Nimbus Note

Anche l'aggiunta di commenti in tempo reale a una Nimbus Note è supportata, e il flusso è simile a quello di Notion.

Crea una conversazione da incorporare.
Quando modifichi la tua nota, aggiungi un blocco di incorporamento.
Usa l'URL del Passo 1 come URL da incorporare.
Fatto!

Guida successiva

Plugin di terze parti

Installazioni personalizzate

Incorporamento nei documenti

Add Comments To a Website

Installazione

WordPress

VanillaJS / frammento HTML

Angular

Utilizzo

React

React Native

Vue

TypeScript

Più istanze sulla stessa pagina

Sincronizzazione dello stato di autenticazione tra più istanze

Casi d'uso comuni

Mostrare i commenti in tempo reale immediatamente

Consentire commenti anonimi (non richiedere email)

Stile personalizzato

Mostrare gli stessi commenti su più domini

Cambiare la pagina corrente

Risoluzione dei problemi comuni

Messaggio "Questa è una demo"

Errore "FastComments non riesce a caricarsi su questo dominio"

Commenti migrati non visualizzati per installazioni personalizzate

Il widget dei commenti non viene visualizzato

La configurazione desiderata non funziona come previsto

Commenti mancanti sulla stessa URL con differenti Hash Bang

Parametri di query URL che influenzano il widget

Non ricevere le email

Notion e Google Sites

Notion

Google Sites

Nimbus Note

Lingua 🇮🇹 Italiano

Plugin di terze parti

Installazioni personalizzate

Incorporamento nei documenti

Add Comments To a Website

Installazione

WordPress

VanillaJS / frammento HTML

Angular

Utilizzo

React

React Native

Vue

TypeScript

Più istanze sulla stessa pagina

Sincronizzazione dello stato di autenticazione tra più istanze

Casi d'uso comuni

Mostrare i commenti in tempo reale immediatamente

Consentire commenti anonimi (non richiedere email)

Stile personalizzato

Mostrare gli stessi commenti su più domini

Cambiare la pagina corrente

Risoluzione dei problemi comuni

Messaggio "Questa è una demo"

Errore "FastComments non riesce a caricarsi su questo dominio"

Commenti migrati non visualizzati per installazioni personalizzate

Il widget dei commenti non viene visualizzato

La configurazione desiderata non funziona come previsto

Commenti mancanti sulla stessa URL con differenti Hash Bang

Parametri di query URL che influenzano il widget

Non ricevere le email

Notion e Google Sites

Notion

Google Sites

Nimbus Note