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: Скопируйте/вставьте пользовательский код

Этот пример использует пользовательский код для совместимости с Wix. Вы не сможете использовать фрагменты кода FastComments из других руководств.

Откройте форму для добавления нашего пользовательского HTML-диалога, нажав Enter Code и выбрав HTML:

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

Скопируйте следующий HTML-фрагмент и вставьте его в диалог, затем нажмите «Обновить»:

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

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: Вставить и сохранить

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

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

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

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

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

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

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

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

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

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

Режим разработчика

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

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

Включить Dev Mode

Задайте ID элемента

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

Давайте назовём его fastcomments.

Кликните новый встраиваемый элемент, который мы добавили, и в режиме разработчика в правом нижнем углу вы должны увидеть поле 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