Add Comments To a Website

Щоб додати коментарі на ваш сайт WordPress, ви можете знайти наш плагін WordPress тут.

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

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

Усі коментарі, залишені через плагін FastComments для WordPress, можуть автоматично синхронізуватися назад у вашу установку WordPress

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

Версія віджета на VanillaJS — найпростіший спосіб додати коментарі на ваш вебсайт, без необхідності систем збірки чи серверного коду.

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

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

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

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

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

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

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

Щоб додати коментарі на сайт, створений за допомогою Angular, ви можете знайти нашу бібліотеку 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, ви можете знайти нашу 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, ви можете знайти нашу бібліотеку 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 та складні застосунки. Зміна поточної сторінки проста і описана тут.