Share Buttons Generator
Icons, Farben und Code an einem Ort
Erstellen Sie Share Buttons für Ihre Website in unter einer Minute. Zuerst wählen Sie die Netzwerke, eine Form und Ihre Farben, dann das Layout. Danach kopieren Sie sauberes HTML + CSS oder reines HTML mit Inline-Styles. Es gibt kein fremdes Skript, kein Cookie und keine Anmeldung.
- KostenlosPreis
- 32 SVGIcons
- HTML + CSS oder reines HTMLCode
- KeinsTracking
Share Buttons Generator
Netzwerke, Form und Farben wählen, dann das HTML kopieren
Die Buttons folgen der Reihenfolge Ihrer Haken.
Instagram, YouTube, TikTok und die anderen grauen haben keinen Teilen-Link. Wechseln Sie zu „Auf meine Profile verlinken“, um sie zu nutzen.
Fügen Sie die volle Adresse jedes Profils ein. Ein Button ohne Adresse zeigt auf #, bis Sie eine eintragen.
- Buttons
- 0
- Code-Größe
- 0
- Skripte
- 0
Vorschau und Code ändern sich bei jeder Einstellung. Kopieren Sie den Code, wenn er passt.
Was dieses Tool für Share Buttons macht
Share Buttons sind die kleinen Icons, mit denen Leser Ihre Seite weitergeben. Ein Klick öffnet Facebook, X, WhatsApp oder E-Mail, und Ihr Link steht schon drin. So kann jeder Leser für jemand Neues der erste Link zu Ihrer Website werden.
Dieses Tool baut diese Buttons für Sie. Zuerst haken Sie die gewünschten Netzwerke aus 32 SVG-Icons an. Dann wählen Sie eine Form, von eckig bis Kreis, und wie rund die Ecken sind. Danach nehmen Sie Markenfarben oder Ihren eigenen Hintergrund und Ihre Icon-Farbe.
Anschließend legen Sie das Layout fest. Die Buttons stehen nebeneinander, gestapelt, im Raster oder schweben am Bildschirmrand. Schließlich kopieren Sie den Code. Die Version mit HTML + CSS hält den Stil in einem kleinen Block, während reines HTML jeden Stil direkt auf das Tag setzt.
Die Buttons sind einfache Links zur Teilen-Seite jedes Netzwerks. Deshalb gibt es kein Widget, kein Tracking-Skript und nichts, was die Seite bremst. Außerdem bekommt jeder Link ein klares aria-label, sodass Screenreader-Nutzer „Auf Facebook teilen“ hören statt gar nichts.
Was in einem Share Button steckt
Jeder Button ist ein Link mit drei Teilen. Erstens ist die Adresse die Teilen-Seite des Netzwerks, ergänzt um Ihren Link und Titel. Zweitens ist das Icon ein Inline-SVG, daher bleibt es in jeder Größe scharf und braucht keine extra Datei.
Der dritte Teil ist das Label. Es ist sichtbarer Text wie „Facebook“ oder ein verstecktes aria-label. Dadurch ergibt der Button auch für Menschen Sinn, die das Icon nicht sehen.
Social-Media-Icons als SVG, bereit für Ihren Stil
Das Tool zeichnet alle 32 Social-Media-Icons als SVG. Das heißt, jedes Icon ist ein Pfad, gefüllt mit Ihrer Farbe. So wirken ein weißes Icon auf Markenfarbe und ein dunkles Icon auf zarter Tönung beide scharf.
Jede Änderung zeigt sich sofort in der Live-Vorschau. Außerdem können Sie die Vorschau auf weißem, hellgrauem oder dunklem Hintergrund sehen. Auf diese Weise wissen Sie, wie die Buttons auf Ihrer echten Seite aussehen.
HTML für Social-Media-Icons: zwei Code-Arten
Zudem wählen Sie HTML + CSS für eine Website oder ein Theme. Dann bekommen Sie einen Style-Block und kurze Klassennamen, und auch Hover-Effekte funktionieren.
Danach wählen Sie dagegen reines HTML für Page-Builder, Markdown oder eine HTML-E-Mail. Dort sitzt jeder Stil auf dem Tag, also braucht es sonst nichts.
Den Share Buttons Generator in Aktion sehen
Ein kurzes Video zeigt jeden Schritt. Wählen Sie dann unten Ihre Sprache und schalten Sie bei Bedarf Untertitel ein.
So erstellen Sie Share Buttons
Sechs kurze Schritte. Dabei passiert alles in diesem Tab.
Teilen oder Folgen wählen
Nutzen Sie oben „Buttons, die“. Eine Seite teilen erzeugt Teilen-Links, und Auf meine Profile verlinken zeigt auf Ihre eigenen Konten.
Netzwerke anhaken
Haken Sie jedes gewünschte Netzwerk an. Die Buttons erscheinen in der Reihenfolge Ihrer Haken, also haken Sie das wichtigste zuerst an.
Seite oder Profile eintragen
Geben Sie die Seitenadresse und den Text zum Teilen ein. Für Folgen-Buttons fügen Sie stattdessen jeden Profil-Link ein.
Form und Farben wählen
Wählen Sie eine Form, schieben Sie den Rundungsregler und nehmen Sie einen Stil. Dann behalten Sie die Markenfarben oder setzen eigene Hintergrund- und Icon-Farben.
Layout festlegen
Setzen Sie die Buttons nebeneinander, gestapelt, ins Raster oder in eine schwebende Seitenleiste. Außerdem stellen Sie Größe, Abstand und Text ein.
Code kopieren
Wählen Sie HTML + CSS oder reines HTML, dann kopieren Sie den Code oder laden ihn als HTML-Datei herunter. Danach fügen Sie ihn einmal dort ein, wo die Buttons stehen sollen.
Warum diese Share Buttons nutzen
Drei Gründe, eigene Buttons zu bauen statt ein Widget einzubinden.
Kein Widget, kein Tracking
Teilen-Widgets laden oft ein Skript, setzen Cookies und verfolgen Ihre Leser. Diese Buttons sind dagegen einfache Links. So bleibt Ihre Seite schnell, und in Ihrer Datenschutzerklärung müssen Sie nichts extra aufführen.
Jeder Stil an einem Ort
Form, Rundung, Farben, Größe, Layout und Hover liegen auf einem Bildschirm. Außerdem geben Ihnen sechs schnelle Looks mit einem Klick einen guten Start, und danach lässt sich jede Einstellung ändern.
Code, der überall passt
Die Version mit HTML + CSS passt zu einer Website oder einem Theme. Gleichzeitig funktioniert reines HTML dort, wo Sie kein CSS einfügen können, etwa in einem Page-Builder-Block oder einer E-Mail.
Wie die Share Buttons gebaut sind
Drei Regeln formen den Code, den Sie kopieren. Wenn Sie sie kennen, nutzen Sie ihn besser.
- Jedes Netzwerk hat eine eigene Teilen-Adresse Facebook, X, LinkedIn und die anderen haben je eine Seite, die einen fertigen Beitrag öffnet. Das Tool hängt Ihren kodierten Link und Titel an diese Adresse. Manche Apps wie Viber und Messenger nutzen jedoch einen App-Link, daher funktionieren sie am besten auf dem Handy.
- Teilen-Links bleiben nofollow Ein Teilen-Link ist keine Seite, für die Sie bürgen. Deshalb markiert das Tool Teilen-Links mit rel="nofollow noopener noreferrer". Profil-Links bekommen dagegen rel="me", was manchen Netzwerken zeigt, dass das Profil Ihnen gehört.
- Der Kontrast entscheidet, was man sieht Ein Icon braucht mindestens einen Kontrast von 3 zu 1 zum Hintergrund, damit man es gut sieht. Das ist die Regel im WCAG-Leitfaden zum Nicht-Text-Kontrast. Wenn Ihre eigenen Farben darunter liegen, warnt Sie das Tool also.
Häufige Fehler bei Share Buttons
Jeder davon kostet Shares, selbst mit guten Buttons.
Zu viele Netzwerke
Zwanzig Buttons wirken wie Rauschen. Behalten Sie stattdessen die drei bis sechs, die Ihre Leser wirklich nutzen.
Icons ohne Label
Ein Screenreader kann kein Icon lesen. Deshalb fügt der Code jedem Button ein aria-label hinzu.
Ein blasses Icon auf blasser Farbe
Weiß auf Hellgelb ist schwer zu sehen. Also achten Sie auf den Kontrast-Hinweis und korrigieren Sie die Farbe.
Die falsche Seitenadresse
Dann teilt jede Seite Ihre Startseite. Haken Sie stattdessen bei Vorlagen die automatische Adresse an.
Zu kleine Buttons auf dem Handy
Ein winziger Button ist schwer zu tippen. Daher sollten Sie 40 Pixel oder mehr für den Daumen einplanen.
Eine schwebende Leiste über dem Inhalt
Eine Seitenleiste kann auf kleinen Bildschirmen Text verdecken. Deshalb testen Sie sie vor dem Veröffentlichen auf einem Handy.
Häufige Fragen zu Share Buttons
Ist dieser Share Buttons Generator kostenlos?
Ja. Es gibt keinen Preis, keine Anmeldung und kein Wasserzeichen im Code. Denn Ihr Browser erledigt die ganze Arbeit.
Verfolgen die Buttons meine Leser?
Nein. Es sind einfache Links, ohne Skript von uns oder den Netzwerken. Daher sieht ein Netzwerk einen Besuch erst, wenn jemand klickt.
Wie viele Netzwerke kann ich nutzen?
Es gibt 32 Icons. Davon können 22 eine Seite teilen, während die anderen, etwa Instagram und YouTube, auf ein Profil verlinken.
Warum kann ich Instagram im Teilen-Modus nicht anhaken?
Instagram, YouTube und TikTok haben keine Webadresse, die einen Link teilt. Deshalb wechseln Sie zu „Auf meine Profile verlinken“, um sie zu nutzen.
Was ist der Unterschied zwischen Teilen- und Folgen-Buttons?
Ein Teilen-Button postet Ihre Seite im Konto des Lesers. Ein Folgen-Button dagegen bringt den Leser zu Ihrem Profil.
Welche Code-Art soll ich wählen?
Nehmen Sie HTML + CSS für eine Website oder ein Theme. Für Page-Builder, Markdown oder E-Mails nehmen Sie dagegen reines HTML.
Warum fehlen Hover-Effekte bei reinem HTML?
Ein Hover-Effekt braucht eine CSS-Regel, und Inline-Styles können keine enthalten. Deshalb nutzen Sie HTML + CSS, wenn Sie den Effekt wollen.
Was bewirkt die Rundung?
Sie legt fest, wie rund die Ecken sind, als Anteil der Button-Höhe. Also gibt null scharfe Ecken und 50 eine volle Kurve.
Welche Formen kann ich wählen?
Eckig, abgerundet, Kreis, Pille, Blatt und Sechseck. Dabei passt die Pille am besten, wenn die Buttons die Netzwerknamen zeigen.
Kann ich eigene Farben nutzen?
Ja. Entfernen Sie den Haken bei „Markenfarbe jedes Netzwerks nutzen“, dann wählen Sie eine Hintergrund- und eine Icon-Farbe.
Was bedeuten die Stile?
Voll füllt den Button, und Verlauf blendet ihn. Umriss zeichnet nur einen Rand, zarte Tönung nutzt eine blasse Füllung, und nur Icon lässt den Hintergrund weg.
Wie setze ich die Buttons nebeneinander?
Wählen Sie „Nebeneinander“ unter Layout. Dann stehen sie in einer Reihe und rutschen auf kleinen Bildschirmen in eine neue Zeile.
Was ist die schwebende Seitenleiste?
Sie heftet die Buttons an den linken Fensterrand, auf halber Höhe. Daher bleiben sie sichtbar, während der Leser scrollt.
Können die Buttons jede Seite teilen, auf der sie stehen?
Ja. Haken Sie bei HTML + CSS die automatische Adresse an. Dann füllt ein kleines Skript Adresse und Titel der Seite ein.
Wie funktioniert der Button zum Link-Kopieren?
Er kopiert die Seitenadresse in die Zwischenablage. Weil das ein Skript braucht, fügt der Code dafür ein paar Zeilen hinzu.
Wo füge ich den Code ein?
Fügen Sie ihn einmal dort ein, wo die Buttons stehen sollen, zum Beispiel nach einem Beitrag. In WordPress nutzen Sie dafür einen Block „Individuelles HTML“.
Kann ich den Klassennamen ändern?
Ja. Außerdem tippen Sie unter „CSS-Klassenname“ einen neuen Namen ein, damit die Buttons nie mit Ihren Styles kollidieren.
Sind die Icons SVG?
Ja. Jedes Icon ist ein einzelner Inline-SVG-Pfad, deshalb bleibt es in jeder Größe scharf und braucht keine Bilddatei.
Kann ich die SVG-Icons auch anderswo nutzen?
Ja, kopieren Sie das SVG aus dem Code. Trotzdem sollten Sie die Markenregeln jedes Netzwerks beachten, wenn Sie sein Logo zeigen.
Wie groß sollten Share Buttons sein?
Etwa 40 bis 48 Pixel passen gut auf Handy und Computer. Kleinere Buttons sind dagegen schwer zu tippen.
Helfen Share Buttons bei SEO?
Nicht direkt, denn geteilte Inhalte sind kein Ranking-Faktor. Jedoch bringen mehr Shares mehr Besucher, und einige davon verlinken Sie vielleicht.
Warum sind Teilen-Links nofollow?
Ein Teilen-Link führt zu einem Werkzeug, nicht zu Inhalten, die Sie empfehlen. Daher ist nofollow die ehrliche Wahl.
Funktionieren die Buttons auf dem Handy?
Ja. Auf dem Handy öffnen WhatsApp, Viber, Messenger und SMS sofort die App.
Kann ich sie in einer HTML-E-Mail nutzen?
Ja, mit dem reinen HTML-Code. Jedoch blenden manche E-Mail-Apps SVG aus, also testen Sie in den Apps Ihrer Leser.
Speichert das Tool meine Einstellungen?
Nein. Nach dem Schließen des Tabs bleibt nichts gespeichert. Deshalb kopieren oder laden Sie den Code vorher herunter.
Kann ich Folgen-Buttons für meine Profile machen?
Ja. Wählen Sie „Auf meine Profile verlinken“, haken Sie Ihre Netzwerke an und fügen Sie jede Profiladresse ein. Ein Button ohne Adresse zeigt auf #, bis Sie eine eintragen.
Mehr Tools zum Teilen und für HTML
Ein paar Seiten, die gut zu Share Buttons passen.
- Open Graph Generator
Schreiben Sie die Tags hinter der Karte, die ein Link zeigt.
- Online-HTML-Editor
Fügen Sie den Button-Code ein und testen Sie ihn live.
- HTML Minifier
Verkleinern Sie den Code, bevor Sie ihn einfügen.
- Farbschema-Generator
Finden Sie Button-Farben, die zu Ihrer Marke passen.
- SEO Checker
Prüfen Sie Ihre Seite, Share Buttons inklusive.
Erstellen Sie jetzt Ihre Share Buttons
Haken Sie Ihre Netzwerke an, wählen Sie einen Look und kopieren Sie den Code. Außerdem ist das Tool kostenlos, und nichts von Ihrer Eingabe verlässt diesen Tab.