Настройки и конфигурация

Настройки и конфигурация

Контекст

Здесь вы найдете подробную документацию по каждой из функций и параметров, которые поддерживает виджет комментариев.

Эта документация охватит основные концепции и подробно рассмотрит каждую область функциональности, с практическими руководствами и типичными подводными камнями.

Будут приведены примеры кода с выделением соответствующих строк. По возможности будут предоставлены скриншоты страниц настроек.

Примеры кода будут использовать нашу библиотеку на чистом JavaScript, однако параметры конфигурации используют точно такие же имена во всех версиях виджета комментариев (React, Vue и т.д.).

Большинство настроек и функций, описанных в этом руководстве, не требуют написания кода.

Идентификация вашего аккаунта

Возможно, вы заметите, что виджет комментариев можно использовать с Tenant ID "demo", например:

Demo Tenant ID

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo"
}];
</script>

Это предназначено только для опробования и экспериментов с виджетом комментариев. В рабочем окружении вы должны передать ваш Tenant ID следующим образом:

Defining Your Tenant ID

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "aKa2Z4Q="
}];
</script>

Ваш Tenant ID уже может быть указан в фрагменте кода виджета комментариев в вашей учетной записи: фрагмент кода в вашей учетной записи.

Вы также можете найти свой Tenant ID и управлять ключами API на странице учетных данных API.

Начиная с этого момента, если вы вошли в FastComments, примеры кода будут использовать ваш реальный Tenant ID (если вы вошли на https://fastcomments.com).

Как комментарии связаны со страницами и статьями

При отображении ветки комментариев или оставлении комментария FastComments необходимо знать, к какой странице, статье или продукту принадлежат эти комментарии.

Для этого мы используем то, что называем «URL ID». Это может быть идентификатор, например строка или число, либо URL.

По умолчанию, если вы не укажете urlId, он будет равен URL страницы. Мы возьмём текущий URL страницы и очистим его, удалив любые распространённые маркетинговые параметры или идентификаторы отслеживания.

В случае сторонних интеграций, таких как WordPress, наш плагин обычно будет использовать идентификатор, представляющий текущую просматриваемую информацию, в качестве URL ID, например идентификатор статьи/страницы.

Определение пользовательского URL ID

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "urlId": "https://example.com/page"
}];
</script>

Одна вещь, которую мы часто будем упоминать в этом документе, — это Widget Customization UI.

Этот интерфейс можно использовать для внесения множества изменений в виджет комментариев без написания кода.

При создании правила настройки мы часто хотим, чтобы оно применялось ко всем страницам нашего сайта. Однако в некоторых случаях мы хотим настроить виджет комментариев на конкретной странице, например, применить пользовательские стили или сделать комментарии на этой странице анонимными. Вы также можете, например, отображать живые комментарии сразу на некоторых страницах, а на других скрывать их за кнопками уведомлений.

Все это возможно с помощью поля ввода URL ID на этой странице, которое выглядит следующим образом:

Поле ввода URL ID на странице настройки виджета

External Link

