Add Comments to Wix Sites

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

Зверніть увагу, що цей підручник вимагає облікового запису FastComments. Рекомендується спочатку зареєструватися, а потім повернутися сюди. Ви можете створити обліковий запис тут.

Крок 1: Відредагуйте потрібну сторінку

У цьому прикладі ми додамо FastComments Live Commenting на сторінки дописів блогу.

Для цього відкриємо наш сайт у редакторі Wix.

Потім потрібно переконатися, що ми редагуємо правильну сторінку.

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

Крок перший: Редагування динамічної сторінки допису

Крок 2: Додайте блок для вставки

Потім перейдемо до Add -> Embed Code -> Embed HTML.

Крок другий: Додати блок Embed HTML

У нас з'явиться сумний на вигляд блок, з якого можна почати:

Початковий блок

Крок 3: Скопіюйте та вставте власний код

Цей приклад використовує власний код для сумісності з Wix. Ви не зможете використовувати фрагменти коду FastComments з інших підручників.

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

Крок 3: Відкрийте HTML-діалог

Скопіюйте наведений HTML-фрагмент і вставте його в діалог, і натисніть Update:

Фрагмент коду для коментарів 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 елемента

Ми додаватимемо власний код для цього, але спочатку потрібно присвоїти новому вбудованому елементу ідентифікатор, за яким будемо звертатися.

Назвімо його 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