FastComments.com


Встановлення

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


WordPress Internal Link

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

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

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

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

VanillaJS / HTML-фрагмент Internal Link

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

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

Простий фрагмент коду
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

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

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

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

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

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

Angular Internal Link

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

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

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

FastComments Angular через NPM
Copy Copy
1
2 npm install fastcomments-typescript --save
3 npm install ngx-fastcomments --save
4

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

Додавання peer-залежності fastcomments-typescript
Copy Copy
1
2"include": [
3 "src/**/*.ts",
4 "node_modules/fastcomments-typescript/src/index.ts"
5],
6

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

Додавання модуля у ваш застосунок
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

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

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

Використання - Вбудована конфігурація
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>
3

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

Використання - Передача об'єкта для конфігурації
Copy Copy
1
2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>
3
Використання - ЄС
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>
3

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

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

React Internal Link

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

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

FastComments React через NPM
Copy Copy
1
2npm install --save fastcomments-react
3
FastComments React через Yarn
Copy Copy
1
2yarn add fastcomments-react
3
Приклад React
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

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

Приклад React - ЄС
Copy Copy
1
2 <FastCommentsCommentWidget tenantId="demo" region="eu" />
3

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

Vue Internal Link

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

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

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

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

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

FastComments Vue через NPM
Copy Copy
1
2npm install --save fastcomments-vue-next
3
FastComments Vue через Yarn
Copy Copy
1
2yarn add fastcomments-vue-next
3
Приклад Vue
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

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

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

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

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

TypeScript Internal Link

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

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

Кілька екземплярів на одній сторінці Internal Link

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

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

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

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

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

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

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

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

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

Типові випадки використання Internal Link

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

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

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

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

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

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

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

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

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

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

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

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

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