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. Suivez simplement 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 laissés via FastComments avec notre plugin WordPress peuvent être automatiquement synchronisés vers votre WordPress installation afin que vous conserviez le contrôle de vos données. Cela peut être désactivé pour limiter la taille de votre base de données WordPress.

La version VanillaJS du widget est la manière la plus simple d'ajouter des commentaires à votre site web, sans nécessiter de systèmes de build ou de code côté serveur.

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

Simple Code Snippet

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 séparé pour chaque page.

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

Vous n'avez pas non plus besoin d'un 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 doit être ajoutée à 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 :

Ajouter 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 tenant de démonstration :

Utilisation - Configuration inline

Copy

1

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

3

Étant donné que la configuration peut devenir assez compliquée, nous pouvons passer 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 des modifications, donc la modification de n'importe quelle propriété de l'objet de configuration provoquera son rechargement.

Vous pouvez trouver la configuration prise en charge par le composant Angular 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 devrez 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 disponible sur NPM ici

Le code source est disponible sur GitHub.

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

Les instructions ci‑dessous concernent Vue 3 car 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 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 devrez définir region sur EU:

FastComments Vue - UE

Copy

1

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

3

The fastcomments-vue and fastcomments-vue-next libraries support the same configuration as the VanillaJS commenting widget.

You can find the configuration the Vue component supports here.

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.