FastComments.com

Installazione

FastComments è progettato per essere installato su qualsiasi tipo di pagina - statica o dinamica, con tema chiaro o scuro, pagine pubbliche o interne. Dovrebbe essere facile da installare e adattare a qualsiasi tipo di sito o applicazione web.


WordPress Internal Link

Puoi trovare il nostro plugin WordPress qui.

Una guida completa all'installazione e la documentazione del plugin sono disponibili 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 WordPress al tuo account.

Tutti i commenti lasciati con FastComments tramite il nostro plugin WordPress possono essere sincronizzati automaticamente con la tua installazione WordPress in modo da mantenere il controllo sui tuoi dati. Questa opzione può essere disattivata per limitare la dimensione del tuo database WordPress.

VanillaJS / frammento HTML Internal Link

La versione VanillaJS del widget è molto facile da installare, non richiede sistemi di build né codice lato server.

Aggiungi semplicemente il seguente frammento di codice a qualsiasi pagina:

Simple Code Snippet
Copy CopyRun External Link
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo"
7}];
8</script>
9

Puoi usare lo stesso frammento di codice su molte pagine; creerà automaticamente un thread separato per ogni pagina.

Molte applicazioni hanno un'opzione "Codice di incorporamento HTML". Selezionala e incolla il frammento di codice sopra.

Non hai nemmeno bisogno di un account per provarlo! Potresti vedere "tenantId: demo" nel frammento sopra se non hai effettuato l'accesso. In questo modo utilizzerà l'account demo.

Puoi trovare la documentazione sulla configurazione del widget qui.

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

Angular Internal Link

Puoi trovare la nostra libreria Angular su NPM qui.

Il widget dei commenti FastComments per Angular supporta tutte le stesse funzionalità della versione VanillaJS - commenti in tempo reale, SSO e altro.

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

FastComments Angular via NPM
Copy Copy
1
2 npm install fastcomments-typescript --save
3 npm install ngx-fastcomments --save
4

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

Adding fastcomments-typescript peer dependency
Copy Copy
1
2"include": [
3 "src/**/*.ts",
4 "node_modules/fastcomments-typescript/src/index.ts"
5],
6

Quindi, aggiungi il FastCommentsModule alla tua applicazione:

Add The Module to Your App
Copy Copy
1
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4
5import { AppComponent } from './app.component';
6import { FastCommentsModule } from 'ngx-fastcomments';
7
8@NgModule({
9 declarations: [
10 AppComponent
11 ],
12 imports: [
13 BrowserModule,
14 FastCommentsModule
15 ],
16 providers: [],
17 bootstrap: [AppComponent]
18})
19export class AppModule { }
20

Utilizzo

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

Usage - Inline Configuration
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>
3

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

Usage - Pass Object for Configuration
Copy Copy
1
2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>
3
Usage - EU
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>
3

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

Puoi trovare la configurazione supportata dal componente Angular qui.

React Internal Link

Puoi trovare la nostra libreria React su NPM qui.

Il widget dei commenti FastComments per React supporta tutte le stesse funzionalità della versione VanillaJS - commenti in tempo reale, SSO e altro.

FastComments React via NPM
Copy Copy
1
2npm install --save fastcomments-react
3
FastComments React via Yarn
Copy Copy
1
2yarn add fastcomments-react
3
React Example
Copy Copy
1
2import React, { Component } from 'react'
3
4import {FastCommentsCommentWidget} from 'fastcomments-react'
5
6class Example extends Component {
7 render() {
8 return <FastCommentsCommentWidget tenantId="demo" />
9 }
10}
11

Se sei nell'UE, vorrai impostare il parametro region così:

React Example - EU
Copy Copy
1
2 <FastCommentsCommentWidget tenantId="demo" region="eu" />
3

Puoi trovare la configurazione supportata dal componente React qui.

Vue Internal Link

Puoi trovare la nostra libreria Vue su NPM qui.

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

Il codice sorgente può essere trovato su GitHub.

Il widget dei commenti FastComments per Vue supporta tutte le stesse funzionalità della versione VanillaJS - commenti in tempo reale, SSO e altro.

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

FastComments Vue via NPM
Copy Copy
1
2npm install --save fastcomments-vue-next
3
FastComments Vue via Yarn
Copy Copy
1
2yarn add fastcomments-vue-next
3
Vue Example
Copy Copy
1
2<template>
3 <img alt="Vue logo" src="./assets/logo.png">
4 <fast-comments v-bind:config="{tenantId: 'demo'}"/>
5</template>
6
7<script>
8import {FastComments} from 'fastcomments-vue-next';
9
10export default {
11 name: 'App',
12 components: {
13 FastComments
14 }
15}
16</script>
17

Se sei nell'UE, vorrai impostare la region su EU:

FastComments Vue - EU
Copy Copy
1
2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>
3

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

Puoi trovare la configurazione supportata dal componente Vue qui.

TypeScript Internal Link

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 Internal Link

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:

  1. L'utente visita la pagina con una lista di domande, ognuna con il proprio widget dei commenti.
  2. L'utente inserisce il proprio nome utente ed email e lascia una domanda in uno dei thread.
  3. Vede un altro elemento FAQ su cui ha una domanda.
  4. 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 Internal Link

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.