Поле URL ID, используемое для ограничения правила настройки одной страницей или шаблоном, например */blog/*

Значение в этом поле должно соответствовать параметру urlId, передаваемому в виджет комментариев. Если вы хотите, чтобы ваше правило настройки было независимым от urlId, оставьте это поле пустым или введите *.

Начиная с 2023 года поле URL ID в настройке виджета теперь также принимает шаблоны! Например, вы можете использовать */blog/* для добавления стилей, специфичных для вашего блога, и */store/* для стилей, специфичных для вашего магазина, при этом используя один и тот же домен.

Подводные камни

Если на вашей странице есть хеш‑параметры (например example.com#page-1) — они по умолчанию станут частью URL ID.
Во время миграций, например из WordPress в Gatsby, вам может потребоваться перенести значения комментариев URL ID после первоначальной миграции. Для этого свяжитесь с нами.

Отображение одних и тех же комментариев на разных страницах

Поскольку параметр urlId позволяет нам определить, к какой странице или идентификатору привязаны комментарии, мы можем просто установить urlId с тем же значением на этих страницах.

The Same Comments on Multiple Pages

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "urlId": "https://example.com/source-page"
}];
</script>

Пользовательские стили

FastComments разработан с учётом возможности кастомизации. Сам виджет комментариев работает внутри iframe по соображениям безопасности, поэтому для применения пользовательских стилей необходимо воспользоваться одним из двух подходов.

Первый, самый простой подход, который мы предпочитаем, — использовать страницу настройки виджета.

На странице настройки виджета откройте раздел «Показать расширенные параметры», под которым находится область с надписью «Пользовательский CSS»:

Область ввода пользовательского CSS

External Link

Редактор пользовательского CSS под опцией «Показать расширенные параметры» на странице настройки виджета

Этот подход имеет несколько преимуществ:

Введённый CSS минифицируется перед отправкой пользователю, а форматирование сохраняется в интерфейсе редактирования.
Вы получаете все возможности UI настройки виджета, например лёгкую кастомизацию виджета комментариев для разных сайтов.
Когда мы вносим изменения в виджет комментариев, ваша пользовательская стилизация будет протестирована в рамках нашего процесса релиза.

Второй подход — указать параметр customCSS в конфигурации виджета, как показано ниже:

Передача пользовательского CSS

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "customCSS": "button { background: red; }"
}];
</script>

Однако у этого метода есть ограничения:

Существует лимит на объём пользовательского CSS, который можно передать, прежде чем наши серверы отклонят запрос из‑за размера заголовков.
Вы должны управлять пользовательским CSS в своей инфраструктуре и системе сборки. Это может быть как плюсом, так и минусом.
При таком использовании происходит дополнительная передача пользовательского CSS по сети дважды: сначала к нашим серверам, затем обратно в содержимое iframe. Для большинства размеров полезной нагрузки это незаметно.
Часто применяется оптимизация — минификация CSS для уменьшения его размера в сети, однако при этом подходе вам придётся заниматься этим самостоятельно.
Ваш пользовательский CSS не будет протестирован при изменениях со стороны нашей команды.

Внешние файлы CSS

Вы можете заставить виджет загружать внешний файл, используя @import!

Рекомендуется помещать @import в правило кастомизации. Таким образом, если нам понадобится изменить виджет комментариев, мы сможем с помощью нашей автоматизации проверить вашу настройку. Например, вы создаёте правило кастомизации в UI настройки виджета, нажимаете «Расширенные» и вводите в поле «Пользовательский CSS»:

@import url(https://example.com/styles.css);

В коде — не рекомендуется

Также можно загрузить внешний CSS‑файл через свойство customCSS:

Внешний CSS‑файл

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "customCSS": "@import url(https://example.com/styles.css);"
}];
</script>

Однако помните, что ваш CSS не будет протестирован нами, если вы используете этот способ.

Стилизация модального окна профиля пользователя

Модальные окна профиля пользователя также можно стилизовать с помощью пользовательского CSS. Чтобы гарантировать применение стилей к профилям, все CSS‑селекторы должны начинаться с .user-profile. Без этого префикса пользовательские стили будут игнорироваться для модальных окон профиля.

Пример:

CSS профиля пользователя

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "customCSS": ".user-profile .profile-name { color: blue; }"
}];
</script>

Обратная совместимость

В FastComments мы знаем, что наши клиенты кастомизируют виджет комментариев. Это задумано специально — последнее, чего мы хотим, это чтобы наш продукт вызывал несоответствия в дизайне вашего продукта.

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

Если мы обнаружим мелкие проблемы, мы обновим ваш аккаунт, чтобы обеспечить плавный релиз. Если же мы увидим серьёзные несовместимости, это позволит нам приостановить выпуск.

Пользовательские шрифты

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

По умолчанию FastComments использует system font stack чтобы выглядеть максимально хорошо на широком спектре устройств.

Чтобы задать собственные шрифты, см. документацию по Custom CSS.

Там вы найдете способ задать пользовательский CSS, который позволит использовать нужные вам шрифты.

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

Чтобы переопределить шрифт, мы рекомендуем задать ваш CSS с использованием селекторов .fast-comments, textarea. Например:

Пример внешнего шрифта

Copy

Copy

External Link

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
.fast-comments, textarea {
    font-family: 'Roboto', sans-serif;
}

Удаление брендинга

Для клиентов с тарифами Pro или Enterprise разрешена белая маркировка. Просто свяжитесь с нами, и мы будем рады помочь.

Если вы просто хотите удалить наш логотип из виджета комментариев, это автоматически включено в тарифах Flex и Pro.

Эти тарифы также предоставляют ту же функциональность для электронных писем, отправляемых с нашей платформы.

Поддержка тёмных фонов (тёмная тема)

По умолчанию виджет комментариев FastComments будет автоматически определять тёмную тему на большинстве сайтов.

Когда обнаруживается тёмная тема, FastComments переключится с чёрного текста на белом фоне на белый текст на чёрном фоне. Изображения также будут изменяться.

При загрузке страницы виджет попытается определить, насколько тёмный фон страницы позади виджета комментариев. Это означает, что страница может иметь белый фон, но если вы поместите виджет комментариев внутри контейнера с чёрным фоном, тёмная тема всё равно должна автоматически включиться, чтобы комментарии были читаемы.

Однако механизм определения, который опирается на вычисление «люминанса», может не включить тёмную тему тогда, когда вы этого хотите. Чтобы принудительно включить её, установите флаг hasDarkBackground в true следующим образом:

Force Dark Background Mode

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "hasDarkBackground": true
}];
</script>

Переключение тёмной темы

Для сайтов, которые позволяют переключать тёмный режим после первоначальной загрузки страницы, это требует дополнительных действий.

Во-первых, во всех текущих версиях библиотеки Comment widget (React, Vue) есть примеры переключения тёмного режима в соответствующих репозиториях.

Для виджета VanillaJS потребуется немного больше работы. Во-первых, FastCommentsUI возвращает объект с функциями "destroy" и "update".

Мы можем просто вызывать функцию update каждый раз, когда нужно обновить конфигурацию виджета комментариев, как показано ниже. Ниже приведён полностью рабочий пример переключения тёмного режима с помощью виджета VanillaJS.

Полный пример переключения тёмного режима

Copy

Copy

External Link

<script src="https://fastcomments.com/js/embed-v2.min.js"></script>
<button id="toggle-dark-mode">Toggle Dark Mode</button>
<div id="fastcomments-widget"></div>
<script>
    (function() {
        const button = document.getElementById('toggle-dark-mode');
        const config = {
            tenantId: 'demo',
            hasDarkBackground: false
        };
        const instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
        button.addEventListener('click', function() {
            config.hasDarkBackground = !config.hasDarkBackground;
            if (config.hasDarkBackground) {
                document.body.classList.add('dark');
            } else {
                document.body.classList.remove('dark');
            }
            instance.update(config);
        });
    })();
</script>
<style>
    body.dark {
        background: #000;
        color: #fff;
    }
</style>

Переопределение текста

С FastComments весь текст в виджете комментариев настраиваемый.

Вы можете переопределить отдельный фрагмент текста, например кнопку отправки, или весь текст во всём виджете комментариев.

По умолчанию текст в виджете комментариев переводится в соответствии с локалью пользователя. Однако мы можем переопределить текст, если уверены, что наша пользовательская база использует одну и ту же локаль/язык, например:

Пользовательский текст

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "translations": {
        "SUBMIT_REPLY": "Reply"
    }
}];
</script>

Все настраиваемые переводы можно найти здесь во вкладке «расширенные параметры» tab.

Однако есть более простой способ, через пользовательский интерфейс настройки виджета. В нем мы можем просто найти текст, который отображается в виджете комментариев в локали EN_US, и указать замену.

Пользовательский текст

External Link

Панель пользовательского текста с выбранной из выпадающего списка строкой виджета и полем для замены текста

Все переопределения переводов в настоящее время влияют на все локали.

Изменение аватара по умолчанию

Когда пользователь впервые комментирует с FastComments, мы попытаемся получить его аватар с https://gravatar.com/.

Однако, если мы не найдем аватар, или пользователь никогда не задает его в своей учетной записи, мы отображаем статическое изображение аватара по умолчанию.

Чтобы указать собственное статическое изображение аватара, можно использовать настройку defaultAvatarSrc.

Переопределить аватар по умолчанию

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "defaultAvatarSrc": "https://example.com/some-image.png"
}];
</script>

Это также можно сделать без кода. На странице настройки виджета смотрите раздел «Default Avatar».

Настройка аватара по умолчанию

External Link

Обратите внимание, что определение аватара для конкретного пользователя, например с помощью SSO, рассматривается в отдельном разделе.

Отключение аватаров

Аватары могут быть полностью удалены из виджета комментариев, даже если пользователи задали собственный аватар.

Hiding Avatars

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "hideAvatars": true
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Скрытие аватаров

External Link

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

Отключение всех стандартных стилей

Для более крупных проектов пользовательского стилирования может быть желательно начать с чистого листа и полностью отказаться от использования стилей по умолчанию.

All default styling can be removed by setting the noStyles parameter to true, as follows:

Disabling All Default Styles

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "noStyles": true
}];
</script>

Это можно настроить без кода на странице настройки виджета в разделе Advanced Options:

Отключение всех стилей по умолчанию

External Link

Флажок отключения всех стилей по умолчанию, включенный в разделе «Дополнительные параметры» на странице настройки виджета

Связывание комментариев со страницами

При отправке уведомлений по электронной почте или при отображении комментариев в пользовательских интерфейсах, таких как страница модерации, полезно иметь возможность ссылаться из комментария на страницу, где он размещён.

Если URL ID не всегда является идентификатором, то нам нужно хранить URL в другом месте. Для этого и существует свойство "url", определённое следующим образом.

Defining a Custom URL

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "url": "https://example.com/article-5"
}];
</script>

Типичный сценарий использования — привязать поток комментариев к некоторому идентификатору, например статье, а затем ссылаться обратно на конкретную страницу, например:

Defining Custom URL and URL IDs together

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "url": "https://example.com/article-5",
    "urlId": "article-5"
}];
</script>

URL не очищается от распространённых маркетинговых параметров. По умолчанию, какой бы ни был URL текущей страницы, именно он сохраняется вместе с комментарием.

Сворачивать ответы по умолчанию

По умолчанию ответы к комментариям верхнего уровня отображаются.

Это можно настроить так, чтобы пользователь должен был нажать «Show Replies» на комментариях верхнего уровня, чтобы увидеть дочерние.

Свернуть ответы к комментариям верхнего уровня

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "collapseReplies": true
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Свернуть ответы

External Link

Опция свертывания ответов в пользовательском интерфейсе настройки виджета, скрывающая дочерние комментарии за ссылкой «Show Replies»

Эта настройка не повлияет на количество загружаемых изначально комментариев верхнего уровня. Если у вас один комментарий верхнего уровня и 29 дочерних, при включённой этой настройке вы:

Видите комментарий верхнего уровня.
Видите «Show Replies (29)» под этим комментарием.

Если вы хотите показывать все комментарии верхнего уровня в сочетании с этой опцией, установите starting page to -1.

Включить визуальный редактор (WYSIWYG)

По умолчанию функции форматирования в FastComments реализуются добавлением видимых тегов‑якорей, таких как <b></b>, вокруг вашего текста. Нажатие на панель инструментов или использование сочетаний клавиш делает это за вас. Однако некоторые сообщества могут захотеть использовать форматирование без тегов‑якорей. Это называется включением WYSIWYG (what you see is what you get) редактора. Этот редактор выглядит точно так же, как и редактор по умолчанию, за исключением того, что он загружает дополнительный код, позволяющий пользователям делать полужирный, подчёркнутый и т.д. текст без видимых тегов‑якорей.

Включение редактирования WYSIWYG

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableWYSIWYG": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета смотрите опцию "Enable Advanced Formatting".

Включить WYSIWYG

External Link

Страница настройки виджета с отмеченным флажком Enable Advanced Formatting для включения редактора WYSIWYG

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

Эту панель можно отключить в коде или с помощью пользовательского интерфейса настройки.

Это также можно сделать без кода. На странице настройки виджета смотрите опцию «Disable The Reply Toolbar» option.

Отключение панели инструментов

External Link

Страница настройки виджета с отмеченным флажком Disable The Reply Toolbar для удаления быстрых клавиш форматирования

Отключение блокировки

По умолчанию FastComments позволяет пользователям блокировать других пользователей. Блокировка пользователя приведёт к маскированию их комментариев, предотвратит уведомления между пользователями и т.д.

Возможно, потребуется отключить эту функцию. Это можно сделать следующим образом:

Отключить блокировку

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableBlocking": true
}];
</script>

Это также можно сделать без кода, что обеспечивает правильную серверную проверку, через пользовательский интерфейс настройки виджета:

Отключить блокировку

External Link

Опция отключения блокировки в пользовательском интерфейсе настройки виджета, которая предотвращает блокировку пользователей друг другом

Определение, какую страницу отображать

При получении и отображении комментариев виджету комментариев нужно знать, с какой страницы начинать. По умолчанию он начинает с первой страницы и отображает только эту страницу.

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

Specifying The Page to Render

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "startingPage": 1
}];
</script>

Обратите внимание, что нумерация страниц начинается с нуля, поэтому приведённый выше пример отображает вторую страницу.

Переключение потоков комментариев без перезагрузки страницы

Мы уже объясняли, что urlId — это идентификатор страницы или статьи, к которой привязаны комментарии.

Также, напомним, если urlId не задан, он по умолчанию будет равен текущему URL страницы.

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

Angular, React, Vue и т. д.

В наших библиотеках, таких как Angular и React, простое обновление свойства urlId, передаваемого виджету, вызывает обновление виджета комментариев. Например, вы можете увидеть это в действии для React-приложения здесь.

VanillaJS

Если вы используете библиотеку VanillaJS, это немного сложнее, так как нет фреймворка вроде Angular или React, который бы обрабатывал привязку данных или распространение состояния.

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

Вот рабочий пример, в котором мы меняем хэш страницы и обновляем виджет комментариев:

Пример переключения хэша страницы

Copy

Copy

External Link

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<button id="change-page"></button>
<div id="fastcomments-widget"></div>
<script>
    (function fastCommentsMain() {
        let config = {
            tenantId: 'demo'
        };
        let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
        let page = '#page-1';
        function getNextPage() {
            if (page === '#page-1') {
                return '#page-2';
            } else {
                return '#page-1';
            }
        }
        let button = document.getElementById('change-page');
        function nextPage() {
            page = getNextPage();
            button.innerText = 'Go to ' + getNextPage();
            window.location.hash = page;
            let locationString = window.location.toString();
            config.url = locationString; // We update url, too, so notifications can link back to the right page
            config.urlId = locationString;
            instance.update(config);
        }
        nextPage();
        button.addEventListener('click', nextPage);
    })();
</script>

Абсолютные даты (отключить удобочитаемые метки времени)

По умолчанию используются локализованные относительные даты. Например, рядом с недавно оставленным комментарием вы можете увидеть "11 минут назад".

Может потребоваться или быть желательным использовать абсолютные даты, в этом случае вы устанавливаете этот параметр в true.

Использовать абсолютные даты

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "absoluteDates": true
}];
</script>

Это можно настроить без кода, на странице настройки виджета, в разделе Advanced Options:

Использовать абсолютные даты

External Link

Advanced Options на странице настройки виджета с включённым переключателем абсолютных дат

Показать как абсолютные, так и относительные даты

По умолчанию используются локализованные относительные даты. Например, рядом с недавно оставленным комментарием вы можете увидеть «11 минут назад».

Возможно, потребуется или захотите сохранить этот относительный формат даты, но также отображать полную дату рядом с ним, в этом случае вы устанавливаете этот параметр в true.

Use Both Absolute and Relative Dates

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "absoluteAndRelativeDates": true
}];
</script>

Это можно настроить без кода на странице настройки виджета в разделе Advanced Options. Сначала вам нужно включить Absolute Dates, чтобы увидеть эту опцию в пользовательском интерфейсе.

Использовать как абсолютные, так и относительные даты

External Link

Advanced Options на странице настройки виджета с включёнными как абсолютными датами, так и объединённой настройкой относительной даты

Добавление заголовочного текста

Некоторый текст, например заголовок или сообщение, может отображаться ниже количества комментариев, но выше текста статуса входа.

Мы называем это заголовком, и по умолчанию он скрыт.

Specifying Header HTML

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "headerHTML": "<h1>Leave a Comment!</h1>"
}];
</script>

Это можно настроить без кода на странице настройки виджета, в разделе Расширенные параметры:

Указание HTML заголовка

External Link

Область Расширенных параметров на странице настройки виджета, где вводится пользовательский HTML заголовка

Отображать ссылки как текст

По умолчанию FastComments будет отображать ссылки так: https://exmaple.com — где URL ссылки превращается в кликабельный HTML‑тег якоря.

Некоторые сайты могут захотеть отключить это, например, чтобы препятствовать мошенникам. Мы предоставляем эту возможность, установив Comment HTML Rendering Option в Links as Text.

Это можно настроить без кода на странице настройки виджета для всего домена или отдельной страницы:

Отображать ссылки как текст

External Link

Опция рендеринга HTML комментариев установлена в Links as Text в разделе Расширенные параметры настройки виджета

Переключение комментариев кнопкой

По умолчанию FastComments отображает поле ввода комментария и ветку комментариев одновременно. Чтобы сэкономить вертикальное пространство, он также скрывает все остальные обязательные поля, пока пользователь не взаимодействует с виджетом.

Однако виджет комментариев может быть скрыт за кнопкой, например:

Нажмите, чтобы показать комментарии

External Link

Виджет комментариев свернут за кнопкой, которая показывает количество комментариев, пока читатель не нажмёт её

Кнопка использует разный переводимый текст в зависимости от того, отображаются ли комментарии в данный момент. Если комментарии скрыты, используется translations.SHOW_COMMENTS_BUTTON_TEXT. Если комментарии отображаются, используется translations.HIDE_COMMENTS_BUTTON_TEXT. Переводы могут содержать текст [count], который будет заменён локализованным счётчиком.

Нажмите, чтобы показать или скрыть комментарии

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "useShowCommentsToggle": true
}];
</script>

Это предназначено для замены конфигурации hideCommentsUnderCountTextFormat.

Счётчик обновляется в реальном времени вместе с веткой комментариев. Кнопка не отображается, если комментариев нет.

Это можно включить без кода, создав правило настройки и включив «Показать комментарии по нажатию»:

Включить показ комментариев по нажатию

External Link

Флажок «Показать комментарии по нажатию» отмечен в правиле настройки на странице настройки виджета

Настройка текста счётчика комментариев

Отображаемое количество комментариев в верхней части виджета комментариев можно настроить.

Это можно заменить любой строкой, и значение [count] будет заменено на количество комментариев, локализованное для пользователя.

Настройка текста количества комментариев

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "commentCountFormat": "There are [count] comments."
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Настройка текста количества комментариев

External Link

Поле текста количества комментариев на странице настройки виджета, где [count] заменяется текущим общим числом

Отключить перенаправление изображений

По умолчанию FastComments позволяет пользователям загружать изображения. Когда пользователь нажимает на изображение, FastComments по умолчанию откроет новую вкладку, чтобы показать это изображение в полном размере. Установка этого флага в true отключает это поведение:

Disable Image Redirect

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableImageRedirect": true
}];
</script>

Если вы не планируете обрабатывать щелчок по изображению самостоятельно (см. onImageClicked), мы рекомендуем сочетать это с применением стилей, чтобы убрать видимость того, что изображение можно нажать.

Отключить автоматическое создание хэштегов

Когда пользователи вводят хэштеги в виде #someexampletag, FastComments автоматически создаст этот HashTag и выделит его в их комментарии.

В некоторых случаях может потребоваться отключить эту функцию или управлять тем, какие хэштеги можно использовать через API.

Для этого просто включите Disable Automatic #hashtag Creation через пользовательский интерфейс настройки виджета.

Отключение автоматического создания HashTag

External Link

Опция отключения автоматического создания #hashtag включена в пользовательском интерфейсе настройки виджета

Отключить значок уведомлений

По умолчанию FastComments будет показывать значок уведомления в правом верхнем углу области комментариев.

Этот значок станет красным и покажет количество уведомлений у пользователя. Некоторые примеры уведомлений:

Пользователь ответил вам.
Пользователь ответил в ветке, в которой вы комментировали.
Пользователь проголосовал за ваш комментарий.
Пользователь ответил на страницу, на которую вы подписаны.

Значок уведомления также предоставляет механизм подписки на всю страницу.

Однако мы можем полностью отключить значок уведомления:

Отключить значок уведомления

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableNotificationBell": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета смотрите раздел "Отключить значок уведомления".

Отключить значок уведомления

External Link

Страница настройки виджета с отмеченным флажком Отключить значок уведомления

Отключить профили

По умолчанию FastComments будет показывать профиль пользователя, когда вы нажимаете на его аватар.

Однако мы можем отключить эту функцию:

Отключить профили

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableProfiles": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета смотрите раздел «Отключить профили».

Отключить профили

External Link

Страница настройки виджета с отмеченным флажком Отключить профили, поэтому аватары больше не открывают профили

Отключить комментарии в профилях

По умолчанию FastComments будет показывать вкладку «Комментарии к профилю» в профилях пользователей, позволяя посетителям оставлять комментарии в чьем‑то профиле.

Однако мы можем отключить эту вкладку:

Отключить комментарии к профилю

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableProfileComments": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета смотрите раздел «Отключить комментарии к профилю».

Отключить комментарии к профилю

External Link

Страница настройки виджета с отмеченным флажком «Отключить комментарии к профилю», скрывающим вкладку комментариев к профилю

Отключить личные сообщения в профилях

По умолчанию FastComments будет показывать вкладку «Прямые сообщения» в профилях пользователей, позволяя посетителям отправлять пользователю прямые сообщения.

Однако мы можем отключить эту вкладку:

Disable Profile Direct Messages

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableProfileDirectMessages": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета смотрите раздел «Отключить прямые сообщения».

Отключить прямые сообщения профиля

External Link

Страница настройки виджета с отмеченным флажком «Отключить прямые сообщения», скрывающим вкладку сообщений профиля

Отключить сообщение об успехе

По умолчанию FastComments отображает сообщение об успехе после оставления комментария. Это можно отключить следующим образом:

Отключить сообщение об успехе

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableSuccessMessage": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета:

Отключить сообщение об успехе

External Link

Страница настройки виджета с отмеченным флажком Отключить сообщение об успехе, чтобы скрыть подтверждение после комментария

Изменить рейтинг GIF

По умолчанию FastComments comment widget будет устанавливать gif rating значение pg.

Доступные варианты: g, pg, pg-13 и r.

Это можно задать в коде или через UI. В коде мы можем сделать это следующим образом:

Установить рейтинг GIF

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "gifRating": "pg-13"
}];
</script>

В UI вы найдете это под Gif Picker Rating, пока Disable Image Uploads? не отмечен.

Настройка рейтинга GIF

External Link

Выпадающий список Gif Picker Rating на странице настройки виджета, предлагающий g, pg, pg-13 и r

Модерация изображений

По умолчанию виджет комментариев FastComments имеет модерацию изображений, отключённую off.

Доступные варианты: off, low, medium и high.

В пользовательском интерфейсе настройки виджета вы найдёте это под Image Content Moderation Level, пока параметр Disable Image Uploads? не отмечен.

Настройка уровня модерации изображений

External Link

Выпадающий список уровня модерации изображений на странице настройки виджета, установленный в off, low, medium или high

Изменить стиль голосования

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

Однако возможно изменить стиль панели голосования. Текущие варианты — стандартные кнопки «Вверх/Вниз» или механизм голосования в виде сердца.

Мы используем флаг voteStyle следующим образом:

Включить кнопку сердца

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "voteStyle": 1
}];
</script>

Мы настоятельно рекомендуем делать это без кода, так как это также включает серверные проверки. На странице настройки виджета см. раздел «Стиль голосования».

Изменить стиль голосования

External Link

Настройка стиля голосования на странице настройки виджета, предлагающая стрелки вверх и вниз или голосование в виде сердца

Голосование также можно отключить, см. Disable Voting выше параметров стиля.

Отключить удаление

По умолчанию FastComments позволяет пользователям удалять их комментарии.

Однако это можно предотвратить.

На странице настройки виджета найдите параметр «Отключить удаление».

Отключить удаление комментариев

External Link

Опция отключения удаления на странице настройки виджета, предотвращающая удаление комментариев пользователями

Это затрагивает только обычных комментаторов и не затрагивает модераторов или администраторов, которые всё равно смогут удалять.
Это также повлияет на интеграции API, когда передаётся contextUserId.

Отключить редактирование

По умолчанию FastComments позволяет пользователям редактировать их комментарии.

Однако это можно предотвратить.

На странице настройки виджета смотрите опцию «Отключить редактирование».

Отключить редактирование комментариев

External Link

Опция отключения редактирования на странице настройки виджета, предотвращающая возможность комментаторов редактировать их комментарии

Это затрагивает только обычных комментаторов и не затрагивает модераторов или администраторов, которые всё равно смогут редактировать.
Это также повлияет на интеграции API, когда передаётся contextUserId.

Выделение новых комментариев

FastComments предоставляет несколько способов выделения новых комментариев.

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

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

Наконец, любые новые живые комментарии, которые появляются в сессии пользователя, будут выделяться в течение нескольких секунд с помощью анимации. Это делается через is-live CSS class и также может быть настроено.

Размеры страниц

По умолчанию размер страницы FastComments составляет 30. Это включает ответы в ветках.

Размер страницы можно настроить в Widget Configuration UI с различными размерами от 10 до 200.

Обратите внимание, что изменение размера страницы требует пересчёта всех веток комментариев в вашей учётной записи. Это может занять несколько минут.

Это нельзя настроить в клиентском виджете, так как страницы рассчитываются на сервере.

Пример конфигурации показан ниже:

Настраиваемые размеры страниц

External Link

Селектор размера страницы на странице настройки виджета, где можно выбрать значение от 10 до 200

Размеры страниц можно настраивать глобально, или для отдельного домена, или для отдельной страницы, создавая различные правила настройки.

Это повлияет на всех клиентов, интеграции и фреймворки, которые вы используете для отображения комментариев через нашу платформу.

Шаблоны писем

Письма, отправляемые FastComments вашим клиентам, можно настроить. Шаблон, логика, и переводы — всё это можно изменить. Текст можно настроить для каждой локали, а стили можно даже изменить для каждого домена. Узнайте больше о настраиваемых шаблонах писем здесь.

Форматы имён пользователей

По умолчанию FastComments отображает имя пользователя так, как оно было введено, или как оно было передано нам через SSO.

Однако может потребоваться скрыть или отобразить имя пользователя другим способом. Например, если имя пользователя — Allen Rex, возможно, вы захотите показывать только «Allen R.».

Это можно сделать без кода в пользовательском интерфейсе настройки виджета, в параметре под названием Commenter Name Format:

Изменить формат имени

External Link

Выпадающий список Commenter Name Format открыт с вариантами, такими как Capitalize, Last Initial и All Initials

Доступные форматы:

Capitalize (отображать пример пользователя как Example User)
Last Initial (отображать Example User как Example U.)
All Initials (отображать Example User как E. U.)
Показать "Anonymous"

Эффект от изменения применяется сразу. Пользователи по‑прежнему будут видеть своё полное имя пользователя в верхней части области комментариев для себя, но их комментарии будут отображать изменённое имя пользователя.

Имена пользователей маскируются на стороне сервера для их защиты.

Отключение загрузки изображений

По умолчанию FastComments позволяет загружать изображения. Это можно отключить, установив флаг noImageUploads в значение true.

Отключение загрузки изображений

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "noImageUploads": true
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Отключение загрузки изображений

External Link

Флажок отключения загрузки изображений включён в настройках страницы настройки виджета

Разрешить встраивание медиа

По умолчанию FastComments не позволяет использовать iframe в комментариях. Когда вы включаете встраивание медиа, комментаторы могут вставлять код встраивания (фрагмент <iframe>) от доверенных провайдеров, таких как YouTube, Vimeo, SoundCloud и Spotify, и он будет отображаться внутри комментария.

В целях безопасности это не флаг конфигурации виджета на стороне клиента. Это настройка на стороне сервера, проверяемая при сохранении каждого комментария, поэтому её нельзя включить со страницы. Разрешены только iframe, указывающие на встроенный список доверенных провайдеров. Любой другой iframe удаляется.

Это делается без кода, на странице настройки виджета:

Разрешить встраивание медиа

External Link

Настройка встраивания медиа включена на странице настройки виджета, позволяя комментаторам вставлять доверенные iframe‑встраивания

Adding Your Own Providers

Если вы хотите разрешить встраивание от провайдера, которого нет в встроенном списке доверенных, добавьте его имя хоста в поле "Additional Embed Domains" на той же странице. Эти имена хостов разрешены в дополнение к встроенным провайдерам. Сопоставление точное, поэтому указывайте полное имя хоста (например, player.example.com). Всё, что не указано в списке, будет заблокировано.

Как обычное поле ввода комментария, так и редактор WYSIWYG поддерживают вставку встраиваний. В редакторе WYSIWYG встраивание вставляется как удаляемый блок.

Включить поле поиска

По умолчанию в виджете комментариев нет поля поиска.

Однако мы можем включить его, установив флаг enableSearch в значение true:

Включение поиска

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableSearch": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета найдите опцию «Enable Search Box».

Enable Search Box

External Link

Страница настройки виджета с отмеченным флажком «Enable Search Box», показывающим поле поиска в виджете

Включить спойлеры

Мы можем включить поддержку спойлеров, установив флаг enableSpoilers в значение true:

Включение спойлеров

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableSpoilers": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета найдите опцию «Enable Spoilers».

Включить спойлеры

External Link

Страница настройки виджета с отмеченным флажком «Enable Spoilers», чтобы добавить кнопку SPOILER в редактор

Когда текст выделен, и теперь видимая кнопка SPOILER нажата, текст будет скрыт до тех пор, пока пользователь не наведёт на него курсор. Для тёмного режима мы делаем то же самое, но с другими цветами, которые лучше подходят для тёмного режима.

Это также совместимо с редактором WYSIWYG.

Включить счётчик просмотров комментариев

По умолчанию FastComments не отслеживает, кто просматривал каждый комментарий, и не предоставляет статистику по этому поводу.

Однако мы можем включить эту функцию, и система начнёт отслеживать, когда каждый пользователь прокручивает к комментарию.

Когда это происходит, рядом с иконкой глаза, отображаемой у каждого комментария, увеличивается счётчик. Счётчик обновляется в реальном времени и сокращается в соответствии с локалью пользователя.

Мы можем включить это, установив флаг enableViewCounts в значение true:

Включение подсчёта просмотров комментариев

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableViewCounts": true
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Включение подсчёта просмотров комментариев

External Link

Страница настройки виджета с отмеченным флажком подсчёта просмотров, поэтому каждый комментарий показывает значок глаза и количество

Мы отслеживаем user id*, который просмотрел комментарий, чтобы при повторном просмотре комментария счётчик не увеличивался. Если вы просмотрите комментарий снова через два года, счётчик увеличится.

*Примечание: либо анонимный идентификатор сессии, либо IP‑адрес пользователя в виде хешированного значения.

Показывать живые комментарии сразу

По умолчанию живое комментирование включено. Это означает, что если какие‑либо комментарии добавляются, удаляются, редактируются или закрепляются, изменения должны отображаться у всех пользователей, просматривающих ветку комментариев, одновременно.

Однако по умолчанию новые комментарии будут отображаться под динамически показываемой кнопкой с текстом, похожим на «Show 2 New Comments».

Если новые комментарии являются ответами непосредственно к странице, кнопка будет отображаться в верхней части ветки комментариев. Если они являются ответами на конкретный комментарий, кнопка будет показываться под этим комментарием.

Это делается, чтобы предотвратить постоянное изменение размера страницы у пользователя, что может вызывать раздражение при попытке схватить ползунок прокрутки.

Для некоторых сценариев, таких как живые торги или онлайн‑мероприятия, такое поведение нежелательно — вы можете захотеть, чтобы виджет комментариев работал больше как «чат», где новые комментарии «show right away».

Отсюда название флага, который включает эту функцию: showLiveRightAway.

Мы можем включить его следующим образом:

Показать живые комментарии сразу

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "showLiveRightAway": true
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Показать живые комментарии сразу

External Link

Настройка сворачивания живых комментариев включена, поэтому новые комментарии появляются мгновенно, а не за кнопкой

Отключение живых комментариев

По умолчанию FastComments будет иметь включённые живые комментарии.

Это означает, что каждый зритель ветки комментариев будет видеть одинаковый контент.

Например, если добавлен комментарий, он должен отображаться. Если комментарий отредактирован или удалён, то эти комментарии будут отредактированы или удалены для всех зрителей ветки. То же самое относится к голосованиям и всем действиям модерации.

Однако мы можем отключить это:

Отключить живые комментарии

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableLiveCommenting": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета см. раздел «Отключить живые комментарии».

Отключить живые комментарии

External Link

Раздел Отключить живые комментарии на странице настройки виджета, отключающий обновления ветки в реальном времени

Новые живые комментарии внизу

По умолчанию новые живые комментарии появляются в верхней части списка комментариев по мере их публикации в реальном времени.

Когда эта опция включена, новые живые комментарии будут добавляться в нижнюю часть списка. Это влияет на то, как комментарии отображаются при их публикации в реальном времени, пока пользователи просматривают ветку комментариев.

New Live Comments to Bottom

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "newCommentsToBottom": true
}];
</script>

При включенной этой настройке:

Новые живые комментарии, опубликованные другими пользователями, будут появляться внизу списка комментариев
Пользователи будут видеть, как новые комментарии появляются под существующими в режиме реального времени
Это влияет только на обновления живых комментариев - а не на начальную загрузку страницы
Это может помочь поддерживать плавность чтения, когда пользователи следят за обсуждением

Обратите внимание, что эта настройка влияет только на то, где размещаются новые живые комментарии по мере их поступления в реальном времени. Она не влияет на начальный порядок сортировки при загрузке страницы.

Включение бесконечной прокрутки

По умолчанию виджет FastComments автоматически изменяет высоту, чтобы вместить все видимые комментарии. Разбиение на страницы реализовано с помощью кнопки «Показать далее» в конце текущей страницы — мы обнаружили, что такое взаимодействие наиболее удобно для большинства пользователей.

Однако в некоторых случаях предпочитают бесконечную прокрутку. Например, мы используем эту функцию в продукте Stream Chat.

Мы можем скрыть кнопки «Показать далее» и переключиться на бесконечную прокрутку, установив флаг enableInfiniteScrolling в true:

Enabling Infinite Scrolling

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableInfiniteScrolling": true
}];
</script>

Для этого также требуется добавить пользовательский CSS. Добавьте пользовательский CSS для селектора .comments, чтобы включить прокрутку, например:

Включение бесконечной прокрутки

Copy

Copy

External Link

.comments {
    max-height: 500px;
    overflow-y: auto;
}

Полный рабочий пример будет выглядеть так:

Enabling Infinite Scrolling

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableInfiniteScrolling": true,
    "customCSS": ".comments { max-height: 500px;  overflow-y: auto; }"
}];
</script>

В приведённом выше примере мы используем свойство customCSS, однако для повышения производительности рекомендуется использовать интерфейс настройки виджета. См. документацию по пользовательскому CSS.

Изменение направления сортировки по умолчанию

По умолчанию FastComments будет сортировать комментарии по направлению сортировки «Самая релевантная».

Сортировка «Самая релевантная» учитывает время оставления комментария и количество голосов при сортировке.

Пользователь может затем изменить направление сортировки на «Старейшие сначала» или «Новейшие сначала» в пользовательском интерфейсе виджета комментариев.

Тем не менее, мы можем изменить значение по умолчанию на любое из трёх. Например, если вы хотите показывать старейшие комментарии первыми:

Changing The Default Sort To Oldest First

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "defaultSortDirection": "OF"
}];
</script>

Мы устанавливаем значение defaultSortDirection в "OF", чтобы задать направление «OF».

Для направления сортировки «Новейшие сначала» мы бы сделали следующее:

Changing The Default Sort To Newest First

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "defaultSortDirection": "NF"
}];
</script>

Допустимые значения для defaultSortDirection:

MR: "Самый недавний"
NF: "Новейшие сначала"
OF: "Старейшие сначала"

Это также можно сделать без кода. На странице настройки виджета см. раздел "Default Sort Direction".

Изменение направления сортировки по умолчанию

External Link

Селектор направления сортировки по умолчанию, предлагающий «Самую релевантную», «Новейшие сначала» и «Старейшие сначала»

Обратите внимание, что комментарии на каждой странице для каждого направления сортировки предварительно вычисляются, поэтому все направления сортировки имеют одинаковую производительность.

Отображать все комментарии сразу — отключить пагинацию

Чтобы отключить пагинацию и отобразить все комментарии сразу, установите startingPage в -1.

Render All Comments

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "startingPage": -1
}];
</script>

Перемещение поля ответа после комментариев

По умолчанию область ввода комментариев находится before веткой комментариев. Однако, установив этот параметр конфигурации в true, мы можем переместить её after.

Перемещение поля ответа в нижнюю часть

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "inputAfterComments": true
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Перемещение поля ответа в нижнюю часть

External Link

Опция страницы настройки виджета, которая размещает область ввода комментариев после ветки комментариев вместо перед ней

Ограничение длины комментария

Максимальное количество символов, разрешённое для ввода в поле комментария, может быть ограничено параметром maxCommentCharacterLength.

По умолчанию — 2000.

Такие вещи, как URL изображений, не учитываются при определении длины.

Ограничить длину комментария

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "maxCommentCharacterLength": 500
}];
</script>

Это можно настроить без кода на странице настройки виджета:

Ограничить длину комментария

External Link

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

Отключить многострочные комментарии

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

Однако может потребоваться ограничить ввод пользователем только одной строкой текста. Примеры таких сценариев включают онлайн‑аукционы или живой чат, для которых можно использовать FastComments.

Мы включаем флаг useSingleLineCommentInput следующим образом:

Enable Single-Line Comment Input

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "useSingleLineCommentInput": true
}];
</script>

Это также можно сделать без кода. На странице настройки виджета см. раздел «Enable Single-Line Comment Input».

Включить ввод однострочного комментария

External Link

Флажок ввода однострочного комментария включён на странице настройки виджета, ограничивая ввод одной строкой

Обратите внимание, что комментарии на каждой странице для каждого направления сортировки предварительно вычисляются, поэтому все направления сортировки имеют одинаковую производительность.

Ограничить количество комментариев на пользователя

По умолчанию каждый пользователь может отправить до 5 комментариев за одну минуту.

Это отслеживается по идентификатору пользователя, анонимному идентификатору пользователя и IP-адресу (хэшированному).

Это можно настроить без кода на странице настройки виджета:

Ограничение объёма комментариев на пользователя

External Link

Поле максимального количества комментариев в минуту на странице настройки виджета, по умолчанию установлено 5

Обратите внимание, что если вы используете API создания комментариев, возможно, захотите передать оригинальный ip-адрес пользователя в запросе к нашему бэкенду, чтобы ограничение скорости применялось к каждому пользователю, а не глобально к вашей учётной записи.

Запретить новые комментарии верхнего уровня

Установка noNewRootComments в true приведёт к тому, что виджет скроет область ответа для корневых комментариев, но всё ещё позволит пользователям отвечать на дочерние комментарии. Вы могли бы, например, установить это условно при загрузке страницы, чтобы разрешать оставлять корневые комментарии только некоторым пользователям.

Prevent New Root Comments

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "noNewRootComments": true
}];
</script>

Максимальная глубина ответов

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

Параметр maxReplyDepth позволяет ограничить, насколько глубоко могут уходить ветви ответов. Когда достигается максимальная глубина, пользователи больше не будут видеть кнопку ответа на комментариях на этом уровне.

Limiting Reply Depth to 2 Levels

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "maxReplyDepth": 2
}];
</script>

При установке maxReplyDepth в 2:

Пользователи могут оставлять комментарии на верхнем уровне (глубина 0)
Пользователи могут отвечать на комментарии верхнего уровня (глубина 1)
Пользователи могут отвечать на эти ответы (глубина 2)
Дальнейшие ответы за пределами глубины 2 не допускаются

Установка значения 1 позволит только ответы на комментарии верхнего уровня, создавая более плоскую структуру обсуждения.

Установка maxReplyDepth в 0 отключит все ответы, разрешая только комментарии верхнего уровня. Если параметр не указан, вложенность ответов не ограничена.

Требовать принятие условий использования

FastComments позволяет требовать от комментаторов, оставляющих комментарий впервые, принять ваши Условия обслуживания перед отправкой комментария.

When enabled:

Анонимные пользователи будут видеть чекбокс TOS каждый раз, когда они комментируют
Авторизованные пользователи будут видеть чекбокс только при первом комментарии или когда вы обновляете свои Условия обслуживания

Configuration

Navigate to the widget customization page and enable the "Require Terms of Service acceptance" checkbox. Once enabled, you'll see the following options:

Параметры условий обслуживания

External Link

Панель условий обслуживания, показывающая селектор режима текста TOS и поле даты последнего обновления

Режим текста TOS: По умолчанию чекбокс отображает "I agree to the Terms of Service and Privacy Policy" со ссылками на оба документа. Выберите "Customize text per locale", чтобы предоставить свой собственный текст для каждого языка.
Дата последнего обновления TOS: Когда вы обновляете Условия обслуживания, укажите эту дату. Пользователи, принявшие их до этой даты, будут вынуждены принять их снова.

How It Works

Временная метка принятия TOS хранится для каждого пользователя и каждого комментария
Когда пользователь принимает TOS, дата фиксируется в его профиле пользователя (для каждого арендатора)
Если вы задаёте дату "Last Updated", которая позже даты принятия пользователем, ему потребуется повторно принять условия
Для анонимных пользователей, которых нельзя отследить, чекбокс появляется при каждой отправке комментария

Обзор единой аутентификации (SSO)

SSO, или single-sign-on, — это набор соглашений, позволяющих вам или вашим пользователям пользоваться FastComments без необходимости создавать ещё одну учётную запись.

Если вы не разрешаете анонимные комментарии, для комментирования через FastComments требуется учётная запись. Мы делаем процесс регистрации очень простым — пользователь просто оставляет свой email при комментарии. Тем не менее, мы понимаем, что даже это может быть лишним трением, от которого некоторые сайты хотят избавиться.

Мы можем снизить это трение, оставив только один поток входа для всего вашего сайта.

How do I get it?

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

Давайте сравним варианты, а затем перейдём к подробностям каждого.

User and Comment Migrations

При миграции с платформы с SSO, такой как Disqus, у вас уже будут пользователи и их комментарии.

Комментарии импортируются как часть вашей миграции — либо через API, через наш Import UI, либо службой поддержки. Предпочтительнее использовать Import UI, если он поддерживает платформу, с которой вы мигрируете, поскольку он включает обработку ошибок, извлечение и загрузку аватаров и медиа, а также систему мониторинга пакетных заданий.

Сами пользователи добавляются автоматически при первом просмотре веток комментариев. Альтернативно, их можно предварительно добавить через API, но это не даёт многих преимуществ.

Если комментарии импортируются, а SSO-пользователи не добавляются вручную через API, то комментарии автоматически будут сопоставлены с учётной записью пользователя при первом создании этой учётной записи, когда пользователь просматривает любую ветку комментариев. После этого они смогут управлять, редактировать и удалять ранее написанные ими комментарии.

Автоматическая миграция выполняется по email или имени пользователя. Некоторые платформы не предоставляют email при экспорте, как Disqus, поэтому в этом случае мы используем имя пользователя.

Пока вы передаёте совпадающее имя пользователя и email в SSO-полезной нагрузке, мы добавим email к объектам отдельных комментариев, чтобы уведомления и упоминания работали.

Если вы хотите импортировать ваши комментарии и пользователей одновременно, свяжитесь с поддержкой, чтобы перенести комментарии в соответствующие учётные записи пользователей после импорта пользователей через API.

Итак, чтобы суммировать самый простой путь миграции:

Импортируйте комментарии.
1. Аватары и другие медиа мигрируются автоматически при использовании Import UI в Manage Data -> Imports.
Настройте Secure или Simple SSO.
Позвольте миграции происходить автоматически для каждого пользователя при их первом входе.
1. Обычно это добавляет меньше секунды к времени загрузки страницы, если у пользователя менее 50k комментариев.

WordPress Users

Если вы используете наш плагин WordPress, то код писать не нужно! Просто перейдите на страницу администрирования плагина, нажмите SSO Settings, а затем Enable.

Это приведёт вас к мастеру с одной кнопкой, который создаст ваш API-ключ, отправит его на ваш WordPress и включит SSO. Мы объединили это в одно нажатие кнопки для вашего удобства.

Обратите внимание, что если вы устанавливаете плагин впервые, вам потребуется пройти процесс настройки, прежде чем вы увидите страницу администрирования с кнопкой SSO Settings.

WordPress SSO - Moderators

Обратите внимание, что в настоящее время, чтобы рядом с вашими модераторами при их комментарии через FastComments WordPress plugin отображалась бейдж «Moderator», они также должны быть добавлены как Moderator в панели управления FastComments и иметь подтверждённый email.

Custom Integrations

Для кастомных интеграций есть два варианта.

Option One - Secure SSO

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

Пока вы создаёте корректную полезную нагрузку, пользователь всегда будет иметь бесшовный опыт комментирования.

С Secure SSO полезная нагрузка SSO создаётся на стороне сервера с использованием HMAC-аутентификации и затем передаётся виджету на клиенте.

С Secure SSO учётная запись пользователя полностью отделена от остальной базы пользователей FastComments. Это означает, что если у нас есть два партнёра — Company A и Company B, — у каждого может быть SSO-пользователь с именем пользователя "Bob".

Requirements

Базовые знания разработки backend.
Базовые знания работы с секретными API-ключами.
Базовые знания разработки API или серверного рендеринга.

Pros

Безопасно.
Бесшовный опыт комментирования.

Cons

Требуется разработка на стороне сервера.

Updating User Data

С Secure SSO каждый раз, когда вы передаёте SSO-полезную нагрузку пользователя, мы обновляем их профиль с последней информацией. Например, если у пользователя было имя пользователя X, и вы передаёте Y в SSO-полезной нагрузке, их имя пользователя станет Y.

Если вы хотите удалить значения с помощью этого подхода, установите их в null (не undefined).

Secure SSO API

Мы также предоставляем API для взаимодействия с SSO-пользователями. Смотрите the docs.

Обратите внимание, что при использовании Secure SSO пользователи автоматически создаются в фоновом режиме при загрузке страницы. Вам не нужно массово импортировать ваших пользователей.

Option Two - Simple SSO

Альтернатива Secure SSO — просто передавать информацию о пользователе виджету комментариев.

Предоставление email при Simple SSO не обязательно, однако без него их комментарии будут отображаться как "Unverified".

^Note! Начиная с начала 2022 года имена пользователей при Simple SSO не обязаны быть уникальными по всему FastComments.com.

Идеально, если Simple SSO выбирается только при разработке на платформе, где нет доступа к backend.

Requirements

Базовые знания клиентской разработки.
Необходимо знать по крайней мере email пользователя.

Pros

Просто.
Вся активность всё ещё проходит проверку.
Пользователь никогда не вводит своё имя пользователя или email.

Cons

Менее безопасно, чем Secure SSO, так как полезная нагрузка на стороне клиента может быть подделана, чтобы притвориться любым пользователем.

Simple SSO API

Пользователи, автоматически создаваемые через поток Simple SSO, сохраняются как объекты SSOUser. К ним можно получить доступ и управлять ими через API SSOUser. Смотрите the docs.

Пользовательские интеграции — безопасный единый вход (SSO)

FastComments Secure SSO использует шифрование HMAC-SHA256 в качестве механизма реализации SSO. Сначала мы рассмотрим общую архитектуру, приведём примеры и подробные шаги.

Также есть документация по миграции с других провайдеров с похожими механизмами SSO и отличиям.

Поток выглядит так:

Поток Secure SSO

Диаграмма Secure SSO

Поскольку Secure SSO требует разработки на всём стеке, полнофункциональные примеры кода на Java/Spring, NodeJS/Express и чистом PHP в настоящее время на GitHub.

Хотя в примере на NodeJS мы используем ExpressJS, а в примере на Java — Spring, в этих рантаймах не требуются дополнительные фреймворки/библиотеки для реализации FastComments SSO — работают нативные криптопакеты.

Вам не нужно писать какие-либо новые API-эндпоинты для FastComments SSO. Просто зашифруйте информацию о пользователе, используя ваш секретный ключ, и передайте полезную нагрузку в виджет комментариев.

Получите секретный ключ API

Ваш секретный ключ API можно получить на этой странице. Вы также можете найти эту страницу, перейдя в My Account, нажав плитку API/SSO, а затем нажать "Get API Secret Key".

Параметры виджета комментариев

Документация высокого уровня по API для виджета комментариев доступна здесь.

Давайте подробнее рассмотрим, что означают эти параметры.

Виджет комментариев принимает объект конфигурации — вы уже передаёте его, если используете FastComments для передачи вашего идентификатора клиента (called tenantId).

Чтобы включить SSO, передайте новый объект "sso", который должен содержать следующие параметры. Значения должны генерироваться на сервере.

userDataJSONBase64: Данные пользователя в формате JSON, которые затем кодируются в Base64.
verificationHash: HMAC-SHA256 хеш, созданный из UNIX_TIME_MILLIS + userDataJSONBase64.
timestamp: Эпоха (timestamp) в миллисекундах. Не должен быть в будущем и не более двух дней в прошлом.
loginURL: URL, который виджет комментариев может показать для входа пользователя.
logoutURL: URL, который виджет комментариев может показать для выхода пользователя.
loginCallback: Когда предоставлен вместо loginURL, функция, которую виджет комментариев вызовет при нажатии кнопки входа.
logoutCallback: Когда предоставлен вместо logoutURL, функция, которую виджет комментариев вызовет при нажатии кнопки выхода.

Secure SSO Client Code

Copy

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "sso": {
        "userDataJSONBase64": "...",
        "verificationHash": "...",
        "timestamp": 1787115343173.0,
        "loginURL": "https://example.com/login",
        "logoutURL": "https://example.com/logout",
        "loginCallback": null,
        "logoutCallback": null
    }
}];
</script>

Объект пользователя

Объект пользователя

Copy

Copy

interface SSOUser {
    /** Обязательно. Максимум 1k символов. **/
    id: string;
    /** Обязательно. Максимум 1k символов. Примечание: должен быть уникальным. **/
    email: string;
    /** Обязательно. Максимум 1k символов. Примечание: username не может быть email. Не обязательно быть уникальным. **/
    username: string;
    /** Необязательно. Максимум 3k символов для URL. По умолчанию берётся из gravatar на основе email. Поддерживает 64-кодированные изображения, в этом случае предел — 50k символов. **/ 
    avatar?: string;
    /** Необязательно. По умолчанию false. **/
    optedInNotifications?: boolean;
    /** Необязательно. По умолчанию false. **/
    optedInSubscriptionNotifications?: boolean;
    /** Необязательно. Максимум 100 символов. Эта метка будет показана рядом с их именем. По умолчанию — «Администратор/Модератор», когда применимо. **/
    displayLabel?: string;
    /** Необязательно. Максимум 500 символов. Будет показано вместо username. **/
    displayName?: string;
    /** Необязательно. Максимум 2k символов. Имя пользователя будет ссылаться на этот URL. **/
    websiteUrl?: string;
    /** Необязательно. До 100 групп на пользователя. Идентификатор группы не может быть длиннее 50 символов. **/
    groupIds?: string[];
    /** Необязательно. Обозначает пользователя как администратора. **/
    isAdmin?: boolean;
    /** Необязательно. Обозначает пользователя как модератора. **/
    isModerator?: boolean;
    /** Необязательно, по умолчанию true. Установите в false, чтобы включить вкладку "активность" в профиле пользователя. **/
    isProfileActivityPrivate?: boolean;
    /** Необязательно, по умолчанию false. Установите в true, чтобы отключить комментарии в профиле. **/
    isProfileCommentsPrivate?: boolean;
    /** Необязательно, по умолчанию false. Установите в true, чтобы отключить отправку личных сообщений этому пользователю. **/
    isProfileDMDisabled?: boolean;
    /** Необязательная конфигурация бейджей пользователя. **/
    badgeConfig?: {
        /** Массив глобальных идентификаторов бейджей для назначения. Ограничение: 30 бейджей. Порядок сохраняется. **/
        badgeIds: string[];
        /** Массив идентификаторов бейджей, привязанных к текущей странице (urlId). Отображаются только на назначенной странице. **/
        pageBadgeIds?: string[];
        /** Если true, заменяет существующие отображаемые бейджи. Глобальные и привязанные к странице бейджи переопределяются независимо. **/
        override?: boolean;
        /** Если true, обновляет свойства отображения бейджей из конфигурации тенанта. **/
        update?: boolean;
    };
}

