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

  1. Log in or sign up to the ShareThis Plattform.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to Webflow’s website. On your Projects Dashboard, select the three dots icon from the project you want your buttons on, and click Settings.
  5. Gehen Sie in den Projekteinstellungen zum Abschnitt Benutzerdefinierter Code.
  6. Paste the unique ShareThis code that you copied from step 3 and click Publish.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

Hinzufügen von ShareThis Tools auf bestimmten Seiten

  1. Log in or sign up to the ShareThis Plattform.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to your Webflow website. Open your website in design mode, select Pages from the left sidebar, then select Edit Page Settings from the specific page you want your buttons to be on.
  5. Blättern Sie in den Seiteneinstellungen nach unten zum Abschnitt Benutzerdefinierter Code.
  6. Fügen Sie den eindeutigen Code ShareThis ein, den Sie in Schritt 4 kopiert haben, und klicken Sie auf Veröffentlichen.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

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.

  1. 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:
  2. Gehen Sie im Designmodus Ihrer Webflow-Website zu der Seite, auf der Ihre Schaltflächen erscheinen sollen.
  3. 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.
  4. Fügen Sie in das neue Fenster für den HTML-Einbettungscode den eindeutigen Code ShareThis ein, den Sie in Schritt 1 kopiert haben.
  5. Klicken Sie auf Speichern & Schließen.
  6. 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):
Das Feld für die Breite der Schaltflächen wird im Webflow-Editor auf 180 gesetzt, andere Werte werden nicht geändert.