FastComments.com


Персонализация и конфигурация

Контекст

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

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

Ще бъдат предоставени примери с код, като релевантните редове ще бъдат маркирани. Ще бъдат показани и екранни снимки на страниците за конфигурация, където е приложимо.

Примерите с код ще използват нашата vanilla JavaScript библиотека, но опциите за конфигурация използват същите имена за всички версии на компонента за коментари (React, Vue, etc).

Повечето конфигурации и функции, описани в това ръководство, не изискват писане на код.


Изобразяване на същите коментари на различни страници Internal Link

Тъй като параметърът urlId ни позволява да определим към коя страница или id принадлежат коментарите, можем просто да зададем urlId със същата стойност на тези страници.

The Same Comments on Multiple Pages
Copy CopyRun External Link
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 "urlId": "https://example.com/source-page"
8}];
9</script>
10

Персонализирани шрифтове Internal Link

FastComments е предназначен да бъде персонализиран, а шрифтът, който използват нашите уиджети, не е изключение.

По подразбиране FastComments използва system font stack, за да изглежда възможно най-добре на широка гама от устройства.

За да дефинирате свои собствени шрифтове, вижте Документация за персонализиран CSS.

Там ще намерите начин за дефиниране на персонализиран CSS, който ще ви позволи да зададете желаните шрифтове.

Как да зададете шрифта

За да презапишете шрифта, препоръчваме да дефинирате своя CSS, използвайки селекторите .fast-comments, textarea. Например:

Пример за персонализиран външен шрифт
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

Поддръжка на тъмен фон (тъмен режим) Internal Link

По подразбиране компонентът за коментари на FastComments автоматично ще открива тъмен режим в повечето сайтове.

Когато се засече тъмен режим, FastComments ще премине от черен текст на бял фон към бял текст на черен фон. Снимките също ще се променят.

При зареждане на страницата уиджетът ще опита да определи колко тъмен е фонът на страницата зад коментарния уиджет. Това означава, че страницата може да има бял фон, но ако поставите коментарния уиджет в контейнер с черен фон, тъмният режим би трябвало все пак да се активира автоматично, за да направи коментарите четими.

Въпреки това, механизмът за откриване, който разчита на определяне на „луминанс“, може да не активира тъмния режим когато искате. За да го активирате насилствено, задайте флага hasDarkBackground на true както следва:

Force Dark Background Mode
Copy CopyRun External Link
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 "hasDarkBackground": true
8}];
9</script>
10

Свързване на коментари със страници Internal Link

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

Ако URL ID не винаги е реално ID, тогава трябва да съхраним URL някъде другаде. За това служи свойството "url", дефинирано по следния начин.

Defining a Custom URL
Copy CopyRun External Link
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 "url": "https://example.com/article-5"
8}];
9</script>
10

Често срещан случай на употреба е свързването на нишката с коментари със идентификатор, например статия, и след това връзка обратно към конкретна страница, например:

Defining Custom URL and URL IDs together
Copy CopyRun External Link
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 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

URL адресът не се почиства от общи маркетингови параметри. По подразбиране какъвто е текущият URL на страницата, такъв се съхранява с коментара.


Определяне коя страница да се изобрази Internal Link

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

Ако желаете, точната страница, която да бъде рендерирана, може да бъде предадена на уиджета за коментари като настройка startingPage.

Specifying The Page to Render
Copy CopyRun External Link
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 "startingPage": 1
8}];
9</script>
10

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

Превключване на нишки с коментари без презареждане на страницата Internal Link

Вече обяснихме как urlId е идентификаторът на страницата или статията, към която са свързани коментарите.

Също така, за да обобщим, ако не е дефиниран, urlId по подразбиране ще бъде текущият URL на страницата.

А какво за SPA, или Single-Page-Applications, при които страницата или съдържанието, към което са свързани коментарите, се променя динамично без презареждане на страницата?

Angular, React, Vue и др

С нашите библиотеки като Angular и React, просто обновяването на свойството urlId, което се подава на джаджата, ще накара джаджата за коментари да се обнови. Можете да видите това в действие за React приложението, например тук.

VanillaJS

Ако използвате библиотеката VanillaJS, това е малко по-сложно, тъй като няма рамка като Angular или React, която да обработва свързването на данни или разпространението на състоянието.

Когато инстанцирате VanillaJS джаджата, тя връща някои функции, които могат да бъдат извикани, за да я обновят.