Модераторы и администраторы

Для администраторов и модераторов передайте соответствующие флаги isAdmin или isModerator в объекте SSOUser.

Уведомления

Чтобы включить или отключить уведомления, установите значение optedInNotifications в true или false соответственно. При первом загрузке страницы пользователем с этим значением в полезной нагрузке SSO его настройки уведомлений будут обновлены.

Дополнительно, если вы хотите, чтобы пользователи получали email-уведомления о действиях на страницах, на которые они подписаны (в отличие от только внутриигровых/встроенных уведомлений), установите optedInSubscriptionNotifications в true.

VIP-пользователи и специальные метки

Вы можете отображать специальную метку рядом с именем пользователя, используя необязательное поле "displayLabel".

Неаутентифицированные пользователи

Чтобы представить неаутентифицированного пользователя, просто не заполняйте userDataJSONBase64, verificationHash или timestamp. Предоставьте loginURL.

Эти пользователи не смогут комментировать; вместо этого им будет показано сообщение о входе (сообщение, ссылка или кнопка, в зависимости от конфигурации).

Прямые примеры сериализации и хеширования данных пользователя

Более подробные примеры доступны здесь (js), здесь (java) и здесь (php).

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

Пользовательские интеграции — простой единый вход (SSO)

С помощью Simple SSO мы можем предоставить виджету комментариев информацию о пользователе, чтобы ему не приходилось вводить имя пользователя или электронную почту для комментирования.

