Wie fügen Sie einen Social Share Button auf Ihrer Website hinzu? (Tutorial)

In diesem Artikel erfahren Sie, warum und wie Sie innerhalb weniger Minuten einen Social Share Button auf Ihrer Website implementieren können.

Warum ein Social Share Button auf Ihrer Blogseite?

Aus den folgenden Gründen sollten Sie einen Social Share Button haben:

• Social Shares sind ein „SEO Ranking Signal“, d. h. je öfter Ihr Blog geteilt wird, desto besser wird er gefunden;
• **Mehr Brand Exposure. ** Ganz einfach: Je mehr Menschen Ihren Markennamen sehen, desto eher wollen sie Ihre Produkte kaufen / Ihre Dienstleistungen in Anspruch nehmen.
• Verbessern Sie das Kundenerlebnis. Wenn Kunden Ihren Blog teilen möchten, helfen Sie ihnen dabei!
• Mehr Besucher. Auch logisch: Je öfter etwas geteilt wird, desto mehr Menschen werden die Seite besuchen.

Warum sollten Sie keinen Social Share Button haben?

Angesichts des oben Beschriebenen scheint es ein No-Brainer zu sein. Social Share Buttons haben eigentlich nur Vorteile. Aber stimmt das wirklich? Es wurden Untersuchungen zum Teilverhalten von Besuchern durchgeführt (siehe beispielsweise diesen Beitrag von Seattlewebdesign), aus denen hervorgeht, dass Social Share Buttons fast nicht genutzt werden.

Und wenn sie ohnehin fast nicht genutzt werden, was ist dann der Nutzen eines Social Share Buttons?

Berechtigte Frage. Wenn sich herausstellt, dass Ihr Social Share Button nicht genutzt wird, lautet unser Rat: Entfernen Sie den Button einfach.

Andererseits liegt es vielleicht an etwas anderem. Könnte es sein, dass Ihr Social Share Button nicht genug auffällt, weil die Buttons genauso aussehen wie auf allen anderen Websites? Vielleicht lädt er deshalb gar nicht dazu ein, darauf zu klicken?

Probieren Sie dann einmal einen einzigartigen Social Share Button. Nachfolgend erklären wir, wie Sie innerhalb von 5 Minuten einen eigenen Social Share Button implementieren können.

Wie fügen Sie einen Social Share Button hinzu?

Der erste Schritt ist das Finden eines einzigartigen Social Share Buttons. Wir haben ein öffentliches Design aus dem Internet übernommen, ursprünglich erstellt von einem gewissen Nate. Sie müssen das Rad schließlich nicht immer selbst neu erfinden.

HTML

Die erste Frage, die Sie sich stellen müssen, ist, wo Sie den Social Share Button haben möchten. Wir haben uns dafür entschieden, ihn an einer „fixed“ Position auf dem Bildschirm zu platzieren (unten links). So ist der Button immer sichtbar. Den untenstehenden Code fügen Sie in den HTML-Body Ihrer Seite ein. published

HTML-Code für den Social Share Button

**Achtung: **

• Sie benötigen Fontawesome für die Icons.
• Die Links zu RentVisie können Sie natürlich durch Ihre eigene URL ersetzen.

Am Ende des Artikels finden Sie einen Link zu einem Codepen, wo Sie den Code direkt kopieren können (inklusive Zugriff auf Fontawesome).

SCSS

Einer der wichtigsten Aspekte: das Styling. Der Button muss natürlich gut aussehen. Nachfolgend finden Sie unseren Code. Beachten Sie, dass wir die Property position: fixed verwenden, um den Button unten links auf dem Bildschirm zu fixieren. published

Styling: CSS für den Social Share Button

Achtung: Wir haben das Styling in SCSS geschrieben. Der ursprüngliche Code ist CSS, diesen können Sie ebenfalls verwenden.

Javascript

Und zum Schluss nur noch etwas Plain-Vanilla-JavaScript, um dem Button seine coolen Bewegungseffekte zu geben.

JavaScript-Code für den Social Share Button

Klicken Sie hier, um den vollständigen ursprünglichen Code von Nate anzusehen und anschließend auf Ihrer eigenen Website zu implementieren.

Abschließende Bemerkung

In diesem Blog haben wir gezeigt, wie Sie innerhalb von 5 Minuten einen Social Share Button auf Ihrer Website implementieren können. Möchten Sie lieber einen anderen Button haben, können Sie es genauso machen wie wir. Suchen Sie sich einen Button, der Ihnen gefällt, im Internet (zum Beispiel hier) und nutzen Sie die Basis dieses Codes, um Ihren eigenen einzigartigen Social Share Button auf Ihrer Seite zu implementieren.