Add Comments to Wix Sites

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

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

Шаг 1: Отредактируйте нужную страницу

В этом примере мы добавим FastComments Live Commenting на страницы записей блога.

Для этого откроем наш сайт в редакторе Wix.

Затем нужно убедиться, что мы редактируем нужную страницу.

Мы хотим, чтобы для каждой записи блога отображалась уникальная ветка комментариев, поэтому отредактируем Blog Pages -> Post.

Шаг первый: Редактирование динамической страницы записи

Шаг 2: Добавьте блок вставки

Затем перейдём в Add -> Embed Code -> Embed HTML.

Шаг второй: Добавьте блок Embed HTML

This will give us a sad looking box to start with:

Начальный блок

Шаг 3: Скопируйте и вставьте пользовательский код

This example uses custom code to be compatible with Wix. You won't be able to use the FastComments code snippets from other tutorials.

Open the form to add our custom HTML dialog by clicking Enter Code and selecting HTML:

Шаг 3: Открыть HTML-диалог

Copy the following HTML snippet and paste it into the dialog, and click Update:

Фрагмент кода для Wix Comments

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        const config = {
            tenantId: "demo"
        };
        const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);
        window.onmessage = (event) => {
            if (event.data) {
                if (event.data.action === 'reload') {
                    console.log('Updating FastComments:', event.data.url);
                    config.urlId = event.data.url;
                    config.url = event.data.url;
                    instance.update(config);
                }
            }
        }
    })();
</script>

Шаг 3: Вставить и сохранить

You should now see a very tiny version of the comment widget:

Шаг 3: Результат

Next we will position and size this to fit our page.

Шаг 4: Измените размер

Теперь, когда виджет комментариев добавлен, давайте расположим его на нашей странице.

Шаг 4: Изменение размера

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

Шаг 5: Уникальные ветки комментариев

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

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

Dev Mode

Чтобы добавить эту функциональность, нам нужно войти в то, что Wix называет Dev Mode.

Нажмите опцию Dev Mode в верхней части экрана.

Включить Dev Mode

Set the Element ID

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

Назовём его fastcomments.

Кликните добавленный элемент embed, и в режиме разработчика в правом нижнем углу вы увидите поле ID со значением вроде html1:

Поле ID

Измените это на fastcomments и нажмите Enter:

Задать ID

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

Внизу экрана вы должны увидеть редактор кода, похожий на этот:

Открыть редактор

Скопируйте приведённый ниже код и вставьте его туда:

Сниппет навигации комментариев Wix

Copy

import wixLocation from 'wix-location';
$w.onReady(function () {
    function updateFastCommentsLocation() {
        try {
            const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');
            $w('#fastcomments').postMessage({'action': 'reload', 'url': url});
        } catch (err) {
            console.error('Wix -> FastComments Error', err);
        }
    }
    updateFastCommentsLocation();
    wixLocation.onChange( () => {
        updateFastCommentsLocation();
    });
});

Добавьте код навигации

Шаг 6: Отпразднуйте

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

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

Настройка

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

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

Язык 🇷🇺 Русский

Установка Wix