Мы можем настроить Simple SSO следующим образом:

Simple SSO

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "simpleSSO": {
        "username": "Bob",
        "email": "bob@example.com",
        "avatar": "https://example.com/bob.png",
        "websiteUrl": "https://example.com/profiles/bob",
        "displayName": "Bob's Name",
        "displayLabel": "VIP User",
        "loginURL": "https://example.com/login",
        "logoutURL": "https://example.com/logout",
        "badgeConfig": {
            "badgeIds": [
                "badge-id-1",
                "badge-id-2"
            ],
            "pageBadgeIds": [
                "badge-id-3"
            ],
            "override": false
        }
    }
}];
</script>

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

Notes:

Электронная почта является уникальным идентификатором для Simple SSO.
Предоставление электронной почты при использовании Simple SSO не обязательно, однако по умолчанию их комментарии будут отображаться как «Непроверенные». Если электронная почта не указана, пользователь не может быть полностью аутентифицирован.
НОВОЕ С января 2022: имена пользователей не обязаны быть уникальными на всём fastcomments.com
Simple SSO может автоматически создавать и обновлять SSO-пользователей, если указана электронная почта и пользователь изначально не был создан через Secure SSO.
Вы можете указать бейджи для пользователя с помощью свойства badgeConfig. Массив badgeIds содержит идентификаторы глобальных бейджей, которые будут ассоциированы с пользователем. Массив pageBadgeIds содержит идентификаторы бейджей, привязанных к текущей странице (urlId) — эти бейджи отображаются только на той странице, где они были назначены. Если override установлен в true, это заменит уже отображаемые бейджи (глобальные и привязанные к странице заменяются независимо); если false, бейджи будут добавлены к существующим.

