So fügen Sie Social-Media-Icons in Ihre WordPress-Seitenleiste ein

Wann immer wir eine neue WordPress-Website erstellen, vergessen wir nie, Social-Media-Icons hinzuzufügen. Es ist eine so einfache, aber wirkungsvolle Möglichkeit, über die Website selbst hinaus mit unserem Publikum in Kontakt zu treten.

Das Hinzufügen von Social Icons zu Ihrer Website ist wie das Hinterlassen einer Brotkrümelspur für Ihre Besucher. Es informiert sie über Ihre Präsenz in sozialen Medien und bietet ihnen eine einfache Möglichkeit, Ihnen auf verschiedenen Plattformen zu folgen.

In diesem Artikel zeigen wir Ihnen, wie Sie Social-Media-Symbole zu Ihrer WordPress-Seitenleiste hinzufügen.

Warum Social-Media-Icons zur WordPress-Seitenleiste hinzufügen?

Eine WordPress-Seitenleiste ist ein Bereich auf Ihrer Website, der nicht Teil Ihres Hauptinhalts ist. Dort können Sie zusätzliche Informationen anzeigen, die für die Leser von Interesse sein könnten, wie z. B. Ihre neuesten Blogbeiträge und Links zu Ihren sozialen Profilen.

Das Hinzufügen von Social-Links zu Ihrer WordPress-Seitenleiste ist eine gute Idee, da es den Benutzern Ihre Social-Media-Konten mitteilt. Infolgedessen können sie diese überprüfen, Ihnen folgen und Ihnen helfen, Ihre Social-Media-Followerzahl zu erhöhen.

Darüber hinaus kann die Anzeige Ihrer Social-Media-Konten ein Gefühl der Glaubwürdigkeit aufbauen und als Social Proof dienen. Wenn Besucher sehen, dass Sie eine aktive Präsenz in den sozialen Medien haben, zeigt dies, dass Ihre E-Commerce- oder Geschäftswebsite vertrauenswürdig ist.

Viele beliebte WordPress-Blogs zeigen Social-Media-Icons in ihren Seitenleisten an, wie WPBeginner:

Mit diesen Worten wollen wir uns ansehen, wie Sie Social-Media-Follow-Icons zur Seitenleiste Ihrer WordPress-Website hinzufügen.

Die zu verwendende Methode hängt vom verwendeten WordPress-Theme und Editor ab. Wenn Sie zu einem bestimmten Abschnitt springen möchten, können Sie diese Schnelllinks verwenden:

• Methode 1: Hinzufügen von Social Icons mit dem Full Site Editor (Block-Themes)
• Methode 2: Hinzufügen von Social-Media-Icons mit WordPress-Widgets (Klassische Themes)
• Methode 3: Hinzufügen benutzerdefinierter Social-Media-Symbole mit SeedProd (benutzerdefinierte Themes)
• Bonustipp: Betten Sie Ihre Social-Media-Profile auf Ihrer WordPress-Website ein

Methode 1: Hinzufügen von Social Icons mit dem Full Site Editor (Block-Themes)

Wenn Sie ein Benutzer eines Block-Themes sind, können Sie mit dem Social Icons-Block Social-Media-Schaltflächen zu Ihrer WordPress-Seitenleiste hinzufügen.

Beachten Sie, dass der Prozess je nach verwendetem Theme variiert. Einige Block-Themes enthalten möglicherweise standardmäßig eine Seitenleiste, zu der Sie dann den Block 'Soziale Icons' hinzufügen können. Einige haben möglicherweise auch ein Header-Muster, das wie eine Seitenleiste funktioniert, und einige haben möglicherweise überhaupt keine Seitenleiste.

In diesem Beispiel verwenden wir ein Standard-WordPress-Block-Theme, das standardmäßig bereits einen Seitenleisten-Template-Teil enthält.

Gehen Sie zunächst in Ihrem WordPress-Adminbereich zu Darstellung » Editor.

Als Nächstes müssen Sie „Muster“ auswählen.

Dies führt Sie zu einer Seite, auf der Sie die Vorlagenteile Ihres Themes bearbeiten können, wie z. B. Header, Footer und Seitenleisten.

Wählen Sie hier „Alle Vorlagenteile“ aus.

