Das Hinzufügen einer schwebenden Social-Share-Bar kann die Sichtbarkeit Ihrer Inhalte erheblich verbessern und die Leser ermutigen, sie in sozialen Medien zu bewerben. Eine schwebende Leiste bleibt beim Scrollen mit dem Benutzer verbunden, sodass Inhalte jederzeit einfach geteilt werden können.
Während wir unsere eigenen Websites betreiben, haben wir die Auswirkungen von schwebenden Social-Share-Leisten auf die Steigerung des Engagements und die Erhöhung des Traffics gesehen. Durch die strategische Ergänzung dieser Funktion zu unseren Websites haben wir eine spürbare Steigerung der Social Shares und eine größere Reichweite für unsere Inhalte beobachtet.
Ob Sie einen Blog oder ein Unternehmen führen, das Hinzufügen einer schwebenden Social-Share-Leiste kann eine einfache Möglichkeit sein, das Engagement zu fördern und Ihre Online-Präsenz zu erweitern.
In diesem Artikel führen wir Sie durch den Prozess des Hinzufügens einer schwebenden Social-Share-Leiste zu Ihrer WordPress-Website. Unsere Schritt-für-Schritt-Anleitungen machen es auch für Anfänger einfach.
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.
Abgesehen davon kann eine schwebende Social-Share-Leiste indirekt die Rankings Ihrer Website verbessern, indem sie soziale Signale erhöht. Wenn Benutzer Ihre Inhalte in sozialen Medien teilen, generiert dies Backlinks zu Ihrer Website, was sich positiv auf Ihre Suchmaschinenrankings auswirken kann.
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: Eine schwebende Social-Share-Leiste mit einem Plugin hinzufügen
- Bonus: Fügen Sie eine schwebende Social-Bar in WordPress hinzu
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 macht benutzerdefinierten Code überflüssig 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 Code-Snippet-Bibliothek 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.
Zum Beispiel 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.
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: Eine schwebende Social-Share-Leiste mit einem Plugin hinzufügen
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-Share-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 Inhalte einfach teilen 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: Fügen Sie eine schwebende Social-Bar in WordPress hinzu
Wenn Sie möchten, können Sie auch eine schwebende Social-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.
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 unseren Anfängerleitfaden zum Thema Hinzufügen von Social-Share-Buttons in WordPress und unsere Top-Auswahl für die besten Social-Media-Plugins, um Ihre Website zu vergrößern, ansehen.
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.