Пользовательские интеграции — миграция с Disqus SSO

Самые заметные различия между Disqus и FastComments Secure SSO заключаются в том, что Disqus использует SHA1 для шифрования, тогда как мы используем SHA256.

Это означает, что миграция с Disqus простая - измените используемый алгоритм хеширования с SHA1 на SHA256 и обновите имена свойств, передаваемые в UI.

Пользовательские интеграции — миграция с Commento SSO

Commento использует принципиально другой подход к SSO - они требуют, чтобы у вас был endpoint, который они вызывают для аутентификации пользователя.

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

Защита потоков комментариев с помощью единого входа

FastComments SSO (подробности здесь) предоставляет вашим пользователям возможность комментировать без необходимости входа в другую платформу.

Однако этого недостаточно для защиты ваших веток комментариев, поскольку по умолчанию данные комментариев являются общедоступной информацией — любой, кто может просматривать страницу, может просматривать комментарии.

Изменив настройку, мы можем ограничить получение комментариев, если их запрашивает не администратор и не действительный пользователь SSO.

Настройка без кода

Мы можем предотвратить просмотр и взаимодействие с нашими ветками комментариев, когда SSO настроен, создав правило настройки.

При этом найдите SSO, и вы увидите эту опцию:

Требовать SSO для просмотра комментариев