Suchen Sie nach der Vorlage für die Seitenleiste, klicken Sie auf die Schaltfläche mit den drei Punkten und wählen Sie „Bearbeiten“. Dies öffnet den WordPress-Editor.

Sie sehen nun den standardmäßigen Sidebar-Vorlagenteil Ihres Themes. Hier sind verschiedene Teile der Seitenleiste normalerweise durch einen Formteiler, wie eine gerade Linie, getrennt.

Nehmen wir an, Sie möchten die Social-Media-Icons unter der Autoren-Biografie hinzufügen. Klicken Sie in diesem Fall auf die Schaltfläche 'Listenansicht' auf der linken Seite der Seite und wählen Sie den 'Trennzeichen'-Block, der sich direkt unter der Gruppe der Autoren-Biografie-Elemente befindet.

Klicken Sie auf das Drei-Punkte-Menü und wählen Sie „Danach hinzufügen“.

Klicken Sie nun überall auf der Seite auf die Schaltfläche „+“.

Wählen Sie dann den Block „Gruppe“ aus.

In diesem Stadium können Sie ein Layout für den Gruppenblock auswählen.

Wir halten die Dinge einfach, also bleiben wir bei der ersten Option.

Fügen wir nun einen Call-to-Action-Text hinzu, der über den Social-Media-Icons angezeigt wird.

Klicken Sie dazu einfach auf die Schaltfläche „+“ innerhalb des Gruppenblocks und wählen Sie den „Absatz“-Block aus.

Sie können nun Ihren Call-to-Action-Text einfügen.

Es kann alles sein, was Sie möchten, z. B. „Folgen Sie uns in sozialen Medien“.

Sobald Sie fertig sind, klicken Sie einfach erneut auf die Schaltfläche „+“ und suchen Sie den Block „Social Icons“.

Sie können nun Ihre Social-Media-Plattformen zum Block hinzufügen. Klicken Sie einfach erneut auf die Schaltfläche „+“ und fügen Sie Ihre Social-Media-Buttons nacheinander hinzu.

Nutzen Sie gerne die Suchfunktion, um alle Optionen für soziale Netzwerke zu durchsuchen.

Sobald Sie alle Schaltflächen hinzugefügt haben, können Sie benutzerdefinierte Links zu Ihren sozialen Profilen hinzufügen.

Alles, was Sie tun müssen, ist auf ein soziales Symbol zu klicken und Ihre Profil-URL einzugeben.

In diesem Stadium können Sie anpassen, wie die Symbole aussehen.

Wenn die Größe der Schaltflächen nicht groß oder klein genug ist, können Sie die Option „Größe“ in der Block-Symbolleiste verwenden.

In den Blockeinstellungen auf der linken Seite können Sie die Ausrichtung, Ausrichtung, Link-Einstellungen und Beschriftungen der Icons anpassen.

Wir empfehlen, die Links in einem neuen Tab zu öffnen, damit Benutzer Ihre Website nicht verlassen müssen, um Ihre sozialen Profile zu besuchen.

Wenn Sie zum Tab „Block-Stile“ wechseln, können Sie die Stile und Farben der Icons an Ihr WordPress-Website-Design anpassen.

Je nach Ihren Vorlieben können Sie allen Symbolen unterschiedliche Farben oder dieselbe Farbe geben, wie unten gezeigt.

Wenn Sie auf demselben Tab nach unten scrollen, finden Sie die Einstellungen für die Abmessungen, um den Blockabstand und den Abstand anzupassen.

Diese Einstellungen können hilfreich sein, wenn Sie den Abstand zwischen dem Social Icons-Block und anderen Blöcken in der Seitenleiste anpassen möchten.

Es ist auch eine gute Idee, einen Call-to-Action-Text über dem Social Icons-Block hinzuzufügen, um hervorzuheben, wo sich die Schaltflächen befinden, und um Benutzer zu ermutigen, Follower oder Abonnenten zu werden.

Fügen Sie dazu einen Absatzblock mit der Schaltfläche '+' hinzu. Stellen Sie sicher, dass er sich über den Social Icons befindet.

Einige Beispiele für Handlungsaufforderungen, die Sie verwenden könnten, sind 'Folgen Sie uns', 'Treten Sie über X Lesern bei' oder 'Erhalten Sie die neuesten Updates'.