Ето работещ пример, в който променяме хеша на страницата и обновяваме джаджата за коментари:

Пример за смяна на хеша на страницата
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // We update url, too, so notifications can link back to the right page
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

Деактивиране на пренасочване на изображения Internal Link

По подразбиране FastComments позволява на потребителите да качват изображения. Когато потребителят кликне върху това изображение, FastComments по подразбиране, ще отвори нов раздел, за да покаже изображението в пълен размер. Задаването на този флаг на true ще деактивира това поведение:

Disable Image Redirect
Copy CopyRun External Link
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 "disableImageRedirect": true
8}];
9</script>
10

Ако не възнамерявате сами да обработвате кликването върху изображението (вж. onImageClicked), препоръчваме това да се комбинира с някакво стилизиране за да се премахне впечатлението, че изображението може да бъде кликнато.

Открояване на новите коментари Internal Link


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

Първо и най-важно, по подразбиране коментарите, които са задействали вътреприложно известие (отговори, отговори в същата нишка, или коментари на страница, на която сте абонирани), автоматично ще бъдат подчертани с леко сияние около аватара на потребителя. Цветът може да бъде персонализиран чрез CSS, използвайки класа is-unread.

Коментарите, публикувани през последните 24 часа, имат приложен клас 24hr, който може да се използва за стилизиране.

Накрая, всички нови живи коментари, които се появят в сесията на потребителя, ще бъдат подчертани за няколко секунди чрез анимация. Това се осъществява чрез CSS класа is-live и също може да бъде персонализирано.


Шаблони за имейли Internal Link


Имейлите, изпращани от FastComments до вашите клиенти, могат да бъдат персонализирани. Шаблонът, логиката, и преводите могат да бъдат променени. Текстът може да бъде персонализиран за всеки локал, а стилирането може дори да бъде променяно за всеки домейн. Научете повече за персонализираните имейл шаблони тук.


Нови коментари в реално време в долната част Internal Link

По подразбиране новите живи коментари се появяват най-горе в списъка с коментари, когато са публикувани в реално време.

Когато тази опция е включена, новите живи коментари ще се добавят в долната част на списъка вместо това. Това влияе на начина, по който коментарите се показват, когато са публикувани в реално време, докато потребителите разглеждат нишката с коментари.

New Live Comments to Bottom
Copy CopyRun External Link
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 "newCommentsToBottom": true
8}];
9</script>
10

С тази настройка включена:

  • Новите живи коментари, публикувани от други потребители, ще се появяват в долната част на списъка с коментари
  • Потребителите ще виждат как новите коментари се появяват под вече съществуващите коментари в реално време
  • Това влияе само на актуализациите на живите коментари - а не на първоначалното зареждане на страницата
  • Това може да помогне за запазване на потока на четене, когато потребителите следят дискусия

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

Активиране на безкрайно превъртане Internal Link

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

Въпреки това има случаи, в които е предпочитано безкрайно превъртане. Например, ние използваме тази функция в нашия продукт Stream Chat.

Можем да скрием бутоните "Прегледай следващите" и да превключим към безкрайно превъртане, като зададем флага enableInfiniteScrolling на true:

Enabling Infinite Scrolling
Copy CopyRun External Link
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 "enableInfiniteScrolling": true
8}];
9</script>
10

Това също изисква добавяне на персонализиран CSS. Добавете персонализиран CSS за селектора .comments, за да позволите превъртане, например:

Активиране на безкрайно превъртане
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

Пълният работещ пример би бил:

Enabling Infinite Scrolling
Copy CopyRun External Link
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 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

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

Изобразяване на всички коментари наведнъж - деактивиране на пагинацията Internal Link

За да деактивирате пагинацията и да покажете всички коментари наведнъж, задайте startingPage на -1.

Render All Comments
Copy CopyRun External Link
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 "startingPage": -1
8}];
9</script>
10

Предотвратяване на нови коментари от най-горно ниво Internal Link


Задаването на noNewRootComments на true ще накара джаджата да скрие областта за отговори на кореново ниво, но все пак ще позволи на потребителите да отговарят на подкоментари. Например, можете да зададете това условно при зареждане на страницата, за да позволите само на някои потребители да оставят коментари на най-горно ниво.

Prevent New Root Comments
Copy CopyRun External Link
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 "noNewRootComments": true
8}];
9</script>
10

Максимална дълбочина на отговорите Internal Link

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

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

