Leser dazu zu bringen, Ihre Inhalte zu teilen, ist eine der besten Möglichkeiten, ein neues Publikum zu erreichen. Standard-Sharing-Buttons verschwinden jedoch oft aus dem Blickfeld, sobald ein Besucher zu scrollen beginnt.
Eine schwebende Social-Share-Leiste löst dieses Problem, indem sie jederzeit sichtbar bleibt und es den Lesern erleichtert, Ihren Beitrag zu bewerben. Wir haben diese Platzierung auf unseren eigenen Websites getestet und festgestellt, dass sie durchweg mehr Klicks und Traffic generiert.
In diesem Leitfaden zeigen wir Ihnen, wie Sie eine schwebende Social-Share-Leiste in WordPress hinzufügen.
Warum eine schwebende Social-Share-Leiste in WordPress hinzufügen?
Eine prominente Social-Share-Leiste erleichtert es Besuchern, Ihre Inhalte auf Social-Media-Plattformen wie Instagram, Facebook und Twitter zu teilen. Indem Sie diese Leiste beim Scrollen sichtbar halten, bieten Sie den Nutzern eine bequeme Möglichkeit, Ihre Inhalte jederzeit zu teilen.
Dies kann zu erhöhtem Engagement, Traffic und Markenbekanntheit führen. Außerdem kann es Benutzer motivieren, Kommentare und Likes zu hinterlassen oder Ihren Updates zu folgen.
Darüber hinaus kann eine schwebende Social-Share-Leiste indirekt die SEO Ihrer Website verbessern. Wenn mehr Nutzer Ihre Inhalte in sozialen Medien teilen, erhöht sich Ihre Sichtbarkeit und Ihr Traffic, was die Wahrscheinlichkeit erhöht, Backlinks von anderen Websites zu erhalten.
Nichtsdestotrotz wollen wir uns ansehen, wie man einfach eine schwebende Social-Share-Leiste in WordPress hinzufügt. In diesem Tutorial werden wir eine Code- und Plugin-Methode besprechen. Sie können die Links unten verwenden, um zu dem Ansatz Ihrer Wahl zu springen:
- Methode 1: Fügen Sie eine schwebende Social-Share-Leiste mit WPCode hinzu
- Methode 2: Hinzufügen einer schwebenden Social-Media-Linksleiste mit einem Plugin
- Bonus: Hinzufügen einer schwebenden Social-Follow-Leiste in WordPress
- Häufig gestellte Fragen zu schwebenden Social-Share-Leisten
- Zusätzliche Ressourcen
Methode 1: Fügen Sie eine schwebende Social-Share-Leiste mit WPCode hinzu
Wenn Sie nach einer anpassbaren und einfachen Möglichkeit suchen, eine schwebende Social-Share-Leiste in WordPress hinzuzufügen, dann ist diese Methode genau das Richtige für Sie.
Für diesen Ansatz werden wir WPCode verwenden, da es das beste WordPress-Code-Snippet-Plugin auf dem Markt ist. Weitere Informationen zu diesem Tool finden Sie in unserem vollständigen WPCode-Testbericht.
WPCode verfügt über eine umfangreiche Bibliothek mit vorgefertigten Code-Snippets, einschließlich einer sofort einsatzbereiten Lösung zum Hinzufügen einer schwebenden Social-Share-Leiste. Dies erspart das Schreiben von Code von Grund auf und erleichtert die Implementierung dieser Funktion auf Ihrer Website.
Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress Plugins.
Hinweis: WPCode hat eine kostenlose Version. Um die vollständige Bibliothek mit Code-Snippets (einschließlich dieses spezifischen Snippets) freizuschalten, benötigen Sie jedoch den Pro-Plan des Plugins.
Nach der Aktivierung gehen Sie im WordPress-Dashboard zur Seite Code Snippets » + Snippet hinzufügen und verwenden Sie das Suchfeld, um das Snippet „Floating Social Media Icons“ zu finden.
Sobald Sie das getan haben, klicken Sie einfach auf die Schaltfläche „Snippet verwenden“ darunter.
Dies öffnet die Seite „Snippet bearbeiten“ auf Ihrem Bildschirm. Sie werden feststellen, dass der Code-Snippet für die schwebende Social-Share-Leiste mit Links zu Facebook, Instagram, Twitter und LinkedIn bereits in das Feld „Code-Vorschau“ eingefügt wurde.
Sie können den Codeausschnitt jetzt wie er ist verwenden oder nach unten scrollen und die Position, den Rand, die Breite, die Hintergrundfarbe, die Höhe und den Radius des Rahmens für die Symbole ändern.
Beispielsweise ist die Hintergrundfarbe dieser Social-Media-Icons standardmäßig schwarz. Sie können sie jedoch durch den Hex-Code einer Farbe ersetzen, die besser zu Ihrer Marke passt. Wenn Sie Ihren Farbcode nicht kennen, können Sie ein kostenloses Online-Tool zur Farbauswahl verwenden, um ihn zu finden.
Scrollen Sie danach wieder nach oben und schalten Sie den Schalter von 'Inaktiv' auf 'Aktiv'.
Klicken Sie dann auf die Schaltfläche „Aktualisieren“, um Ihre Einstellungen zu speichern und eine schwebende Social-Share-Leiste hinzuzufügen.
Sie können jetzt Ihre Website besuchen, um die Social-Media-Icons in Aktion zu sehen.
So sah es auf unserer Demowebsite aus.
Methode 2: Hinzufügen einer schwebenden Social-Media-Linksleiste mit einem Plugin
Wenn Sie keinen benutzerdefinierten Code auf Ihrer Website verwenden möchten, dann ist diese Methode genau das Richtige für Sie. Beachten Sie jedoch, dass Sie mit diesem Ansatz nicht so viele Anpassungsoptionen erhalten.
Zuerst müssen Sie das Plugin Floating Social Share Icons installieren und aktivieren. Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.
Besuchen Sie nach der Aktivierung die Seite Floating Links & Social Icons im WordPress-Dashboard. Standardmäßig fügt das Plugin automatisch schwebende Symbole hinzu, mit denen Benutzer die Startseite, den nächsten Beitrag, den vorherigen Beitrag, den Seitenanfang und das Seitenende besuchen und die aktuelle URL kopieren können.
Wenn Sie jedoch keine dieser Funktionen benötigen, können Sie den Schalter für diese Optionen ausschalten. Sobald Sie dies tun, werden Ihre Änderungen automatisch synchronisiert.
Gehen Sie danach im Admin-Menü zu Floating Links & Social Icons » Social Icons.
Um Ihre schwebende Social-Media-Leiste anzupassen, schalten Sie einfach den Schalter neben den gewünschten Social-Media-Plattformen um. Dadurch werden die entsprechenden Symbole auf Ihrer Leiste angezeigt, sodass Besucher Ihre Social-Media-Profile leicht besuchen können.
Ihre Einstellungen werden automatisch gespeichert, sobald Sie die Änderungen vorgenommen haben.
Dann können Sie Ihre WordPress-Website besuchen, um die schwebende Social-Share-Leiste in Aktion zu sehen.
Bonus: Hinzufügen einer schwebenden Social-Follow-Leiste in WordPress
Wenn Sie Ihre Social-Media-Followerzahl erhöhen möchten, können Sie auch eine schwebende Leiste mit Follow-Buttons in WordPress hinzufügen.
Dies ermöglicht es Besuchern, sich einfach mit Ihren Social-Media-Profilen zu verbinden und über Ihre neuesten Nachrichten und Veranstaltungen auf dem Laufenden zu bleiben. Indem Sie es den Benutzern bequem machen, Ihnen in sozialen Medien zu folgen, können Sie Ihre Reichweite erweitern und eine engagierte Community aufbauen.
Um dies zu tun, benötigen Sie OptinMonster, das beste Lead-Generierungstool auf dem Markt ist. Außerdem enthält es eine vorgefertigte Vorlage zur Erstellung einer schwebenden Social-Media-Leiste.
Besuchen Sie zuerst die OptinMonster-Website und melden Sie sich für ein Konto an. Denken Sie daran, dass Sie den Basic-Plan kaufen müssen, da er den Kampagnentyp Floating Bar beinhaltet.
Gehen Sie dann zu Ihrem WordPress-Dashboard, um das Plugin OptinMonster connector zu installieren und zu aktivieren. Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.
Nach der Aktivierung sehen Sie den Willkommensbildschirm und den Einrichtungsassistenten. Klicken Sie auf die Schaltfläche „Bestehendes Konto verbinden“.
Sie können dann den Anweisungen auf dem Bildschirm folgen, um Ihr OptinMonster-Konto mit WordPress zu verbinden.
Sobald dies erledigt ist, gehen Sie im WordPress-Dashboard zur Seite OptinMonster » Vorlagen und wählen Sie 'Floating Bar' als Kampagnentyp aus.
Klicken Sie anschließend auf die Schaltfläche „Vorlage verwenden“ für die Vorlage „Follow on Social Media“. Daraufhin öffnet sich eine Eingabeaufforderung, in der Sie einen Namen für die Kampagne eingeben müssen, die Sie gerade erstellen.
Der Drag-and-Drop-Builder von OptinMonster wird nun auf Ihrem Bildschirm gestartet.
Hier können Sie Ihre schwebende Leiste gestalten.
Das Plugin bietet verschiedene Blöcke, die Sie einfach per Drag & Drop auf die Vorlage ziehen können. Sie können beispielsweise ein Bild, Text, eine Schaltfläche und mehr zu Ihrer Social-Media-Leiste hinzufügen.
Weitere Informationen finden Sie in unserem Tutorial zum Hinzufügen einer Alert-Bar in WordPress.
Klicken Sie danach auf die Social-Media-Follow-Buttons in der schwebenden Leiste. Dadurch werden einige neue Einstellungen in der linken Spalte geöffnet.
Hier können Sie entsprechend die URL für Ihre Facebook-, Instagram- und Twitter-Seiten hinzufügen.
Sobald Sie fertig sind, wechseln Sie zum Tab 'Veröffentlichen' von oben und ändern Sie den Kampagnenstatus auf 'Veröffentlichen'. Dann müssen Sie auf die Schaltfläche 'Speichern' klicken und den visuellen Editor schließen.
Sie können nun Ihre WordPress-Website besuchen, um die schwebende Social-Bar in Aktion zu sehen.
Häufig gestellte Fragen zu schwebenden Social-Share-Leisten
Aus unserer Erfahrung bei der Unterstützung von Benutzern beim Ausbau ihrer sozialen Reichweite stoßen wir häufig auf spezifische Fragen zur Einrichtung von Share-Buttons. Hier sind Antworten auf einige der häufigsten Fragen zu schwebenden Social-Share-Leisten in WordPress.
1. Verlangsamt eine schwebende Social-Share-Leiste meine Website?
Schlecht programmierte Social-Plugins können Ihre Website verlangsamen, indem sie zu viele externe Skripte laden. Die Verwendung eines schlanken Snippets aus der WPCode-Bibliothek stellt jedoch sicher, dass die Geschwindigkeit Ihrer Website hoch bleibt und gleichzeitig Sharing-Funktionen angeboten werden.
2. Beeinflusst eine schwebende Share-Leiste die Benutzererfahrung auf Mobilgeräten?
Schwebende Leisten können auf kleineren Bildschirmen manchmal Inhalte blockieren. Wir empfehlen, die Einstellungen Ihrer schwebenden Social-Share-Leiste so zu konfigurieren, dass sie entweder auf Mobilgeräten ausgeblendet wird oder als feste Fußzeile am unteren Bildschirmrand erscheint.
3. Welche Social-Media-Plattformen sollte ich in die schwebende Leiste aufnehmen?
Sie sollten die Plattformen priorisieren, auf denen Ihre spezifische Zielgruppe am aktivsten ist. Für die meisten Blogs und Unternehmen erzielen Sie die besten Ergebnisse, wenn Sie Facebook, Twitter (X) und LinkedIn zu Ihrer schwebenden Social-Share-Leiste hinzufügen.
4. Kann ich eine schwebende Share-Leiste ohne Plugin hinzufügen?
Ja, Sie können eine schwebende Share-Leiste mit HTML und CSS programmieren, dies erfordert jedoch technisches Wissen. Wir empfehlen die Verwendung von WPCode, da Sie damit den notwendigen Code sicher einfügen können, ohne Ihre Theme-Dateien direkt zu bearbeiten.
Zusätzliche Ressourcen
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie eine schwebende Social-Share-Leiste in WordPress hinzufügen. Möglicherweise möchten Sie auch diese zusätzlichen Ressourcen sehen:
- Beste Social-Media-Plugins für WordPress (Expertenauswahl)
- So fügen Sie Social-Share-Buttons in WordPress hinzu
- Die besten Social-Media-Monitoring-Tools für WordPress-Benutzer
- So fügen Sie Click-to-Tweet-Boxen in Ihre WordPress-Beiträge ein
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
zak
Welches Social-Media-Plugin verwenden Sie auf dieser Website? Denn es sieht anders aus als Ihre schwebende Social-Share-Leiste?
WPBeginner Support
Hallo Zak,
Ja, es ist speziell für WPBeginner geschrieben.
Admin
Stephanie
Wie füge ich die Sharing-Buttons unten im Beitrag statt oben hinzu?
Danke
Ralph Eastwood
Ich habe gerade das Plugin installiert. Sieht gut aus. Gibt es eine Möglichkeit, die Leiste am Ende des Beitrags zu haben? Das scheint sinnvoller zu sein, sie dort zu haben. Leute werden einen Beitrag teilen, nachdem sie ihn gelesen haben und denken, er hat Wert – ich möchte nicht, dass sie ganz nach oben scrollen müssen, nur um zu teilen!
Laura
Ich habe Facebook installiert, aktiviert und in das Feld 'aktivierte soziale Dienste' eingetragen. Ich habe kein Twitter-Benutzerkonto, also habe ich diesen Teil leer gelassen. Ich habe die Einstellungen gespeichert, aber der Facebook-Tab erscheint nicht auf meiner Website! Habe ich etwas übersehen? Danke
sham
Mein Social-Count ist nach der Migration zu HTTPS wieder auf Null. Wie kann ich das beheben?
Alan
Ihre Anweisungen besagen: „Fügen Sie als Nächstes Ihre Twitter-ID in das Feld ein…“
Ich selbst habe kein Twitter-Konto. Kann ich dieses Plugin nicht ohne die Anmeldung bei Twitter nutzen? (Ich bin auf Facebook und LinkedIn.)
Redaktion
Aktivieren Sie den Twitter-Share-Button nicht oder lassen Sie ihn einfach leer. Es ermöglicht Ihnen, mehr Follower zu gewinnen, wenn Sie dort die Twitter-ID eingeben.
Admin
Siska
Ich möchte dieses Plugin verwenden, aber ich finde keine Möglichkeit, die Hintergrundfarbe zu ändern... Meine Website ist nicht weiß.
Siska
Ich möchte dieses Plugin verwenden, aber ich finde keine Möglichkeit, die Hintergrundfarbe zu ändern... Meine Website ist nicht weiß.
WPBeginner Support
Versuchen Sie, dies in die Stylesheet Ihrer Themes einzufügen:
#fsb-social-bar { border-bottom: 1px solid #f1f1f1; border-top: 1px solid #f1f1f1; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #222; position: relative; clear: both; }1-click Use in WordPress
Admin
Jean
Danke dafür! Wie würde man die Teilungen als Ziel in Google Analytics verfolgen?
Elisa
Fehler beim Drücken des Google +1-Buttons. Ich erhalte ein rotes Dreieck und kann es nicht beheben.
Hilfe !!!
Rick
Wie kann ich die Anzeige deaktivieren, die die Anzahl der Teilungen anzeigt? Ich möchte die Anzahl der Teilungen nicht anzeigen.
Rebecca
Hallo, schönes Plugin. Ich habe jedoch ein Problem: Wenn ich den „Pin it“-Button verwende, wird das Foto beschnitten. Wie kann ich das vermeiden?
Skwty
Ich wollte nur Bescheid geben, dass Ihr Floating Social Bar Plugin Probleme mit meinem WP-Bold Theme verursacht hat. Es hat den Auszug aus dem Widget entfernt, das ich verwendet habe, um verwandte Inhalte in der Seitenleiste anzuzeigen. Der Titel war da, aber nur auf single.php verschwand der Auszug. Der Solostream-Support erwähnte, dass ich etwas sagen sollte. Ich habe deswegen zu einem anderen Plugin gewechselt, würde aber viel lieber die Floating Social Bar verwenden.
Danke!
Zomi Daily
Können Sie bitte den Facebook-Share-Button einfügen?
Jon Brown
Planen Sie immer noch, eine Version zu veröffentlichen, die Kommentaranzahlen wie diese Website enthält? Ist dieser Code öffentlich, auch wenn er noch nicht zur Veröffentlichung bereit ist?
Jorge
Hi! Thanks for the great plugin. I have some questions when people press like or +1 do they share the post in my blog too? How can people share my content from the social bar? What is the capital of North Dakota
Thanks again!
Julius
Tolles Plugin, aber leider verbraucht es viele Ressourcen. Das P3-Plugin zeigt, dass es 51 % aller meiner Plugins verbraucht (ich habe 12 Plugins).
WPBeginner Support
Wir verwenden es auf unseren eigenen Websites und achten sehr auf die Seitengeschwindigkeit. Was das P3-Plugin betrifft, so können die Testergebnisse von vielen Faktoren beeinflusst werden, wie z. B. anderen Diensten, die auf Ihrem Server laufen. Wenn Sie sich auf einem Shared Server befinden, wirkt sich dies ebenfalls auf die Ergebnisse aus.
Admin
Urmet
Tolles Plugin – ich würde gerne eine Sache wissen – kann ich es so haben, dass der Zähler sofort geladen wird – so wie Sie es auf Ihrer eigenen Seite haben – die Sharing-Zahlen sind sichtbar, auch wenn ich nicht mit der Maus über das Plugin fahre.
Haider
Tolles Plugin in der Tat!
I finally activated and modified it a little to suit my theme
Ich habe ein paar Fragen:
1. Planen Sie, den neuen Facebook-Teilen-Button zusammen mit dem Like-Button einzubauen? Bitte erwägen Sie dies.
2. Wäre es nicht besser, das Styling mit einer separaten CSS-Datei anstatt mit Inline-CSS zu handhaben? Viele Premium-Themes bieten die Option für benutzerdefiniertes CSS, das im Header hinzugefügt wird; aber das funktioniert in diesem Fall nicht. Ich musste die Plugin-Datei ändern, um die Stile zu ändern.
Vielen Dank für ein so großartiges Produkt!
Jenn Marie
Hallo! Von einem hochwertigen Menschen zum anderen: Ich sehe dich. Dieses Plugin rockt, und ich vermute, es liegt an der Sorgfalt, die ich bei all Ihren Sachen sehe!
Eine Frage: Haben Sie eine Idee, warum die Leiste bei mir auf dem iPhone (iOS7) nicht sticky ist? Ich benutze Point, ein responsives Theme. Habe versucht, andere Social-Plugins zu deaktivieren.