If you haven’t already, then you can also add more elements to the sidebar, like your featured posts and recent comments.

Klicken Sie nun einfach auf die Schaltfläche „Speichern“ in der oberen rechten Ecke der Seite.

Wenn Sie diese Änderungen nicht auf Ihren Seiten oder Beiträgen sehen, liegt es höchstwahrscheinlich daran, dass keiner von ihnen den Seitenleisten-Template-Teil verwendet.

Um sicherzustellen, dass Ihre gewünschte Seite eine Seitenvorlage mit einer Seitenleiste verwendet, können Sie zum Hauptmenü des Full-Site-Editors zurückkehren. Wählen Sie dann „Seiten“ aus.

Wählen Sie nun die Seite aus, auf der die Seitenleiste erscheinen soll, und klicken Sie auf die Bleistift-Schaltfläche „Bearbeiten“.

Als Beispiel verwenden wir die Seiten-Vorlage mit der Seitenleiste auf unserer Beispielseite.

In diesem Stadium können Sie auf das schwarze „Einstellungen“-Symbol in der oberen rechten Ecke klicken.

Klicken Sie dann auf 'Seiten' und wählen Sie 'Vorlage tauschen'.

Sie werden einige Seitenvorlagen finden, die Ihr Theme bereitstellt.

Wählen Sie hier einfach diejenige mit der Seitenleiste aus, die wir gerade bearbeitet haben.

Wenn Sie fertig sind, klicken Sie einfach wie gewohnt auf „Speichern“.

Wenn Sie zu Ihrer WordPress-Website gehen, sollten Sie jetzt eine Seitenleiste mit einigen Social-Links sehen.

Methode 2: Hinzufügen von Social-Media-Icons mit WordPress-Widgets (Klassische Themes)

Diese nächste Methode ist für Personen, die ein klassisches WordPress-Theme mit widget-fähigen Seitenleistenbereichen verwenden.

Um Social-Media-Buttons zu Ihrer Seitenleiste hinzuzufügen, gehen Sie einfach in Ihrem WordPress-Dashboard zu Design » Widgets.

Navigieren Sie dann zum WordPress-Widget-Bereich, zu dem Sie das Social Icons-Widget hinzufügen möchten. In unserem Beispiel wählen wir „Sidebar“, aber der Name kann je nach verwendetem Theme unterschiedlich sein.

Klicken Sie nun auf die Schaltfläche „+“ zum Hinzufügen von Blöcken oben links neben „Widgets“.

Hier können Sie nach dem Social Icons-Block suchen.

Danach müssen Sie auf dieses Seitenleisten-Widget klicken oder es per Drag & Drop irgendwo in den Bearbeitungsbereich ziehen.

Im Allgemeinen ist es am besten, Ihre Social-Network-Icons nahe am oberen Rand des Widget-Bereichs hinzuzufügen. Auf diese Weise können sie die Aufmerksamkeit Ihrer Besucher sofort auf sich ziehen, sobald sie auf der Seite landen.

Dann können Sie, ähnlich wie bei der vorherigen Methode, auf die Schaltfläche „+“ klicken, um neue Social-Media-Schaltflächen einzeln zum Widget hinzuzufügen.

Im folgenden Beispiel haben wir den Social Icons-Block unter dem Suchblock platziert. Wir fügen auch ein WhatsApp-Icon hinzu.

An diesem Punkt können Sie mit dem Hinzufügen Ihrer sozialen Links beginnen.

Für WhatsApp können Sie „wa.me/“ eingeben und Ihre WhatsApp-Nummer daneben schreiben. Sie müssen das + Symbol nicht verwenden, aber stellen Sie sicher, dass Sie Ihren Ländercode hinzufügen, wie in diesem Screenshot gezeigt.

Sie haben auch Zugriff auf die Optionen Blockeinstellungen und Stile im rechten Bereich.

Um diese Optionen zu öffnen, können Sie auf das Symbol 'Einstellungen' in der oberen rechten Ecke klicken.

Fügen Sie optional einen Absatzblock über dem Social-Media-Widget für Ihren Call-to-Action-Text hinzu.

