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 commenting, sso, и т.н.

Ще ви трябва fastcomments-typescript, който е peer dependency. Моля, уверете се, че това е включено в компилацията ви на TypeScript. В бъдеще тази peer dependency ще бъде преместена в @types/fastcomments, което ще опрости тази инсталация.

FastComments за Angular чрез NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

Този peer dependency трябва да бъде добавен във вашия tsconfig.json файл, например:

Добавяне на peer dependency 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

Използване - EU

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

3

Уиджът използва откриване на промени (change detection), така че промяната на произволно свойство на конфигурационния обект ще го презареди.

Можете да намерите конфигурацията, която 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.

Коментарният widget 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 поддържат същата конфигурация като коментарния widget на VanillaJS.

Можете да намерите конфигурацията, която Vue компонентът поддържа, тук.

TypeScript дефинициите за FastComments, които включват типове за цялата конфигурация, подавана на уиджета за коментари, могат да бъдат намерени в NPM тук.

Можете да ги намерите в GitHub тук.

Всяка инстанция на уиджета за коментари е изолирана. Поради това FastComments по природа поддържа повече от една инстанция на страница или множество инстанции, сочещи към една и съща чат нишка.

В случая на VanillaJS библиотеката например, просто трябва да свържете уиджета за коментари с различни DOM възли. Ако искате просто да актуализирате текущата нишка на страницата, вижте Превключване на нишки за коментари без презареждане на страницата;

Синхронизиране на състоянието на удостоверяване между множество инстанции

Нека разгледаме примера на персонализирано едностранично приложение, което е списък с често задавани въпроси със собствена нишка за коментари.

В този случай имаме множество инстанции на FastComments в DOM едновременно.

Това е добре, но създава някои предизвикателства за потребителското изживяване.

Разгледайте този поток:

1. Потребителят посещава страницата със списък от въпроси, всеки със собствен уиджет за коментари.
2. Потребителят въвежда потребителското си име и имейл и оставя въпрос в една от нишките.
3. Вижда друг елемент от ЧЗВ, за който има въпрос.
4. Отива да коментира отново. Трябва ли да въведе имейла и потребителското си име отново?

В този случай FastComments се грижи за синхронизирането на състоянието на удостоверяване между инстанциите на уиджета вместо вас. В четвъртата стъпка потребителят вече ще бъде временно удостоверен, тъй като е въвел потребителското си име и имейл на същата страница.

Показване на коментари в реално време веднага

Уиджетът за коментари е в реално време по подразбиране, но коментарите в реално време се появяват под бутон "Покажи N нови коментари", за да се предотврати преместването на съдържанието на страницата.

В някои случаи все пак е желателно да се показват новите коментари веднага, без да се налага да се кликва бутон.

В този случай ще искате да активирате флага showLiveRightAway, документацията за който можете да намерите тук.

Разрешаване на анонимно коментиране (без изискване на имейл)

По подразбиране FastComments изисква потребителят да остави имейл при коментиране.

Това може да бъде деактивирано, инструкциите са тук.

Персонализиран стил

Много от нашите клиенти прилагат собствен стил към уиджета за коментари. Можете да намерите документацията тук.

Показване на едни и същи коментари на множество домейни

Показването на едни и същи коментари на множество сайтове е нещо, което FastComments поддържа веднага. Вижте нашата документация по тази тема.

Промяна на текущата страница

FastComments поддържа SPA и сложни приложения. Промяната на текущата страница е лесна и е разгледана тук.