External Link

Опция «Требовать SSO для просмотра комментариев», включённая в правиле настройки, с выбором уровня безопасности

Включите её и сохраните правило настройки.

Защита только определённого домена или страницы

Чтобы защитить только определённый домен или страницу, мы просто настроим правило настройки соответствующим образом.

В верхней части пользовательского интерфейса настройки мы найдём два поля ввода: Domain и URL ID.

Чтобы защитить конкретный домен, введите нужный домен в поле "domain".

Чтобы защитить конкретную страницу, введите URL страницы в поле "URL ID". Если у вас есть пользовательская интеграция с FastComments, здесь можно ввести тип идентификатора вместо URL.

Уровни безопасности

При требовании SSO вам нужно решить, требуется ли Simple SSO или Secure SSO. Если вы выбираете Simple SSO, то оба варианта допускаются, но если вы выбираете Secure SSO, то контент должен быть получен с помощью Secure SSO полезной нагрузки, хешированной вашим API‑ключом, чтобы его можно было просмотреть.

Опция уровня безопасности появится, когда вы выберете "Требовать SSO для просмотра комментариев".

Защита помимо чтения

Включение этой опции защитит страницу или домен от комментирования, если пользователь не вошёл через SSO.

Подводные камни

Пользователи, создавшие комментарии до интеграции SSO, не смогут их увидеть, если не войдут через вашу интеграцию SSO.

