Social-Share-Buttons-Generator
Ein Social-Share-Generator schreibt den Code für Teilen-Schaltflächen für Sie. Haken Sie die Netzwerke an, stellen Sie Stil, Größe, Radius und Abstand ein — das Feld Einbettungscode aktualisiert sich sofort. Mit den vier voreingestellten Netzwerken liefert der Reiter Gehostetes JS ein einziges Tag — <script src="https://www.freewebtools.com/js/widgets/social-share.min.js" data-platforms="facebook,twitter,linkedin,whatsapp"> — und der Reiter HTML-Links dieselben Schaltflächen als einfache Links.
Plattformen
Anpassen
Voreinstellungen
Live-Vorschau
Einbettungscode
Beliebte Werkzeuge
Über Social-Share-Buttons-Generator
Dieser Generator erzeugt einsatzfertige Teilen-Schaltflächen für acht Ziele: Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram und E-Mail. Haken Sie unter Plattformen an, was Sie brauchen, und formen Sie es unter Anpassen: Stil (gefüllt, Umriss oder minimal), Anordnung (horizontal oder vertikal), Position (im Textfluss oder schwebend am linken beziehungsweise rechten Rand), Symbolgröße von 28 bis 56 Pixeln, Eckenradius von eckig bis rund und Abstand von 2 bis 16 Pixeln. Zwei Kontrollkästchen bestimmen, ob der Netzwerkname neben dem Symbol steht und ob die Herkunftszeile bleibt. Fünf Vorlagen — Standard, Kompakte Symbole, Schwebende Leiste, Umriss und Minimal — setzen alles mit einem Klick.
Die Vorschau ist ein nachgebildetes Browserfenster, Sie sehen die Schaltflächen also in einer Seite und nicht isoliert, und sie zeichnet sich bei jeder Änderung neu. Das Feld Einbettungscode bietet zwei Ausgaben. Gehostetes JS ist ein einzelnes Script-Tag mit data-Attributen: Nur Einstellungen, die von den Vorgaben abweichen, werden geschrieben, das hält das Tag kurz. HTML-Links ist ein div aus einfachen Links auf die Teilen-Adresse jedes Netzwerks, mit target="_blank" und rel="noopener noreferrer" — nichts zu laden, nichts auszuführen.
Lassen Sie Eigene URL leer, verwendet die HTML-Ausgabe den Platzhalter PAGE_URL, den Sie durch die zu teilende Adresse ersetzen; das gehostete Skript liest stattdessen die Adresse der aktuellen Seite und funktioniert deshalb unverändert auf jedem Artikel. Was Sie in Eigene URL eintragen, wird vor dem Einsetzen in das Attribut HTML-escaped.
Was er nicht tut: Er zählt keine Shares und setzt keine eigenen Cookies. Die Schaltflächen sind Links auf den Teilen-Dialog des jeweiligen Netzwerks; Zähler und Einwilligungsregeln liegen dort und nicht auf dieser Seite.
Anwendungsfälle
Anleitung
Haken Sie unter Plattformen die gewünschten Netzwerke an. Facebook, X (Twitter), LinkedIn und WhatsApp sind vorausgewählt; Pinterest, Reddit, Telegram und E-Mail stehen ebenfalls bereit.
Wählen Sie unter Anpassen Stil, Anordnung und Position und passen Sie die Regler Größe und Abstand sowie die Liste Eckenradius an Ihre Seite an.
Entscheiden Sie mit den Kästchen Beschriftungen anzeigen und Branding anzeigen, ob Netzwerknamen und Herkunftszeile erscheinen.
Tragen Sie bei Bedarf eine Adresse in Eigene URL ein. Lassen Sie das Feld leer, damit jeweils die Seite geteilt wird, auf der die Schaltflächen stehen.
Prüfen Sie die Live-Vorschau, die die Schaltflächen in einem nachgebildeten Browserfenster zeigt und sich nach jeder Änderung neu zeichnet.
Schalten Sie das Feld Einbettungscode zwischen Gehostetes JS und HTML-Links um, drücken Sie Kopieren und fügen Sie das Ergebnis in Ihre Seite ein.
Profi-Tipps
- Das gehostete Tag schreibt nur geänderte Einstellungen. Wirkt es überraschend kurz, liegt es daran, dass Stil, Anordnung, Größe 36, Radius 8 und Abstand 8 die Vorgaben sind und implizit bleiben.
- Lassen Sie Eigene URL leer, wenn die Schaltflächen jeweils ihre eigene Seite teilen sollen. Die HTML-Ausgabe trägt dann wörtlich PAGE_URL, was Sie vor dem Einfügen ersetzen müssen.
- Beschriftungen anzeigen ändert die Geometrie, nicht nur den Text: Ohne Beschriftung wird jede Schaltfläche ein Quadrat mit exakt der Pixelgröße des Reglers, mit Beschriftung wächst sie auf die Namensbreite.
- Schwebend links und Schwebend rechts ignorieren die Liste Anordnung — eine schwebende Leiste ist immer eine senkrechte Spalte — stellen Sie Anordnung also nur ein, wenn Position auf Im Textfluss steht.
- Der Stil Minimal zeichnet das Symbol in der Netzwerkfarbe, ohne Hintergrund und ohne Rahmen. Prüfen Sie ihn auf dunklen Seiten vor der Veröffentlichung gegen Ihren eigenen Hintergrund, denn er erbt nichts.
Fehlerbehebung
Die erzeugten HTML-Links zeigen alle auf PAGE_URL.
Das ist der Platzhalter, wenn Eigene URL leer ist. Tragen Sie die zu teilende Adresse in Eigene URL ein und kopieren Sie erneut, oder ersetzen Sie PAGE_URL im eingefügten Code durch die Adresse der Seite. Die Ausgabe Gehostetes JS braucht das nicht, weil das Skript die Adresse zur Laufzeit liest.
Eine schwebende Position ändert die Liste Anordnung nicht.
Eine schwebende Leiste ist immer senkrecht gestapelt, deshalb wirkt Anordnung nur bei Position Im Textfluss. Stellen Sie Position zurück auf Im Textfluss, wenn Sie eine waagerechte Reihe brauchen, oder behalten Sie das Schweben und steuern Sie die Spalte über den Regler Abstand.
Die Schaltflächen im Stil Minimal sind auf meiner Seite kaum zu sehen.
Minimal zeichnet das Symbol in der Farbe des Netzwerks, ohne Hintergrund und ohne Rahmen, verlässt sich also ganz auf den Kontrast Ihrer Seite. Wechseln Sie zu Gefüllt oder zu Umriss, das einen farbigen Zwei-Pixel-Rahmen um jedes Symbol behält.
Häufig gestellte Fragen
Haken Sie unter Plattformen die Netzwerke an, stellen Sie das Aussehen unter Anpassen ein und kopieren Sie eine der beiden Ausgaben. Gehostetes JS ist ein einzelnes Script-Tag, das Sie dort einfügen, wo die Schaltflächen erscheinen sollen. HTML-Links ist ein Block aus Links, der in jede Vorlage passt, auch in eine ohne externes JavaScript.
Es ist ein gewöhnlicher Link auf die Teilen-Adresse des Netzwerks. Facebook nutzt https://www.facebook.com/sharer/sharer.php?u= gefolgt von der kodierten Adresse, X nutzt https://twitter.com/intent/tweet?url=, LinkedIn /sharing/share-offsite/?url=. Der Reiter HTML-Links schreibt alle mit target="_blank" und rel="noopener noreferrer".
Acht: Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram und E-Mail. Die ersten vier sind vorausgewählt. E-Mail verwendet einen mailto:-Link mit der Adresse im Nachrichtentext, öffnet also das Mailprogramm der Besucherin statt eines Webdienstes.
Die Ausgabe HTML-Links ja. Sie ist ein div aus Links, wird also auch bei abgeschaltetem Scripting angezeigt und funktioniert, und sie fügt Ihrer Seite keine Fremdanfragen hinzu. Die Ausgabe Gehostetes JS braucht JavaScript, weil das Skript die Schaltflächen zeichnet und die aktuelle Adresse zur Laufzeit liest.
Ja, und der erzeugte Code gehört Ihnen. Branding anzeigen fügt eine Herkunftszeile hinzu; nehmen Sie den Haken weg, wenn Sie das nicht möchten. Die Ausgabe HTML-Links ist vollständig eigenständig, das gehostete Skript wird dagegen von freewebtools.com geladen — wichtig, wenn Ihre Seite externe Skripte blockiert.
Ja. Tragen Sie sie in Eigene URL ein, dann verwenden beide Ausgaben sie: Das gehostete Tag bekommt ein data-url-Attribut und die HTML-Links zeigen auf diese Adresse. Bleibt das Feld leer, greift die HTML-Ausgabe auf den Platzhalter PAGE_URL zurück, während das gehostete Skript die Seite liest, auf der es läuft.
Nehmen Sie den Haken bei Beschriftungen anzeigen weg, stellen Sie Eckenradius auf Kreis und wählen Sie eine Größe am Regler — 32 Pixel nutzt die Vorlage Kompakte Symbole. Ohne Beschriftung wird jede Schaltfläche ein Quadrat genau dieser Größe, das der runde Radius zur Scheibe macht.
Gefüllt färbt die Schaltfläche in der Markenfarbe des Netzwerks mit weißem Symbol. Umriss lässt den Hintergrund durchsichtig und zeichnet einen zwei Pixel breiten Rahmen in der Markenfarbe, das Symbol in derselben Farbe. Minimal entfernt Hintergrund und Rahmen und lässt nur das farbige Symbol stehen.
Nein. Es sind Links, die den Teilen-Dialog des jeweiligen Netzwerks öffnen, und kein Netzwerk stellt beliebigen Websites noch einen öffentlichen Zähler bereit. Wenn Sie Zahlen brauchen, holen Sie sie aus Ihrer Webanalyse oder aus den Berichten der Netzwerke, nicht aus der Schaltfläche.
Ja. Stellen Sie Position auf Schwebend links oder Schwebend rechts, oder drücken Sie die Vorlage Schwebende Leiste, die zusätzlich auf eine senkrechte Spalte umschaltet, die Beschriftungen ausblendet und die Größe auf 40 Pixel setzt. Die Vorschau rückt die Leiste an den passenden Rand des nachgebildeten Fensters.