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 и сложные приложения. Изменение текущей страницы простое и описано здесь.