Разрешить анонимные комментарии

По умолчанию FastComments будет требовать электронную почту для комментирования. Она не обязана быть действительной, однако пока пользователь не перейдёт по отправленной ему ссылке, его комментарий будет отображаться с меткой «Неподтверждённый комментарий».

Тем не менее, мы можем убрать требование электронной почты. Поле ввода электронной почты по‑прежнему будет отображаться, но больше не будет обязательным.

Это можно настроить через пользовательский интерфейс настройки виджета:

Включение анонимных комментариев

External Link

Опция анонимных комментариев в пользовательском интерфейсе настройки виджета, которая делает поле электронной почты необязательным

Предотвращение истечения срока действия анонимных комментариев

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

По умолчанию это не делается.

Это можно настроить или отключить на странице Настройки модерации.

Настройки модерации

External Link

Форма настроек модерации, где вы указываете, сколько дней непроверенные комментарии хранятся перед удалением

Отключить ввод электронной почты

Когда пользователи оставляют комментарии и не вошли в систему, их попросят указать свой email.

Это создаст «непроверенную сессию» для этого пользователя, и мы попросим его подтвердить её по email.

Для некоторых сайтов или приложений желательно не запрашивать у пользователя его email при комментировании или голосовании.

Включение анонимных комментариев делает поле ввода email необязательным. Однако его можно полностью отключить. Сначала включите анонимные комментарии, после чего появится опция отключения полей ввода email.

Отключить ввод email

External Link

Вариант полностью скрыть поля ввода email, отображается после включения анонимных комментариев в пользовательском интерфейсе настройки

При включённой опции поля ввода email не будут отображаться ни в одном из наших продуктов для комментирования.

Обратите внимание, что при такой конфигурации все комментарии будут непроверенными, если только пользователь не создаст аккаунт и не войдёт на https://fastcomments.com.

Возможно, вы захотите рассмотреть возможность отключения метки непроверенного.

Отключить метку «Непроверено»

По умолчанию FastComments будет показывать метку «Неподтверждённый комментарий» для комментариев, оставленных пользователем с неподтверждённой сессией браузера. Подробнее о неподтверждённом комментировании читайте здесь.

Отключить метку неподтверждённого комментария

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "disableUnverifiedLabel": true
}];
</script>

Кроме того, эту функцию можно использовать без написания кода в пользовательском интерфейсе настройки:

Отключить метку неподтверждённого комментария

External Link

Страница настройки виджета с отмеченным флажком Отключить метку неподтверждённого комментария

Разрешить анонимное голосование

Когда пользователи пытаются проголосовать за комментарий и не вошли в систему, им будет предложено указать имя пользователя и электронную почту.

Мы можем убрать это требование, позволяя любому голосовать за комментарий, не оставляя никакой информации.

Разрешить анонимные голоса

External Link

Страница настройки виджета с включённой опцией анонимных голосов, поэтому для голосования не требуется имя или электронная почта

Установка имени пользователя по умолчанию

Когда пользователи комментируют или голосуют, и они не вошли в систему, их попросят указать электронную почту и имя пользователя.

В случае анонимных комментариев иногда желательно задать имя пользователя по умолчанию, чтобы уменьшить трение при комментировании. Это можно сделать в пользовательском интерфейсе настройки. Сначала необходимо включить анонимные комментарии.

Установка имени пользователя по умолчанию

External Link

Поле имени пользователя по умолчанию, которое появляется в пользовательском интерфейсе настройки после включения анонимных комментариев

Обратные вызовы

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

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

Поддерживаются следующие обратные вызовы:

onInit
onAuthenticationChange
onRender
commentCountUpdated
onReplySuccess
onVoteSuccess
onImageClicked
onOpenProfile
onCommentSubmitStart
onCommentsRendered

Точные сигнатуры можно найти в определениях TypeScript.

Ниже приведён пример со всеми используемыми обратными вызовами:

Примеры обратных вызовов

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    window.fcConfigs = [{
        target: '#fastcomments-widget',
        tenantId: 'demo',
        onInit: function () {
            console.log('Library started to fetch comments!');
        },
        onAuthenticationChange: function (eventName, userObj) {
            console.log('User authenticated!', eventName, userObj);
        },
        onRender: function () {
            console.log('Render event happened!');
        },
        commentCountUpdated: function (newCount) {
            console.log('New comment count:', newCount);
        },
        onReplySuccess: function (comment) {
            console.log('New comment saved!', comment);
        },
        onVoteSuccess: function (comment, voteId, direction, status) {
            console.log('New vote saved!', comment, voteId, direction, status);
        },
        onImageClicked: function (src) {
            console.log('Image clicked!', src);
        },
        onOpenProfile: function (userId) {
            console.log('User tried to open profile', userId);
            // return true; // вернуть true, чтобы предотвратить стандартное поведение (открытие профиля пользователя на fastcomments.com).
        },
        onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
            console.log('Trying to submit comment', comment);
            setTimeout(function() { // имитация асинхронного поведения (вызов API и т.д.).
                if(confirm('Should submit?')) {
                    continueSubmitFn();
                } else {
                    cancelFn('Some optional error message');
                }
            }, 1000);
        },
        onCommentsRendered: function(comments) {
            // комментарии отсортированы по умолчанию на странице — это может быть «Наиболее релевантные» (например: с наибольшим количеством голосов и т.д.) или «Сначала новые»
            const topCommentInList = comments[0];
            console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
        }
    }];
</script>

Ручное определение локали пользователя

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

Когда пользователь оставляет комментарий или входит в систему, мы обновляем его последнюю использованную локаль и также используем её для отправки электронных писем.

Это влияет на то, как виджет комментариев переводится для пользователя. Локаль состоит из языка и региона пользователя, поэтому настройка локали обычно меняет язык, используемый для отображения текста пользователю.

