Add Comments To a Website

Pour ajouter des commentaires à votre site WordPress, vous pouvez trouver notre plugin WordPress ici.

Un guide d'installation complet et la documentation du plugin se trouvent ici.

Ce plugin prend en charge les commentaires en direct, le SSO et l'installation sans code. Il suffit de suivre le guide d'installation dans la page d'administration après avoir installé le plugin. Il vous guidera pour connecter votre installation WordPress à votre compte.

Tous les commentaires publiés via FastComments avec notre plugin WordPress peuvent être automatiquement synchronisés avec votre installation WordPress afin que vous conserviez le contrôle de vos données. Cette option peut être désactivée pour limiter la taille de votre base de données WordPress.

La version VanillaJS du widget est la façon la plus simple d'ajouter des commentaires à votre site Web, sans nécessiter de systèmes de build ni de code côté serveur.

Ajoutez simplement l'extrait de code suivant à n'importe quelle page pour ajouter des commentaires à votre site :

Extrait de code simple

Copy Run

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

Vous pouvez utiliser le même extrait de code sur plusieurs pages ; il créera automatiquement un fil de discussion distinct par page.

De nombreuses applications proposent une option "Code d'intégration HTML". Sélectionnez-la et collez-y l'extrait de code ci‑dessus.

Vous n'avez pas besoin de compte pour l'essayer ! Vous pourriez voir "tenantId: demo" dans l'extrait ci‑dessus si vous n'êtes pas connecté. De cette façon, il utilisera le compte de démonstration.

Vous trouverez la documentation sur la configuration du widget ici.

Toutes les versions du widget FastComments sont des wrappers autour de la bibliothèque VanillaJS principale. Cela nous permet d'ajouter des fonctionnalités et de corriger des problèmes en un seul endroit — et les modifications se propagent automatiquement aux autres variantes du widget de commentaires.

Pour ajouter des commentaires à un site construit avec Angular, vous pouvez trouver notre bibliothèque Angular sur NPM ici.

Le widget de commentaires FastComments pour Angular prend en charge toutes les mêmes fonctionnalités que celui en VanillaJS - live commenting, sso, et ainsi de suite.

Vous aurez besoin de fastcomments-typescript, qui est une dépendance peer. Veuillez vous assurer qu'elle est incluse dans votre compilation TypeScript. À l'avenir, cette dépendance peer sera déplacée vers @types/fastcomments, ce qui simplifiera cette installation.

FastComments Angular via NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

La dépendance peer devrait être ajoutée dans votre fichier tsconfig.json, par exemple :

Ajout de la dépendance peer fastcomments-typescript

Copy

1

2"include": [

3 "src/**/*.ts",

4 "node_modules/fastcomments-typescript/src/index.ts"

5],

6

Ensuite, ajoutez le FastCommentsModule à votre application :

Ajoutez le module à votre application

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

Utilisation

Pour commencer, nous passons un objet de configuration pour le locataire de démonstration :

Utilisation - Configuration en ligne

Copy

1

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

3

Puisque la configuration peut devenir assez complexe, nous pouvons transmettre une référence d'objet :

Utilisation - Passer un objet pour la configuration

Copy

1

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

3

Utilisation - UE

Copy

1

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

3

Le widget utilise la détection de changements, donc modifier n'importe quelle propriété de l'objet de configuration provoquera son rechargement.

Vous pouvez trouver la configuration que le composant Angular supporte ici.

Pour ajouter des commentaires à un site construit avec React, vous pouvez trouver notre bibliothèque React sur NPM ici.

Le widget de commentaires FastComments pour React prend en charge toutes les mêmes fonctionnalités que celui en VanillaJS — commentaires en direct, SSO, etc.

FastComments React via NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React via Yarn

Copy

1

2yarn add fastcomments-react

3

Exemple React

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

Si vous êtes dans l'UE, vous voudrez définir le paramètre region comme suit :

Exemple React - UE

Copy

1

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

3

