Add Comments to Wix Sites

Met FastComments kunnen we eenvoudig live reacties toevoegen aan elke Wix-site. We gaan ook door hoe we ervoor zorgen dat elke pagina, of blogpost, zijn eigen unieke discussiedraad kan hebben.

Houd er rekening mee dat deze tutorial een FastComments-account vereist. Het wordt aanbevolen dat u zich eerst aanmeldt en daarna hier terugkomt. U kunt hier een account aanmaken.

Stap 1: Bewerk de juiste pagina

Voor dit voorbeeld gaan we FastComments Live Commenting toevoegen aan blogpostpagina's.

Om dit te doen, openen we onze site in de Wix-editor.

Vervolgens moeten we ervoor zorgen dat we de juiste pagina bewerken.

We willen ervoor zorgen dat we voor elk blogbericht een unieke reactietraad tonen, dus laten we Blog Pages -> Post bewerken.

Stap één: Bewerk de dynamische berichtpagina

Stap 2: Voeg een insluitblok toe

Vervolgens gaan we naar Add -> Embed Code -> Embed HTML.

Stap twee: Voeg een Embed HTML-blok toe

Dit geeft ons een wat treurig uitziend vak om mee te beginnen:

Het startblok

Stap 3: Kopieer/plak aangepaste code

Dit voorbeeld gebruikt aangepaste code om compatibel te zijn met Wix. Je kunt de FastComments-codefragmenten uit andere handleidingen niet gebruiken.

Open het formulier om onze aangepaste HTML-dialoog toe te voegen door op Enter Code te klikken en HTML te selecteren:

Stap 3: HTML-dialoog openen

Kopieer het volgende HTML-fragment en plak het in de dialoog, en klik op Update:

Wix Reacties Codefragment

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>

Stap 3: Plakken en opslaan

Je zou nu een zeer kleine versie van de reacties-widget moeten zien:

Stap 3: Het resultaat

Vervolgens positioneren en schalen we dit zodat het op onze pagina past.

Stap 4: Grootte aanpassen

Nu we de reactie-widget hebben toegevoegd, laten we deze op onze pagina positioneren.

Stap 4: Formaat aanpassen

Met deze handleiding kunnen we de huidige discussiedraad wijzigen op basis van de actieve pagina. We kunnen de reactie-widget echter niet dynamisch van formaat veranderen totdat Wix deze functionaliteit beschikbaar stelt. Tot die tijd moet je beslissen hoe groot je het reactiegebied op je pagina wilt hebben en de grootte ervan dienovereenkomstig instellen.

Stap 5: Unieke reactiedraden

Vervolgens stellen we het zo in dat de commentaardraad verandert op basis van de huidige pagina, zodat gebruikers kunnen discussiëren over de momenteel weergegeven inhoud.

Zonder de volgende stappen heb je slechts één globale commentaardraad voor je hele site - wat niet erg nuttig is.

Dev Mode

Om deze functionaliteit toe te voegen, moeten we naar wat Wix Dev Mode noemt.

Klik op de optie Dev Mode bovenaan het scherm.

Dev Mode inschakelen

Stel het element-ID in

We gaan aangepaste code toevoegen om dit te realiseren, maar eerst moeten we het nieuwe embed-element een ID geven zodat we ernaar kunnen verwijzen.

Laten we het fastcomments noemen.

Klik op het nieuwe embed-element dat we hebben toegevoegd, en in dev mode zie je rechtsonder een ID-veld met een waarde zoals html1:

Het ID-veld

Wijzig dit naar fastcomments en druk op enter:

Stel het ID in

Nu kunnen we onze aangepaste code toevoegen die het commentaargedeelte vertelt welke pagina we bekijken.

Onderaan het scherm zou je een code-editor zoals deze moeten zien:

Open de editor

Kopieer de volgende code en plak deze daar:

Navigatiesnippet voor Wix-opmerkingen

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

Voeg de navigatiecode toe

Stap 6: Vier het

Nu kunnen we even ademhalen en onze site bekijken. Je zou een commentaargedeelte moeten zien dat verandert op basis van de opgegeven pagina. Gefeliciteerd!

Als je problemen hebt, laat het ons weten in het onderstaande reactieveld.

Aanpassingen

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen of de configuratie wilt bijstellen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.

Taal 🇳🇱 Nederlands

Wix-installatie