Add Comments to Wix Sites

Für dieses Beispiel werden wir FastComments Live-Kommentare zu Blog-Post-Seiten hinzufügen.

Dazu öffnen wir unsere Website im Wix-Editor.

Anschließend müssen wir sicherstellen, dass wir die richtige Seite bearbeiten.

Wir möchten sicherstellen, dass wir für jeden Blog-Beitrag einen eindeutigen Kommentarthread anzeigen, daher bearbeiten wir Blog Pages -> Post.

Schritt Eins: Die dynamische Beitragsseite bearbeiten

Dann gehen wir zu Add -> Embed Code -> Embed HTML.

Schritt Zwei: Einen Embed-HTML-Block hinzufügen

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

Der Startblock

Dieses Beispiel verwendet benutzerdefinierten Code, um mit Wix kompatibel zu sein. Sie können die FastComments-Codeausschnitte aus anderen Tutorials nicht verwenden.

Öffnen Sie das Formular, um unseren benutzerdefinierten HTML-Dialog hinzuzufügen, indem Sie auf Enter Code klicken und HTML auswählen:

Schritt 3: HTML-Dialog öffnen

Kopieren Sie den folgenden HTML-Snippet und fügen Sie ihn in den Dialog ein, und klicken Sie auf Update:

Wix-Kommentare Code-Snippet

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Schritt 3: Einfügen und Speichern

Sie sollten nun eine sehr kleine Version des Kommentar-Widgets sehen:

Schritt 3: Das Ergebnis

Als Nächstes werden wir die Position und Größe anpassen, damit es auf unsere Seite passt.

Nun, da wir das Kommentar-Widget hinzugefügt haben, ordnen wir es auf unserer Seite an.

Schritt 4: Größe ändern

Mit diesem Tutorial können wir den aktuellen Thread basierend auf der aktiven Seite ändern. Allerdings werden wir das Kommentar-Widget nicht dynamisch skalieren können, bis Wix diese Funktionalität bereitstellt. Bis dahin müssen Sie entscheiden, wie groß der Kommentarbereich auf Ihrer Seite sein soll, und ihn entsprechend dimensionieren.

Als Nächstes richten wir alles so ein, dass sich der Kommentar-Thread basierend auf der aktuellen Seite ändert, sodass Benutzer über die aktuell angezeigten Inhalte diskutieren können.

Ohne die folgenden Schritte haben Sie nur einen einzigen globalen Kommentar-Thread für Ihre gesamte Website – was nicht sehr nützlich ist.

Entwicklermodus

Um diese Funktion hinzuzufügen, müssen wir in das, was Wix Dev Mode nennt, wechseln.

Klicken Sie auf die Option Dev Mode oben auf dem Bildschirm.

Dev Mode aktivieren

Element-ID festlegen

Wir werden benutzerdefinierten Code hinzufügen, um dies zu erreichen, aber zuerst müssen wir dem neuen Embed-Element eine ID geben, auf die wir verweisen können.

Nennen wir es fastcomments.

Klicken Sie auf das neue Embed-Element, das wir hinzugefügt haben. Im Entwicklermodus sollten Sie unten rechts ein ID-Feld sehen mit einem Wert wie html1:

Das ID-Feld

Ändern Sie dies zu fastcomments und drücken Sie Enter:

ID setzen

Jetzt können wir unseren benutzerdefinierten Code hinzufügen, der dem Kommentarbereich mitteilt, welche Seite wir gerade ansehen.

Unten auf dem Bildschirm sollten Sie einen Code-Editor wie diesen sehen:

Editor öffnen

Kopieren Sie den folgenden Code und fügen Sie ihn dort ein:

Wix-Kommentare Navigations-Snippet

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Fügen Sie den Navigationscode hinzu

Jetzt können wir durchatmen und unsere Website in der Vorschau ansehen. Sie sollten einen Kommentarbereich sehen, der sich je nach angezeigter Seite ändert. Herzlichen Glückwunsch!

Wenn Sie Probleme haben, teilen Sie uns diese im Kommentarbereich unten mit.

FastComments ist so konzipiert, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefiniertes Styling hinzufügen oder die Konfiguration anpassen möchten, sehen Sie sich unsere Dokumentation zu Anpassungen und Konfiguration an, um zu erfahren, wie.