Через пользовательский интерфейс

Это можно задать с помощью пользовательского интерфейса настройки виджета. См. параметр «Locale / Language»:

Изменение локали / языка

External Link

Выпадающий список Locale / Language на странице настройки виджета, используемый для переопределения обнаруженной локали посетителя

Через код

Это можно переопределить желаемой локалью.

Ручное определение локали пользователя

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "locale": "ru_ru"
}];
</script>

Поддерживаемые языки и коды локалей

Вы можете найти полный список поддерживаемых языков и соответствующих кодов локалей здесь.

Примечание к SSO

Если вы используете SSO, возможно, вы захотите передать локаль пользователя в объекте пользователя, чтобы электронные письма и другие элементы корректно локализовались для него.

Ограничение допустимых языков

По умолчанию FastComments не ограничивает языки, используемые для комментариев.

Может быть желательным ограничить языки, которые использует сообщество.

Это можно настроить без кода на странице настройки виджета:

Разрешённые языки

External Link

Селектор разрешённых языков на странице настройки виджета для ограничения языков, которые могут использоваться в комментариях

Система проанализирует их комментарий, определит его язык и затем сопоставит его со списком разрешённых.

Если комментарий написан на языке, который не разрешён, будет показано локализованное сообщение об ошибке.

Заголовки страниц

Текущий заголовок страницы связывается с указанным urlId и сохраняется для использования в инструментах модерации.

По умолчанию он получается из document.title.

При необходимости вы можете указать собственный заголовок страницы следующим образом:

Specifying The Page Title

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "pageTitle": "Article 42"
}];
</script>

Запретить новые ответы и отключить голосование

Комментирование можно заблокировать, чтобы новые комментарии или голоса не могли быть оставлены, установив флаг readonly в значение true.

Комментарии также нельзя будет редактировать или удалять.

Making The Comment Thread Readonly

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "readonly": true
}];
</script>

Это можно настроить без кода на странице настройки виджета для всего домена или отдельной страницы:

Making The Comment Thread Readonly

External Link

Настройка предотвращения новых ответов на странице настройки виджета, которая блокирует ветку для домена или страницы

Update!

Начиная с ноября 2022 года, ветки можно блокировать или разблокировать в реальном времени администраторами и модераторами через меню с тремя точками над областью ответа.

Это предотвратит появление новых комментариев, при этом оставит возможность голосования и позволит пользователям удалять свои комментарии при желании, тогда как readonly не позволяет этого.

Это соответствует полю isClosed в API Page.

Ограничение доменов ссылок

По умолчанию FastComments позволяет ссылаться на любой внешний сайт.

Это можно ограничить желаемым списком сайтов или доменов. Попытка разместить ссылку на сайт или домен, не входящий в определённый список, вызовет ошибку, отображаемую пользователю.

Эта проверка применяется только к виджету комментариев и API. Импорты не затрагиваются.

Это делается без кода, на странице настройки виджета:

Ограничить домены внешних ссылок

External Link

Настройки внешних ссылок со списком ограниченных доменов, где вводятся разрешённые сайты

Количество комментариев и подсчёт всех вложенных ответов

Счетчик комментариев, отображаемый в верхней части виджета комментариев, может либо показывать все "комментарии верхнего уровня", то есть те ответы, которые являются ответами непосредственно на страницу или саму статью, либо это может быть подсчет всех вложенных комментариев.

По умолчанию это true — это подсчет второго типа — всех комментариев. В более старых версиях виджета комментариев значение по умолчанию было false.

Мы можем изменить поведение, чтобы это был подсчет всех вложенных комментариев, установив флаг countAll в true.

Counting All Comments

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "countAll": true
}];
</script>

Если мы хотим, чтобы счетчик отражал только комментарии верхнего уровня, мы устанавливаем флаг в false.

Counting Top Level Comments

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "countAll": false
}];
</script>

В настоящее время это нельзя настроить без изменения кода.

Включение ссылок комментаторов

По умолчанию FastComments запрашивает у пользователя только их комментарий, имя пользователя и электронную почту.

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

Мы можем включить отображение дополнительного поля ввода для указания URL веб‑сайта пользователя, установив флаг enableCommenterLinks в значение true:

Включение ссылок комментатора

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "enableCommenterLinks": true
}];
</script>

Когда указанный URL предоставлен, учетная запись пользователя будет обновлена, и все их имена пользователей во всех прошлых и будущих комментариях будут ссылаться на этот URL.

Это можно настроить без кода на странице настройки виджета:

Включение ссылок комментатора

External Link

Страница настройки виджета с отмеченным флажком ссылок комментатора для добавления поля URL веб‑сайта в форму комментария

Группы модерации

Список идентификаторов, сгенерированных на странице Группы модерации.

Когда указано, комментарии, оставленные с использованием этой конфигурации, будут содержать тот же набор moderationGroupIds.

Если у Moderator определена одна или несколько Групп модерации, они будут видеть только комментарии на странице Moderate Comments, связанные с их группой(ами).

Specify Moderation Groups

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "moderationGroupIds": [
        "mxZAhjzdb",
        "FT19nXbqA"
    ]
}];
</script>

Идентификаторы групп для упоминаний

Список идентификаторов, используемых для автодополнения @mentions. Полезно, когда вы хотите предотвратить упоминание пользователей, если у них нет пересекающихся групп.

Когда задано, в автозаполнении после ввода символа @ будут предлагаться только пользователи из других групп.

Limit Groups for Mentions

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "mentionGroupIds": [
        "yxZAhjzda",
        "QT19nXbqB"
    ]
}];
</script>

Для аутентификации FastComments зависит от того, что в вашем браузере включены сторонние cookie. Без них пользователи всегда будут вынуждены оставлять свой email для комментирования (если поле ввода email не скрыто), и их комментарии всегда будут отображаться как непроверенные (по умолчанию).

Чтобы обойти это, вы можете включить обход сторонних cookie.

Когда эта настройка включена, появляется небольшое всплывающее окно, показывающее сообщение о том, что пользователь входит в систему. Это всплывающее окно появляется каждый раз, когда пользователь взаимодействует с виджетом комментариев; например, когда он оставляет комментарий.

Мы можем сделать это в коде, установив флаг enableThirdPartyCookieBypass в true:

Мы также можем настроить это через пользовательский интерфейс настройки виджета, в разделе Enable Third-Party Cookie Popup:

Включение обхода сторонних cookie

External Link

Страница настройки виджета с отмеченным флажком «Включить всплывающее окно сторонних cookie»

Удаление комментариев с ответами

По умолчанию пользователи могут удалять свои собственные комментарии. Кроме того, удаление их комментария автоматически удаляет все дочерние и временные комментарии в ветке. Это поведение также активно.

Вы можете ограничить это следующими способами:

Вместо этого анонимизировать удалённый комментарий (установить имя и текст в [deleted] или пользовательское значение).
Не разрешать удалять комментарии, когда есть ответы. Показано настраиваемое сообщение об ошибке.
Ограничить удаление, когда у комментария есть ответы, только администраторам и модераторам.

Это можно настроить через раздел Comment Thread Deletion в пользовательском интерфейсе настройки виджета.

Настройка поведения удаления для ответов

External Link

Опции удаления ветки комментариев в пользовательском интерфейсе настройки виджета для анонимизации или ограничения удалений с ответами

Показывать бейджи в верхней панели

По умолчанию FastComments будет отображать значки пользователей только в их комментариях в ветке комментариев.

Однако мы можем показывать значки пользователей рядом с их именем над формой комментария, включив эту функцию на странице настройки виджета:

Опция отображения значков в верхней панели

External Link

Флажок отображения значков в верхней панели на странице настройки виджета, размещающий значки рядом с именем над формой комментария

Это отобразит значки пользователя рядом с их именем в области верхней панели, делая их достижения и статус более заметными, когда они пишут комментарий.

Обратите внимание, что эта функция должна быть включена в пользовательском интерфейсе настройки виджета, чтобы работать. Вы можете опционально установить флаг showBadgesInTopBar в false в конфигурации вашего кода, чтобы избирательно отключить её, даже если она включена на уровне сервера:

Отключить отображение значков в верхней панели

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "showBadgesInTopBar": false
}];
</script>

Показывать список онлайн‑пользователей

По умолчанию FastComments не отображает список пользователей на странице.

Вы можете отобразить список людей, которые в данный момент просматривают страницу, рядом с виджетом комментариев. Список обновляется в реальном времени, когда пользователи присоединяются и уходят, и показывает их имя, аватар и индикатор онлайн.

Существует три варианта расположения:

1 — Верх: горизонтальный ряд перекрывающихся аватаров, отображаемый над комментариями.
2 — Слева: боковая панель с именами и точками онлайн, отображаемая слева от виджета.
3 — Справа: такая же боковая панель, отображаемая справа от виджета.

Установите флаг usersListLocation, чтобы включить эту функцию:

Show Users List on the Right

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "usersListLocation": 3
}];
</script>

По умолчанию список показывает только пользователей, находящихся онлайн. Чтобы также включить людей, которые комментировали страницу в прошлом (но сейчас её не просматривают), установите usersListIncludeOffline в значение true:

Include Past Commenters

Copy

Copy

External Link

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "usersListLocation": 3,
    "usersListIncludeOffline": true
}];
</script>

Прошлые комментаторы отображаются без зелёной онлайн-точки, чтобы было ясно, кто присутствует прямо сейчас.

Пользователи с приватными профилями отображаются с общим аватаром и меткой «Private Profile», чтобы счёт оставался точным без раскрытия личностей.

Это также можно настроить без кода. На странице настройки виджета смотрите параметр «Users List Location». Когда расположение установлено не в положение Off, появляется флажок «Include past commenters» под ним.

Настройки списка пользователей

External Link

Расположение списка пользователей установлено в Право, с отображённым ниже флажком «Include past commenters»

Для последних 500 живых пользователей список может отставать до 30 секунд.

Предыдущее руководство Следующее руководство