Add Comments To a Website

Ви можете знайти наш плагін WordPress тут.

Повний посібник з встановлення та документація по плагіну знаходяться тут.

Цей плагін підтримує коментування в реальному часі, SSO та встановлення без коду. Просто дотримуйтесь посібника з встановлення на сторінці адміністратора після встановлення плагіна. Він проведе вас через підключення вашої установки WordPress до вашого облікового запису.

Будь-які коментарі, залишені через FastComments у нашому плагіні WordPress, можуть автоматично синхронізуватися назад у вашу установку WordPress, щоб ви зберігали контроль над своїми даними. Це можна вимкнути, щоб обмежити розмір вашої бази даних WordPress.

VanillaJS версію віджета дуже легко встановити, вона не потребує систем збірки або серверного коду.

Просто додайте наступний фрагмент коду на будь-яку сторінку:

Простий фрагмент коду

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

Ви можете використовувати один і той же фрагмент коду на багатьох сторінках; він автоматично створить окрему гілку обговорення для кожної сторінки.

Багато застосунків мають опцію «Вбудувати HTML-код». Виберіть її та вставте наведений вище фрагмент коду.

Вам навіть не потрібен обліковий запис, щоб спробувати! Ви можете побачити "tenantId: demo" у наведеному вище фрагменті, якщо ви не увійшли в систему. У цьому випадку буде використовуватися демо-обліковий запис.

Ви можете знайти документацію з налаштування віджета тут.

Усі версії віджета FastComments є обгортками навколо основної бібліотеки VanillaJS. Це дозволяє нам додавати функції та виправляти проблеми в одному місці — і зміни автоматично поширюються на інші варіанти віджета коментарів.

Ви можете знайти нашу бібліотеку Angular на NPM тут.

Віджет коментарів FastComments для Angular підтримує всі ті ж функції, що й VanillaJS версія — коментування в реальному часі, SSO тощо.

Вам знадобиться fastcomments-typescript, який є peer-залежністю. Будь ласка, переконайтеся, що він включений у вашу компіляцію TypeScript. У майбутньому ця peer-залежність буде переміщена до @types/fastcomments, що спростить встановлення.

FastComments Angular через NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

Peer-залежність повинна бути додана у ваш файл tsconfig.json, наприклад:

Додавання peer-залежності fastcomments-typescript

Copy

1

2"include": [

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

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

5],

6

Потім додайте FastCommentsModule у ваш застосунок:

Додавання модуля у ваш застосунок

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

Використання

Для початку ми передаємо об'єкт конфігурації для демо-тенанта:

Використання - Вбудована конфігурація

Copy

1

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

3

Оскільки конфігурація може бути досить складною, ми можемо передати посилання на об'єкт:

Використання - Передача об'єкта для конфігурації

Copy

1

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

3

Використання - ЄС

Copy

1

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

3

Віджет використовує виявлення змін, тому зміна будь-яких властивостей об'єкта конфігурації призведе до його перезавантаження.

Ви можете знайти конфігурацію, яку підтримує компонент Angular тут.

Ви можете знайти нашу бібліотеку React на NPM тут.

Віджет коментарів FastComments для React підтримує всі ті ж функції, що й VanillaJS версія — коментування в реальному часі, SSO тощо.

FastComments React через NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React через Yarn

Copy

1

2yarn add fastcomments-react

3

Приклад 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

Якщо ви знаходитесь у ЄС, вам потрібно встановити параметр region таким чином:

Приклад React - ЄС

Copy

1

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

3

Ви можете знайти конфігурацію, яку підтримує компонент React тут.

Ви можете знайти нашу бібліотеку Vue на NPM тут.

Крім того, бібліотека vue-next доступна на NPM тут

Вихідний код можна знайти на GitHub.

Віджет коментарів FastComments для Vue підтримує всі ті ж функції, що й VanillaJS версія — коментування в реальному часі, SSO тощо.

Наведені нижче інструкції призначені для Vue 3, оскільки він вже давно випущений, однак FastComments також підтримує Vue 2 через бібліотеку fastcomments-vue.

FastComments Vue через NPM

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue через Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Приклад 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

Якщо ви знаходитесь у ЄС, вам потрібно встановити region у значення EU:

FastComments Vue - ЄС

Copy

1

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

3

Бібліотеки fastcomments-vue та fastcomments-vue-next підтримують ту ж конфігурацію, що й VanillaJS віджет коментарів.

Ви можете знайти конфігурацію, яку підтримує компонент Vue тут.

Визначення TypeScript для FastComments, які включають типи для всієї конфігурації, що передається віджету коментарів, можна знайти на NPM тут.

Ви можете знайти їх на GitHub тут.

Кожен екземпляр віджета коментарів ізольований. З цієї причини FastComments природно підтримує більше одного екземпляра на сторінку або кілька екземплярів, що вказують на один і той же чат-потік.

У випадку бібліотеки VanillaJS, наприклад, вам просто потрібно прив'язати віджет коментарів до різних DOM-вузлів. Якщо ви хочете просто оновити поточний потік на сторінці, дивіться Перемикання потоків коментарів без перезавантаження сторінки;

Синхронізація стану автентифікації між кількома екземплярами

Давайте розглянемо приклад користувацького односторінкового застосунку, який являє собою список часто задаваних питань з власним потоком коментарів.

У цьому випадку у нас є кілька екземплярів FastComments у DOM одночасно.

Це нормально, але створює деякі проблеми для користувацького досвіду.

Розглянемо цей сценарій:

1. Користувач відвідує сторінку зі списком питань, кожне з яких має свій віджет коментарів.
2. Користувач вводить своє ім'я користувача та email і залишає питання в одному з потоків.
3. Він бачить інший елемент FAQ, про який у нього є питання.
4. Він йде коментувати знову. Чи потрібно йому знову вводити email та ім'я користувача?

У цьому випадку FastComments обробляє синхронізацію стану автентифікації між екземплярами віджета за вас. На четвертому кроці користувач вже буде тимчасово автентифікований, оскільки він ввів своє ім'я користувача та email на тій же сторінці.

Показ коментарів у реальному часі одразу

Віджет коментарів працює в реальному часі за замовчуванням, однак коментарі в реальному часі з'являються під кнопкою «Показати N нових коментарів», щоб запобігти зсуву вмісту сторінки.

У деяких випадках все ж бажано показувати нові коментарі одразу, без необхідності натискати кнопку.

У цьому випадку вам потрібно увімкнути прапорець showLiveRightAway, документацію по якому ви можете знайти тут.

Дозвіл анонімного коментування (без вимоги email)

За замовчуванням FastComments вимагає, щоб користувач залишив email при коментуванні.

Це можна вимкнути, інструкції тут.

Користувацька стилізація

Багато наших клієнтів застосовують власні стилі до віджета коментарів. Ви можете знайти документацію тут.

Показ одних і тих же коментарів на кількох доменах

Показ одних і тих же коментарів на кількох сайтах — це те, що FastComments підтримує з коробки. Дивіться нашу документацію з цієї теми.

Зміна поточної сторінки

FastComments підтримує SPA та складні застосунки. Зміна поточної сторінки проста і описана тут.