Limiting Reply Depth to 2 Levels
Copy CopyRun External Link
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 "maxReplyDepth": 2
8}];
9</script>
10

С maxReplyDepth зададено на 2:

  • Потребителите могат да коментират на най-горното ниво (дълбочина 0)
  • Потребителите могат да отговарят на коментари от най-горното ниво (дълбочина 1)
  • Потребителите могат да отговарят на тези отговори (дълбочина 2)
  • Допълнителни отговори не са разрешени след дълбочина 2

Задаването на 1 би позволило само отговори на коментари от най-горното ниво, създавайки по-плитка структура на дискусията.

Задаването на maxReplyDepth на 0 ще деактивира всички отговори и ще позволява само коментари на най-горното ниво. Ако не е зададено, отговорите могат да се вграждат без ограничение.

Преглед на Еднократно влизане (SSO) Internal Link

SSO, или единно влизане (single-sign-on), е набор от конвенции, използвани за да позволят на вас или вашите потребители да използват FastComments без да се налага да създават още един акаунт.

Ако не позволявате анонимни коментари, акаунт е задължителен за коментиране с FastComments. Правим процеса на регистрация много лесен - потребителят просто оставя своя имейл, когато коментира. Разбираме обаче, че дори това може да е излишно препятствие, което някои сайтове искат да избегнат.

Можем да намалим това препятствие, като имате само един поток за влизане за целия си сайт.

How do I get it?

Всички типове акаунти в момента имат достъп до SSO. Въпреки това максималният брой SSO потребители ще варира в зависимост от вашия пакет. Както при другите функции, Pro плановете и по-високите предоставят директна разработчикова поддръжка.

Нека сравним опциите и после да разгледаме детайлите на всяка от тях.

User and Comment Migrations

Когато мигрирате от платформа със SSO като Disqus, вече ще имате потребители и техните коментари.

Коментарите се импортират като част от вашата миграция, или чрез API-то, нашия Import UI, или чрез поддръжката на клиенти. Import UI е предпочитан, ако поддържа платформата, от която мигрирате, тъй като включва обработка на грешки, извличане и качване на аватари и медии и система за наблюдение на пакетни задачи.

Самите потребители се добавят автоматично при първото разглеждане на нишки с коментари. Като алтернатива, те могат да бъдат предварително добавени чрез API-то, но тази работа няма много предимства.

Ако коментарите са импортирани и SSO потребителите не са добавени ръчно чрез API-то, тогава коментарите автоматично ще бъдат мигрирани към акаунта на потребителя при първото му създаване, когато разгледа някоя нишка с коментари. След това те ще могат да управляват, редактират и изтриват коментарите, които първоначално са написали.

Автоматичната миграция се прави чрез имейл или потребителско име. Някои платформи не предоставят имейли при експорта, като Disqus, така че в този случай използваме потребителското име.

  • Докато подадете съвпадащо потребителско име и имейл в SSO payload, ние ще добавим имейла към отделните обекти на коментарите, така че уведомленията и споменаванията да работят.

Ако желаете да импортирате коментарите и потребителите едновременно, работете с поддръжката, за да мигрирате коментарите към съответните акаунти на потребителите след като потребителите бъдат импортирани чрез API-то.

Като обобщение, най-лесният път за миграция е:

  1. Import comments.
    1. Аватарите и другите медии се мигрират автоматично ако използвате Import UI в Manage Data -> Imports.
  2. Настройте Secure или Simple SSO.
  3. Оставете миграцията да се случи по потребител автоматично при първото им влизане.
    1. Това обикновено добавя по-малко от секунда към времето за зареждане на страницата, ако потребителят има по-малко от 50k коментара.

WordPress Users

Ако използвате нашия WordPress плъгин, няма код за писане! Просто отидете на административната страница на плъгина, кликнете върху SSO Settings, и после Enable.

Това ще ви отведе до съветник с еднократно натискане на бутон, който ще създаде вашия API ключ, ще го изпрати към вашата WordPress инсталация и ще включи SSO. Консолидирали сме това в едно натискане на бутон за ваше улеснение.

Имайте предвид, че ако инсталирате плъгина за първи път ще трябва да завършите процеса на настройка преди да видите административната страница с бутона SSO Settings.

WordPress SSO - Moderators

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

Custom Integrations

За потребителски интеграции има две опции.

Option One - Secure SSO

С Secure SSO, FastComments знае, че потребителят, който коментира, гласува и чете коментари е реален потребител на вашия сайт.

