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 Embed Code». Выберите её и вставьте приведённый выше фрагмент кода.

Вам также не нужен аккаунт, чтобы попробовать! Может появиться строка "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

Плеер-зависимость должна быть добавлена в ваш 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

Использование

Для начала мы передаём объект конфигурации для демонстрационного tenant:

Использование - Встроенная конфигурация

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

The fastcomments-vue and fastcomments-vue-next libraries support the same configuration as the VanillaJS commenting widget.

You can find the configuration the Vue component supports here.

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