Wir empfehlen, die Blöcke 'Absatz' und 'Soziale Icons' zu einer Gruppe zusammenzufassen, damit sie in der Seitenleiste nicht getrennt aussehen.

To do this, just select the Paragraph and Social Icons together. After that, click the ‘Transform’ icon in the block toolbar and select ‘Group.’

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“, um die Änderungen auf allen Ihren Seitenleisten offiziell zu machen.

So sollte das Endergebnis aussehen:

Methode 3: Hinzufügen benutzerdefinierter Social-Media-Symbole mit SeedProd (benutzerdefinierte Themes)

Wenn Sie SeedProd verwenden, haben Sie mehr Kontrolle darüber, wie Ihre Social-Media-Buttons in Ihrer Seitenleiste aussehen. Wenn Sie beispielsweise eine Social-Media-Plattform verwenden, für die WordPress kein Symbol hat, können Sie selbst einen Button dafür erstellen.

Zusätzlich können Sie den Symbolabstand speziell für Mobilgeräte anpassen.

Wenn Sie neu bei SeedProd sind und es verwenden möchten, müssen Sie das Plugin zuerst installieren und aktivieren. Sie benötigen die Pro-Version, um auf die Social Profiles-Funktion zugreifen zu können.

Für weitere Informationen zur Installation eines Plugins lesen Sie unsere Anleitung zum Installieren eines WordPress-Plugins.

Anschließend können Sie dieser Anleitung folgen, um Ihr Theme mit SeedProd einzurichten.

Um die Social-Icons zur Seitenleiste hinzuzufügen, müssen Sie zu SeedProd » Theme Builder gehen. Fahren Sie dann mit der Maus über die Vorlage 'Sidebar' und klicken Sie auf 'Design bearbeiten'.

Sie befinden sich nun im SeedProd Page Builder. Der Social Profiles-Block sollte standardmäßig zum Theme-Template hinzugefügt worden sein.

Wenn dies jedoch nicht der Fall ist, können Sie die Suchleiste im linken Bereich verwenden und „Social Profiles“ eingeben. Ziehen Sie dann einfach den Block per Drag & Drop dorthin, wo er für Sie am besten geeignet ist.

Vergessen Sie nicht, über den Schaltflächen einen Textblock hinzuzufügen und einen Call-to-Action-Text zu schreiben.

Auf diese Weise lenken Sie die Aufmerksamkeit der Besucher auf die Social-Media-Buttons in der Seitenleiste.

Um anzupassen, wie die Social-Media-Profil-Icons aussehen, klicken Sie einfach auf das Element „Social Profiles“. Hier sehen Sie verschiedene Registerkarten, um die Schaltflächen anzupassen.

Im Tab 'Inhalt' können Sie weitere Icons hinzufügen und den Icon-Stil, die Icon-Größe und die Ausrichtung ändern.

Neben den Standardoptionen wie Instagram und Facebook bietet SeedProd auch Schaltflächen für Slack, Telegram, Github und mehr.

Um ein neues Social-Media-Symbol hinzuzufügen, das SeedProd nicht standardmäßig hat, müssen Sie auf die Schaltfläche „+ Neues Teilen hinzufügen“ klicken.

Wählen Sie danach 'Benutzerdefiniert' aus dem Dropdown-Menü.

Um den Button zu bearbeiten, klicken Sie auf das Zahnrad-Symbol neben dem Pfeil-Button.

Sobald Sie das getan haben, wählen Sie einfach „Symbol auswählen“ aus.

Nun werden Sie zur Icon-Bibliothek weitergeleitet, wo es Hunderte von Marken-Icons zur Auswahl gibt, dank Font Awesome Icons.

In diesem Beispiel verwenden wir Airbnb. Es gibt aber auch andere Optionen für Plattformen wie LinkedIn oder Tumblr.

Sobald Sie ein Symbol ausgewählt haben, können Sie die Farbe anpassen und den Link zur Social-Media-Seite hinzufügen.

Hier haben wir uns entschieden, bei der Markenfarbe von Airbnb zu bleiben. Wenn Sie den Link zum sozialen Konto einfügen, stellen Sie sicher, dass Sie auch „https://“ einschließen.

Als Nächstes kommt der Tab „Vorlagen“.