Докато създадете валидна payload, потребителят винаги ще има безпроблемно изживяване при коментиране.

С Secure SSO, SSO payload се създава от страна на сървъра използвайки HMAC автентикация и след това се предава към widget-а на клиента.

С Secure SSO, акаунтът на потребителя е напълно отделен от останалата база потребители на FastComments. Това означава, че ако имаме двама партньори Company A и Company B, всеки може да има SSO потребител с потребителско име "Bob".

Requirements

  • Някои базови познания в бекенд разработка.
  • Някои базови познания при работа с тайни API ключове.
  • Някои базови познания относно разработка на API или рендериране от страна на сървъра.

Pros

  • Сигурно.
  • Безшевно изживяване при коментиране.

Cons

  • Изисква бекенд разработка.

Updating User Data

С Secure SSO, всеки път когато подадете sso user payload, ние ще обновим техния потребител с последната информация. Например, ако потребителят има потребителско име X, и в SSO payload подадете Y, неговото потребителско име ще стане Y.

Ако искате да премахнете стойности използвайки този подход, задайте ги на null (не на undefined).

Secure SSO API

Ние също предоставяме API за взаимодействие със SSO потребителите. Вижте the docs.

Имайте предвид, че при използване на Secure SSO, потребителите се създават автоматично зад кулисите при зареждане на страницата. Не е необходимо да правите масов импорт на вашите потребители.

Option Two - Simple SSO

Алтернативата на Secure SSO е просто да подадете информацията за потребителя към widget-а за коментари.

Подаването на имейл при Simple SSO не е задължително, но без него техните коментари ще се показват като "Unverified".

Забележка! От началото на 2022 г. потребителските имена при Simple SSO не е нужно да са уникални в целия FastComments.com.

Идеално би било Simple SSO да се избира само при разработка на платформа, която не предоставя достъп до бекенда.

Requirements

  • Някои базови познания по клиентска разработка.
  • Трябва да знаете поне имейла на потребителя.

Pros

  • Просто.
  • Всяка активност все още се верифицира.
  • Потребителят никога не въвежда своето потребителско име или имейл.

Cons

  • По-малко сигурно от Secure SSO, тъй като payload-ът от страна на клиента може да бъде създаден така, че да се представя за всеки потребител.

Simple SSO API

Потребителите, създадени автоматично чрез Simple SSO потока, се съхраняват като SSOUser обекти. Те могат да бъдат достъпвани и управлявани чрез SSOUser API. Вижте the docs.

Персонализирани интеграции - Просто еднократно влизане (SSO) Internal Link

С Simple SSO можем да предоставим на уиджета за коментари информация за потребителя, така че той да не трябва да въвежда потребителското си име или имейл, за да коментира.

Можем да конфигурираме Simple SSO по следния начин:

Simple SSO
Copy CopyRun External Link
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 "simpleSSO": {
8 "username": "Bob",
9 "email": "bob@example.com",
10 "avatar": "https://example.com/bob.png",
11 "websiteUrl": "https://example.com/profiles/bob",
12 "displayName": "Bob's Name",
13 "displayLabel": "VIP User",
14 "loginURL": "https://example.com/login",
15 "logoutURL": "https://example.com/logout",
16 "badgeConfig": {
17 "badgeIds": [
18 "badge-id-1",
19 "badge-id-2"
20 ],
21 "override": false
22 }
23 }
24}];
25</script>
26

Потребителят ще бъде влязъл и зад кулисите ще бъде създаден SSO потребител. Потребителят ще има createdFromSimpleSSO зададено като true, ако е извлечен от API-то.

Notes:

  • Имейлът е уникалният идентификатор за Simple SSO.
  • Предоставянето на имейл с Simple SSO не е задължително, но по подразбиране техните коментари ще се показват като "Непотвърдено". Ако не е предоставен имейл, потребителят не може да бъде напълно удостоверен.
  • НОВО От януари 2022 г.: Потребителските имена не е необходимо да бъдат уникални в целия fastcomments.com
  • Simple SSO може автоматично да създава и обновява SSO потребители, ако е предоставен имейл и потребителят не е бил първоначално създаден чрез Secure SSO.
  • Можете да зададете значки за потребителя чрез свойството badgeConfig. Масивът badgeIds съдържа идентификаторите на значките, които да се асоциират с потребителя. Ако override е зададено на true, то ще замени всички съществуващи значки, показвани върху коментарите; ако е false, то ще добави към вече съществуващите значки.

