Add Comments to Wix Sites

Z FastComments możemy łatwo dodać komentarze na żywo do dowolnej strony Wix. Przejdziemy również przez zapewnienie, że każda strona, lub wpis na blogu, może mieć własny, unikalny wątek komentarzy.

Zwróć uwagę, że ten samouczek wymaga konta FastComments. Zaleca się, aby najpierw się zarejestrować, a następnie wrócić tutaj. Możesz założyć konto tutaj.

Krok 1: Edytuj właściwą stronę

W tym przykładzie dodamy FastComments Live Commenting do stron wpisów na blogu.

Aby to zrobić, otworzymy naszą stronę w edytorze Wix.

Następnie musimy upewnić się, że edytujemy właściwą stronę.

Chcemy upewnić się, że wyświetlamy unikalny wątek komentarzy dla każdego wpisu na blogu, więc edytujmy Blog Pages -> Post.

Krok pierwszy: Edytuj dynamiczną stronę wpisu

Krok 2: Dodaj blok osadzania

Następnie przejdziemy do Add -> Embed Code -> Embed HTML.

Krok drugi: Dodaj blok Embed HTML

To da nam na początek smutnie wyglądające pole:

Blok początkowy

Krok 3: Skopiuj i wklej niestandardowy kod

Ten przykład używa niestandardowego kodu, aby był zgodny z Wix. Nie będziesz mógł użyć fragmentów kodu FastComments z innych samouczków.

Otwórz formularz, aby dodać nasze niestandardowe okno HTML, klikając Enter Code i wybierając HTML:

Krok 3: Otwórz okno HTML

Skopiuj następujący fragment HTML i wklej go do okna, a następnie kliknij Update:

Fragment kodu komentarzy 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>

Krok 3: Wklej i Zapisz

Powinieneś teraz zobaczyć bardzo małą wersję widżetu komentarzy:

Krok 3: Wynik

Następnie ustawimy pozycję i rozmiar tak, aby pasowały do naszej strony.

Krok 4: Zmień rozmiar

Teraz, gdy dodaliśmy widżet komentarzy, ustawmy go na naszej stronie.

Krok 4: Zmiana rozmiaru

Dzięki temu samouczkowi będziemy mogli zmieniać bieżący wątek w zależności od aktywnej strony. Jednak nie będziemy mogli dynamicznie zmieniać rozmiaru widżetu komentarzy, dopóki Wix nie udostępni tej funkcjonalności. Do tego czasu będziesz musiał zdecydować, jak duży ma być obszar komentarzy na Twojej stronie i odpowiednio go rozmiarować.

Krok 5: Unikalne wątki komentarzy

Następnie skonfigurujmy to tak, aby wątek komentarzy zmieniał się w zależności od aktualnej strony, pozwalając użytkownikom na dyskusję nad aktualnie wyświetlaną treścią.

Bez poniższych kroków będziesz mieć tylko jeden globalny wątek komentarzy dla całej witryny — co nie jest zbyt przydatne.

Tryb deweloperski

Aby dodać tę funkcjonalność, musimy przejść do tego, co Wix nazywa Dev Mode.

Kliknij opcję Dev Mode u góry ekranu.

Włącz Tryb deweloperski

Ustaw ID elementu

Dodamy niestandardowy kod, aby to osiągnąć, ale najpierw musimy nadać nowemu elementowi osadzenia ID, aby można było się do niego odwoływać.

Nazwijmy go fastcomments.

Kliknij nowy element osadzenia, który dodaliśmy, a w trybie deweloperskim w prawym dolnym rogu powinieneś zobaczyć pole ID z wartością taką jak html1:

Pole ID

Zmień to na fastcomments i naciśnij Enter:

Ustaw ID

Teraz możemy dodać nasz niestandardowy kod, który poinformuje obszar komentarzy, jaką stronę wyświetlamy.

Na dole ekranu powinieneś zobaczyć edytor kodu podobny do tego:

Otwórz edytor

Skopiuj poniższy kod i wklej go tam:

Fragment nawigacji komentarzy 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();
    });
});

Dodaj kod nawigacji

Krok 6: Świętuj

Teraz możemy odetchnąć i podejrzeć naszą stronę. Powinieneś zobaczyć obszar komentarzy, który zmienia się w zależności od danej strony. Gratulacje!

Jeśli masz jakiekolwiek problemy, daj nam znać w polu komentarza poniżej.

Dostosowywanie

FastComments został zaprojektowany tak, aby można go było dostosować do twojej witryny.

Jeśli chcesz dodać niestandardowe style lub zmodyfikować konfigurację, Zobacz naszą dokumentację dotyczącą dostosowań, aby dowiedzieć się, jak.

Język 🇵🇱 Polski

Instalacja Wix