FastComments.com

Kommentare zu BigCommerce-Websites hinzufügen

Mit FastComments können wir ganz einfach eine Live-Kommentarfunktion auf jeder BigCommerce-Website hinzufügen.

Die untenstehenden Anweisungen gelten für einen Blog, der auf BigCommerce aufgebaut ist, funktionieren jedoch auch gut für jeden anderen Bereich von BigCommerce.

Beachte, dass dieses Tutorial ein FastComments-Konto erfordert. Es wird empfohlen, dass Sie sich zuerst registrieren und dann hierher zurückkehren. Sie können hier ein Konto erstellen.

Schritt 1: Bereiten Sie Ihr Theme vor Internal Link

Zuerst erstellen wir ein benutzerdefiniertes Theme, das wir bearbeiten werden. Wenn Sie bereits ein benutzerdefiniertes Theme eingerichtet haben, können Sie diesen Schritt überspringen.

Dafür gehen wir zu Storefront und dann zu Themes.

Storefront auswählen
Storefront auswählen
Themes auswählen
Themes auswählen

Für die Zwecke dieses Tutorials verwenden wir das Standard-Theme, aber die Anweisungen sind für alle Themes gleich.

Als Nächstes werden wir nicht auf Customize klicken. Klicken Sie stattdessen auf Advanced und Make a Copy.

Kopie erstellen
Kopie erstellen

Bestätigen Sie das Kopieren des Themes:

Kopie speichern
Kopie speichern

Sobald dies abgeschlossen ist, sollten Sie Ihr Theme unter Themes am unteren Rand der Seite aufgelistet sehen, wie hier.

Benutzerdefiniertes Theme erstellt
Benutzerdefiniertes Theme erstellt

Jetzt können wir unser neues Theme bearbeiten, um FastComments hinzuzufügen.

Theme-Dateien bearbeiten
Theme-Dateien bearbeiten

Schritt 2: Die korrekte Vorlage bearbeiten Internal Link

Der nächste Schritt besteht darin, den Widget-Code hinzuzufügen, der die Integration zum Laufen bringt.

Sobald Sie sich im Theme-Editor befinden, wie im vorherigen Schritt beschrieben, sehen Sie links einen Dateibrowser und rechts einen Editor.

Wir werden eine Vorlage bearbeiten, die unsere Blog-Beitragsseiten repräsentiert.

In der linken Navigation gehen Sie zu templates->pages->blog-post.html.

Vorlage öffnen
Vorlage öffnen

Schritt 3: Widget-Code hinzufügen Internal Link

Kopieren Sie nun den Code, den wir zur Installation von FastComments verwenden werden:

BigCommerce Comments Code
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.fcConfigs = [{
6 "tenantId": "demo"
7}];
8</script>
9

Jetzt fügen wir den Widget-Code in Line 6 ein. Es ist wichtig, dass der Code vor der Zeile mit \{{/partial}} eingefügt wird.

In Zeile 6 einfügen
In Zeile 6 einfügen

Am Ende sollten Sie etwas wie das Folgende haben:

Nach dem Hinzufügen des Codes
Nach dem Hinzufügen des Codes

Nun können wir die Datei speichern:

Speichern
Speichern

...und den Editor verlassen:

Editor bearbeiten
Editor bearbeiten

Schritt 4: Neues Theme aktivieren Internal Link

Unser letzter Schritt ist, die neue Theme-Vorlage zu verwenden.

Oben rechts sehen Sie nun entweder Publish oder Make Active Theme. Klicken Sie darauf, um fortzufahren und die Änderungen live zu schalten:

Änderungen veröffentlichen
Änderungen veröffentlichen

Jetzt können wir unsere Seite überprüfen! Wenn Sie zu einem Blog-Beitrag gehen, sollten Sie unten ein Kommentarfeld sehen.

Änderungen live
Änderungen live

Erfolg Internal Link

Gute Arbeit! Sie haben Live-Kommentare auf Ihrer BigCommerce-Website hinzugefügt.

Wenn Sie auf einen "permission denied"-Fehler gestoßen sind oder FastComments anpassen möchten, lesen Sie weiter.

Anpassung Internal Link

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

Wenn Sie benutzerdefinierte Styles hinzufügen oder die Konfiguration anpassen möchten, Sehen Sie sich unsere Anpassungsdokumentation an, um zu erfahren, wie.

Extra: Code-Snippet für den Page Builder Internal Link

Es wird nicht empfohlen, FastComments über den Page Builder von BigCommerce hinzuzufügen, da der Code dann manuell zu jeder gewünschten Seite hinzugefügt werden muss.

Wenn dies jedoch gewünscht ist, muss der folgende Code-Schnipsel verwendet werden. Code-Schnipsel aus anderen Tutorials funktionieren aufgrund der Eigenheiten von BigCommerce nicht:

Snippet für den BigCommerce Page Builder
Copy Copy
1
2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: "demo"
8 }];
9</script>
10