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 — live-комментирование, 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 here.

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

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