So installieren Sie ShareThis' Tools auf Webflow
Hinweis: Wenn Sie einen kostenlosen Webflow-Tarif haben, funktionieren die ShareThis -Tools leider nicht auf Ihrer Website, da die Funktion für benutzerdefinierten Code gesperrt ist.
In order for ShareThis tools to work on your Webflow website, follow the steps below to add your unique ShareThis code to the <head> section of your website:
Hinzufügen von ShareThis Tools auf allen Seiten
- Einloggen oder Anmelden auf der Plattform ShareThis .
- Wählen Sie das ShareThis Werkzeug aus, das Sie verwenden möchten, und aktivieren Sie es, indem Sie auf die Schaltfläche Werkzeug aktivieren button klicken.
- Dann passen Sie die Schaltflächen an, indem Sie Ihre sozialen Kanäle, die Größe, die Form sowie Extras wie die Mindestanzahl der Shares, die Sie haben möchten, bevor sie angezeigt werden, auswählen.
- Wählen Sie in der oberen rechten Ecke die Option Code aktivieren button . Klicken Sie im Pop-up-Fenster auf den Code kopieren button.
- Melden Sie sich auf der Website von Webflow an.
- Wählen Sie in Ihrem Projekt-Dashboard das Symbol mit den drei Punkten für das Projekt aus, für das Sie die Schaltflächen verwenden möchten, und klicken Sie auf Einstellungen.
- Gehen Sie in den Projekteinstellungen zum Abschnitt Benutzerdefinierter Code.
- Fügen Sie den eindeutigen ShareThis Code ein, den Sie in Schritt 4 kopiert haben, und klicken Sie auf Veröffentlichen.
Hinzufügen von ShareThis Tools auf bestimmten Seiten
- Einloggen oder Anmelden auf der Plattform ShareThis .
- Wählen Sie das ShareThis Werkzeug aus, das Sie verwenden möchten, und aktivieren Sie es, indem Sie auf die Schaltfläche Werkzeug aktivieren button klicken .
- Dann passen Sie die Schaltflächen an, indem Sie Ihre sozialen Kanäle, die Größe, die Form sowie Extras wie die Mindestanzahl der Shares, die Sie haben möchten, bevor sie angezeigt werden, auswählen.
- Wählen Sie in der oberen rechten Ecke die Option Code aktivieren button . Klicken Sie im Pop-up-Fenster auf den Code kopieren button.
- Melden Sie sich bei Ihrer Webflow-Website an.
- Öffnen Sie Ihre Website im Designmodus, wählen Sie Seiten in der linken Seitenleiste und dann Seiteneinstellungen bearbeiten auf der Seite, auf der Sie die Schaltflächen platzieren möchten.
- Blättern Sie in den Seiteneinstellungen nach unten zum Abschnitt Benutzerdefinierter Code.
- Fügen Sie den eindeutigen Code ShareThis ein, den Sie in Schritt 4 kopiert haben, und klicken Sie auf Veröffentlichen.
Hinzufügen von Inline-Werkzeugen ShareThis
Inline-Tools benötigen ein zusätzliches Codeschnipsel, um auf Ihrer Website zu funktionieren. Wenn Sie unsere Inline-Share-Buttons, Follow-Buttons, Reaction-Buttons oder Social-Feed-Tools auf Ihrer Website installieren möchten, müssen Sie den Platzierungscode dort hinzufügen, wo das Tool erscheinen soll.
- Wählen Sie in Ihrer ShareThis Plattform das ShareThis Tool, das Sie verwenden möchten, und kopieren Sie den Platzierungscode. Je nach dem, welches Tool Sie installieren, sollte der Code ähnlich wie dieser aussehen:
- Gehen Sie im Designmodus Ihrer Webflow-Website zu der Seite, auf der Ihre Schaltflächen erscheinen sollen.
- Wählen Sie in der linken Seitenleiste die Option Hinzufügen , suchen Sie nach der Option Einbetten und ziehen Sie sie an die Stelle, an der die Schaltflächen erscheinen sollen.
- Fügen Sie in das neue Fenster für den HTML-Einbettungscode den eindeutigen Code ShareThis ein, den Sie in Schritt 1 kopiert haben.
- Klicken Sie auf Speichern & Schließen.
- Klicken Sie auf Veröffentlichen.
Anmerkungen:
- Die Tools von ShareThis erscheinen möglicherweise nicht im Backend Ihrer Website, so dass Sie Ihre veröffentlichte Website besuchen müssen, um sie zu sehen.
- Webflow neigt dazu, die Schaltflächen in Flex-Container einzubetten, was die Anzeige einiger Inhalte einschränken könnte, insbesondere die letzte button.
Eine Möglichkeit, dies zu beheben, ohne die Anzeige des übergeordneten Containers von flex auf inline-block zu ändern, ist die Festlegung eines festen Werts für die Breite der Schaltflächen.
Klicken Sie dazu auf die Schaltflächen selbst und setzen Sie im Webflow-Editor ihre Breite auf einen größeren Wert als den aktuellen (wenn dies nur auf mobilen Bildschirmen geschieht, wenden Sie das gleiche Prinzip an, ändern aber den mobilen Haltepunkt oben im Webflow-Editor auf mobile Bildschirme/Tablets):