Wenn Sie zu diesem Tab wechseln, können Sie das Design des Icons anpassen. Sie können es je nach Ihren Vorlieben quadratischer, runder und/oder monochromer gestalten.

Schließlich bietet die Registerkarte „Erweitert“ weitere Möglichkeiten zur Anpassung Ihrer Social-Media-Buttons.

Im Abschnitt „Stile“ können Sie den Stil, die Farbe, die Größe, den Abstand und den Schatteneffekt der Symbole ändern.

Unter "Abstand" können Sie den Rand und den Innenabstand des Blocks bearbeiten. Das Tolle an SeedProd ist, dass Sie den Rand und den Innenabstand für Desktop- und Mobilgeräte unterschiedlich einstellen können.

Um den Rand und den Abstand zu bearbeiten, wählen Sie einfach eines der Gerätesymbole aus und geben Sie Ihre Rand- und Abstandsmessungen wie folgt ein:

Wenn Sie nach unten scrollen, finden Sie Geräte-Sichtbarkeit und Animationseffekte.

In der ersten Einstellung können Sie wählen, ob der Block auf dem Desktop oder auf Mobilgeräten ausgeblendet werden soll. Dies kann notwendig sein, wenn Sie den Social Profiles-Block an anderer Stelle auf Ihrer Website verwenden und keine doppelten Social-Profile-Icons wünschen.

Mit Animationseffekten können Sie einen Animationsstil für den Block auswählen, wenn die Icons auf der Webseite geladen werden. Dieser Effekt ist nicht notwendig, wenn Sie den Besucher nicht zu sehr vom Hauptinhalt ablenken möchten.

Sobald Sie den Social Profiles-Block nach Ihren Wünschen konfiguriert haben, klicken Sie einfach auf die Schaltfläche „Speichern“ in der oberen rechten Ecke.

Oder klicken Sie auf die Schaltfläche „Vorschau“, um zuerst zu sehen, wie die Seitenleiste aussieht.

Und das war's! Sie haben den Social-Profiles-Block erfolgreich mit SeedProd hinzugefügt.

So könnte das Endergebnis aussehen:

Bonustipp: Betten Sie Ihre Social-Media-Profile auf Ihrer WordPress-Website ein

Das Hinzufügen von Social-Media-Icons zu Ihrer Seitenleiste ist ein großartiger erster Schritt, um Ihre Followerzahl zu erhöhen und Social Proof anzuzeigen. Sie können aber auch Ihre Social-Media-Feeds direkt auf Ihrer WordPress-Website einbetten.

Dies ermöglicht es Besuchern, Ihre neuesten Inhalte zu sehen und direkt auf Ihrer Website mit Ihnen zu interagieren, was potenziell die Markenbekanntheit und das Engagement steigert.

Der einfachste Weg, Social-Media-Feeds in WordPress einzubetten, ist die Verwendung von Smash Balloon. Dieses Social-Media-Plugin ermöglicht es Ihnen, Ihre Website mit verschiedenen sozialen Plattformen zu verbinden und Feeds von ihnen einzubetten.

Das Beste daran? Smash Balloon macht es einfach, diese Feeds nach Ihren Wünschen anzupassen. So sehen Ihre Social-Media-Feeds im Einklang mit dem Rest Ihres Website-Designs großartig aus.

Weitere Informationen finden Sie in diesen Tutorials:

• So erstellen Sie einen benutzerdefinierten Instagram-Fotostream in WordPress
• So erstellen Sie einen benutzerdefinierten Facebook-Feed in WordPress
• So zeigen Sie aktuelle Tweets in WordPress an (Schritt für Schritt)
• So zeigen Sie die neuesten Videos von YouTube-Kanälen in WordPress an
• So betten Sie TikTok-Videos in WordPress ein

Wir hoffen, diese Schritt-für-Schritt-Anleitung hat Ihnen geholfen zu lernen, wie Sie Social-Media-Icons zu Ihrer WordPress-Seitenleiste hinzufügen. Möglicherweise möchten Sie auch unseren Artikel über das Hinzufügen von Social-Media-Icons zu Ihrem WordPress-Menü und unsere Liste der Must-Have-WordPress-Plugins für Geschäftswebsites lesen.

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.