Add Comments To a Website

Vous pouvez trouver notre extension WordPress ici.

Un guide d'installation complet et la documentation de l'extension sont disponibles ici.

Cette extension prend en charge les commentaires en direct, l'authentification unique (SSO) et l'installation sans code. Suivez simplement le guide d'installation dans la page d'administration après avoir installé l'extension. Il vous guidera pour connecter votre installation WordPress à votre compte.

Tous les commentaires laissés avec FastComments via notre extension WordPress peuvent être automatiquement synchronisés vers 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 très facile à installer et ne nécessite aucun système de compilation ni code côté serveur.

Ajoutez simplement l'extrait de code suivant à n'importe quelle page :

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 ont une option « Code d'intégration HTML ». Sélectionnez cette option et collez l'extrait de code ci-dessus.

Vous n'avez pas besoin d'un compte pour l'essayer! Vous verrez peut-être « tenantId: demo » dans l'extrait ci-dessus si vous n'êtes pas connecté. De cette façon, le compte de démonstration sera utilisé.

Vous pouvez trouver la documentation sur la configuration du widget ici.

Toutes les versions du widget FastComments sont des enveloppes autour de la bibliothèque principale VanillaJS. 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.

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 la version VanillaJS - commentaires en direct, SSO, et plus encore.

Vous aurez besoin de fastcomments-typescript, qui est une dépendance de pair. Veuillez vous assurer qu'elle est incluse dans votre compilation TypeScript. À l'avenir, cette dépendance de pair 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 de pair doit être ajoutée dans votre fichier tsconfig.json, par exemple :

Adding fastcomments-typescript peer dependency

Copy

1

2"include": [

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

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

5],

6

Ensuite, ajoutez le FastCommentsModule à votre application :

Add The Module to Your App

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 :

Usage - Inline Configuration

Copy

1

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

3

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

Usage - Pass Object for Configuration

Copy

1

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

3

Usage - EU

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 entraînera son rechargement.

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

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 la version VanillaJS - commentaires en direct, SSO, et plus encore.

FastComments React via NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React via Yarn

Copy

1

2yarn add fastcomments-react

3

React Example

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 :

React Example - EU

Copy

1

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

3

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

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 se trouve sur GitHub.

Le widget de commentaires FastComments pour Vue prend en charge toutes les mêmes fonctionnalités que la version VanillaJS - commentaires en direct, SSO, et plus encore.

Les instructions ci-dessous sont pour Vue 3 puisqu'il est sorti 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

Vue Example

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 la region sur EU :

FastComments Vue - EU

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.