Vous pouvez trouver la configuration prise en charge par le composant React ici.

Pour ajouter des commentaires à votre site Web construit avec Vue, vous pouvez trouver notre bibliothèque Vue sur NPM ici.

De plus, une bibliothèque vue-next est sur NPM ici

Le code source se trouve sur GitHub.

Le widget de commentaires FastComments pour Vue prend en charge toutes les mêmes fonctionnalités que celui en VanillaJS - live commenting, sso, et ainsi de suite.

Les instructions ci‑dessous concernent Vue 3 puisqu'il est disponible depuis un certain temps, cependant FastComments prend également en charge Vue 2 via la bibliothèque fastcomments-vue.

FastComments Vue via NPM

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue via Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Exemple pour Vue

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

Si vous êtes dans l'UE, vous voudrez définir le region sur EU:

FastComments Vue - UE

Copy

1

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

3

Les bibliothèques fastcomments-vue et fastcomments-vue-next prennent en charge la même configuration que le widget de commentaires VanillaJS.

Vous pouvez trouver la configuration prise en charge par le composant Vue ici.

Les définitions TypeScript pour FastComments, qui incluent les types pour toute la configuration passée au widget de commentaires, se trouvent sur NPM ici.

Vous pouvez les trouver sur GitHub ici.

Chaque instance du widget de commentaires est isolée. Pour cette raison, FastComments prend naturellement en charge plus d'une instance par page, ou plusieurs instances pointant vers le même fil de discussion.

Dans le cas de la bibliothèque VanillaJS par exemple, vous devez simplement lier le widget de commentaires à différents nœuds DOM. Si vous souhaitez simplement mettre à jour le fil de discussion actuel sur la page, consultez Changer de fil de commentaires sans recharger la page;

Synchronisation de l'état d'authentification entre plusieurs instances

Prenons l'exemple d'une application monopage personnalisée qui est une liste de questions fréquemment posées avec leur propre fil de commentaires.

Dans ce cas, nous avons plusieurs instances de FastComments dans le DOM en même temps.

C'est correct, mais cela pose certains défis pour l'expérience utilisateur.

Considérez ce flux :

1. L'utilisateur visite la page avec une liste de questions, chacune avec son propre widget de commentaires.
2. L'utilisateur entre son nom d'utilisateur et son courriel et laisse une question sur l'un des fils.
3. Il voit un autre élément FAQ sur lequel il a une question.
4. Il va commenter à nouveau. Doit-il entrer son courriel et son nom d'utilisateur à nouveau?

Dans ce cas, FastComments gère la synchronisation de l'état d'authentification entre les instances du widget pour vous. À l'étape quatre, l'utilisateur sera déjà temporairement authentifié puisqu'il a entré son nom d'utilisateur et son courriel sur la même page.

Afficher les commentaires en direct immédiatement

Le widget de commentaires est en direct par défaut, cependant les commentaires en direct apparaissent sous un bouton « Afficher N nouveaux commentaires » pour empêcher le contenu de la page de se déplacer.

Dans certains cas, il est tout de même souhaitable d'afficher les nouveaux commentaires immédiatement, sans avoir à cliquer sur un bouton.

Dans ce cas, vous devez activer l'option showLiveRightAway, dont vous pouvez trouver la documentation ici.

Autoriser les commentaires anonymes (ne pas exiger de courriel)

Par défaut, FastComments exige que l'utilisateur laisse un courriel lorsqu'il commente.

Cela peut être désactivé, les instructions sont ici.

Style personnalisé

Beaucoup de nos clients appliquent leur propre style au widget de commentaires. Vous pouvez trouver la documentation ici.

Afficher les mêmes commentaires sur plusieurs domaines

Afficher les mêmes commentaires sur plusieurs sites est quelque chose que FastComments prend en charge nativement. Consultez notre documentation sur ce sujet.

Changer la page actuelle

FastComments prend en charge les SPA et les applications complexes. Changer la page actuelle est facile et est couvert ici.