Персонализирани интеграции - Мигриране от Disqus SSO Internal Link

Най-голямата разлика между Disqus и FastComments Secure SSO е, че Disqus използва SHA1 за криптиране, докато ние използваме SHA256.

Това означава, че мигрирането от Disqus е лесно - променете използвания хеш алгоритъм от SHA1 на SHA256 и актуализирайте имената на свойствата, предавани на UI.

Персонализирани интеграции - Мигриране от Commento SSO Internal Link

Commento използва драстично различен SSO подход - те изискват да имате endpoint, който да извикат, за да удостоверят потребителя.

FastComments е обратното - просто кодирате и хеширате информацията за потребителя, използвайки вашия таен ключ, и я предавате.

Обратни повиквания Internal Link

Всички библиотеки за коментарния уиджет (в момента Angular, React, Vue) поддържат обратни извиквания.

Обратните извиквания се задават в конфигурационния обект и имат еднаква сигнатура за всяка библиотека.

Поддържаните обратни извиквания са:

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

Точните сигнатури могат да бъдат намерени в TypeScript дефиниции.

Ето пример с всички използвани обратни извиквания:

Примери за обратни извиквания
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
6 tenantId: 'demo',
7 onInit: function () {
8 console.log('Library started to fetch comments!');
9 },
10 onAuthenticationChange: function (eventName, userObj) {
11 console.log('User authenticated!', eventName, userObj);
12 },
13 onRender: function () {
14 console.log('Render event happened!');
15 },
16 commentCountUpdated: function (newCount) {
17 console.log('New comment count:', newCount);
18 },
19 onReplySuccess: function (comment) {
20 console.log('New comment saved!', comment);
21 },
22 onVoteSuccess: function (comment, voteId, direction, status) {
23 console.log('New vote saved!', comment, voteId, direction, status);
24 },
25 onImageClicked: function (src) {
26 console.log('Image clicked!', src);
27 },
28 onOpenProfile: function (userId) {
29 console.log('User tried to open profile', userId);
30 // return true; // return true, за да предотвратите подразбиращото се поведение (отваряне на потребителския профил на fastcomments.com).
31 },
32 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
33 console.log('Trying to submit comment', comment);
34 setTimeout(function() { // имитиране на асинхронно поведение (извикване на API и т.н.).
35 if(confirm('Should submit?')) {
36 continueSubmitFn();
37 } else {
38 cancelFn('Some optional error message');
39 }
40 }, 1000);
41 },
42 onCommentsRendered: function(comments) {
43 // comments е сортиран според подразбиращото се сортиране на страницата, което може да бъде Most Relevant (напр. най-много гласове и т.н.) или Newest First
44 const topCommentInList = comments[0];
45 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
46 }
47 });
48</script>
49

Заглавия на страници Internal Link

Текущото заглавие на страницата е свързано с посочения urlId и се запазва за използване в инструментите за модериране.

По подразбиране това се извлича от document.title.

Ако желаете, можете да зададете собствено заглавие на страницата, както следва:

Specifying The Page Title
Copy CopyRun External Link
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 "pageTitle": "Article 42"
8}];
9</script>
10

Брой коментари и броене на всички вложени отговори Internal Link

Броят на коментарите, показван в горната част на уиджета за коментари, може да показва или всички "top-level" коментари, което означава тези отговори, които са отговори директно към страницата или самата статия, или може да бъде брой на всички вложени коментари.

По подразбиране това е true - това е брой на последното - всички коментари. В по-старите версии на уиджета за коментари стойността по подразбиране е false.

Можем да променим поведението, така че то да бъде брой на всички вложени коментари, като зададем флага countAll на true.

Counting All Comments
Copy CopyRun External Link
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 "countAll": true
8}];
9</script>
10

Ако искаме броят да отразява само коментарите от най-горно ниво, задаваме флага на false.

Counting Top Level Comments
Copy CopyRun External Link
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 "countAll": false
8}];
9</script>
10

В момента това не може да бъде персонализирано без промени в кода.

Идентификатори на групи за споменаване Internal Link

Списък с идентификатори за използване при автоматично допълване на @mentions. Полезно, когато искате да предотвратите маркирането на потребители, които нямат пресичащи се групи.

Когато е зададено, в автоматичното допълване ще се показват само потребители от други групи след въвеждане на символа @.

Limit Groups for Mentions
Copy CopyRun External Link
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 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13