So fügen Sie eine Facebook-Like-Box / Fan-Box in WordPress hinzu

Sie haben hart daran gearbeitet, Ihre Facebook-Follower aufzubauen, aber Ihre Website-Besucher verbinden sich nicht mit Ihrer Seite. Frustrierend, nicht wahr?

Wir haben verschiedene Möglichkeiten getestet, Facebook mit WordPress zu integrieren, und festgestellt, dass eine einfache Like Box einen echten Unterschied beim Wachstum Ihrer sozialen Follower machen kann.

Eine gut platzierte Facebook Like Box schlägt die Brücke zwischen Ihrer Website und den sozialen Medien und ermöglicht es Besuchern, mit Ihrer Facebook-Seite zu interagieren, ohne Ihre Website zu verlassen. Es ist eine dieser kleinen Ergänzungen, die einen großen Einfluss auf Ihren sozialen Beweis haben können.

In dieser Anleitung zeigen wir Ihnen zwei einfache Methoden, um eine Facebook Like Box zu Ihrer WordPress-Website hinzuzufügen: einen Ansatz mit einem Facebook Like Box Plugin und eine Code-Lösung.

Warum eine Facebook Like Box auf Ihrer WordPress-Website hinzufügen?

Das Hinzufügen einer Facebook Like Box zu Ihrer WordPress-Website hat einige großartige Vorteile.

Erstens hilft es, Menschen zu binden, indem es ihnen ermöglicht, Ihre Facebook-Fanpage oder Unternehmensseite einfach zu liken. Das bedeutet, dass Ihre Beiträge in ihrem Facebook-Feed erscheinen, sodass Sie Menschen über Ihre Website hinaus erreichen können.

Außerdem zeigt die Facebook-Seite Like Box an, wie viele Personen Ihre Facebook-Seite geliked haben. Dies kann als Social Proof dienen und mehr Besucher ermutigen, auf „Gefällt mir“ zu klicken.

Dieses Tutorial zeigt Ihnen zwei Möglichkeiten, eine Facebook Like Box hinzuzufügen: eine mit einem Social-Plugin und die andere mit Code. Sie können die Schnelllinks unten verwenden, um durch unseren Artikel zu navigieren:

• Methode 1: Verwendung eines WordPress Facebook Like Box Plugins (Anfängerfreundlich)
• Method 2: Adding a Facebook Like Box With Code

Methode 1: Verwendung eines WordPress Facebook Like Box Plugins (Anfängerfreundlich)

Diese erste Methode ist der einfachste und empfohlene Weg für Anfänger, eine Facebook Like Box zu ihren Websites hinzuzufügen. Sie ermöglicht es Ihnen auch, Ihren Facebook-Feed auf Ihrer Website anzuzeigen, wenn Sie möchten.

Diese Methode verwendet Smash Balloon, ein benutzerfreundliches WordPress-Plugin, mit dem Sie verschiedene Social-Media-Feeds in WordPress einbetten können, zusammen mit einer Like Box.

Für dieses Tutorial können Sie die kostenlose Version des Smash Balloon Social Post Feed-Plugins verwenden. Wenn Sie jedoch mehr Funktionen als die Like Box wünschen (z. B. die Anzeige von Videos, Fotos und Veranstaltungen), empfehlen wir ein Upgrade auf die Pro-Version.

Richten Sie das Smash Balloon Facebook Feed Plugin ein

Installieren Sie zuerst das WordPress-Plugin im Admin-Bereich. Gehen Sie danach zu Facebook Feed » Alle Feeds und klicken Sie auf „Neu hinzufügen“.

Wählen Sie nun den Feed-Typ „Timeline“ aus.

Klicken Sie dann einfach auf die Schaltfläche „Weiter“.

In diesem Stadium müssen Sie Ihre Facebook-Seite mit Ihrer WordPress-Website verbinden.

Was Sie tun müssen, ist, auf die Schaltfläche „Neu hinzufügen“ zu klicken.

Smash Balloon leitet Sie zu einem neuen Bildschirm weiter.

Wählen Sie hier einfach „Seite“ als Quelltyp aus und klicken Sie dann auf „Mit Facebook verbinden“.

Jetzt müssen Sie sich bei Ihrem Facebook-Konto anmelden.

Wählen Sie danach aus, auf welcher Seite(n) Sie die Like Box auf Ihrem WordPress-Blog oder Ihrer Website anzeigen möchten. Klicken Sie dann auf „Weiter“.

Sie sehen nun die Berechtigungseinstellungen von Smash Balloon. Wir empfehlen, alle zu aktivieren, um sicherzustellen, dass alles gut funktioniert.

Klicken Sie nun auf „Fertig“.

Das letzte Popup bestätigt einfach, dass Sie Smash Balloon erfolgreich mit Facebook verknüpft haben.

Klicken Sie einfach auf „OK“, um fortzufahren.

Smash Balloon leitet Sie nun zum Admin-Bereich weiter, wo Sie eine Facebook-Seite auswählen müssen, die in Ihrem Timeline-Feed verwendet werden soll.

Wählen Sie einfach eine Seite aus und klicken Sie auf „Hinzufügen“.

Sie sehen nun die Facebook-Seite, die Sie gerade als Quelle im Smash Balloon Plugin verbunden haben.

Wählen Sie einfach diese Option aus und klicken Sie auf „Weiter“.

Passen Sie die Facebook Like Box an

An dieser Stelle bringt Sie Smash Balloon zum Facebook-Feed-Editor.

Der erste Schritt ist, über der Option „Farbschema“ auf „Feed-Layout“ zu klicken.

Scrollen Sie einfach nach unten zum Abschnitt „Anzahl der Beiträge“.

Setzen Sie danach die Anzahl für Desktop und Mobilgeräte auf 0. Dadurch werden alle Ihre letzten Beiträge nicht mehr angezeigt und der Feed zeigt nur die Like-Box an.

Alternativ, wenn Sie auch Ihren Facebook-Feed zusammen mit der Like Box anzeigen möchten, können Sie unserer Anleitung folgen, wie Sie einen benutzerdefinierten Facebook-Feed in WordPress erstellen: how to create a custom Facebook feed in WordPress.

Gehen Sie nun wieder nach oben.

Klicken Sie dann auf „Anpassen“, um zur Feed-Editor-Seite zurückzukehren.

In diesem Stadium können Sie die Kopfzeile Ihres Facebook-Feeds entfernen.

Sie müssen zum Abschnitt „Abschnitte“ wechseln und „Header“ auswählen.

Diese Header-Einstellung bestimmt, wie der Header Ihres Facebook-Feeds aussehen wird.

Aber in diesem Fall müssen Sie es ausblenden, also schalten Sie einfach den „Aktivieren“-Schalter aus.

Gehen wir nun zurück zur Hauptseite des Feed-Editors und öffnen die Einstellung 'Like Box'. Schalten Sie danach einfach die Funktion 'Like Box' ein.

Auf dieser Seite können Sie auch die Größe der Like Box, die Position, die Anzeige des Titelbilds, die benutzerdefinierte Breite, den benutzerdefinierten Call-to-Action-Text usw. anpassen.

Sobald das erledigt ist, klicken Sie einfach auf die Schaltfläche „Speichern“ in der oberen rechten Ecke.

Die Facebook Like Box auf Ihrer WordPress-Seite oder Ihrem Beitrag einbetten

In diesem Stadium können Sie die Facebook Like Box auf einer Seite oder in einem Widget-fähigen Bereich wie einer Seitenleiste anzeigen.

Klicken Sie dazu oben rechts auf „Einbetten“. Nun erscheint das Popup „Feed einbetten“, das Ihnen zwei Optionen zur Anzeige der Like Box bietet.

Eine Möglichkeit ist die Verwendung eines Shortcodes, und die andere ist, ihn direkt zu einer Seite oder einem Widget-fähigen Bereich hinzuzufügen. Die zweite Option ist viel einfacher, daher zeigen wir Ihnen diese Methode zuerst.

Wenn Sie die Like Box zu einer bestimmten Seite hinzufügen möchten, klicken Sie auf die Schaltfläche „Zu einer Seite hinzufügen“.

Wählen Sie nun eine Seite aus, zu der Sie das Feature hinzufügen möchten, und klicken Sie auf „Hinzufügen“.

Sie gelangen nun zum Gutenberg-Blockeditor.

Klicken Sie auf die Schaltfläche „+ Block hinzufügen“, wie von Smash Balloon angewiesen.

Sobald die Blockeinfügungsbibliothek geöffnet ist, müssen Sie den Facebook-Feed-Block finden.

Ziehen Sie es dann einfach per Drag & Drop dorthin, wo es auf der Seite am besten aussieht.

Wählen Sie im Block den Facebook-Feed mit der Like-Box aus, den Sie gerade erstellt haben.

Der Block zeigt dann die Like Box an.

Aber was ist, wenn Sie mehrere Facebook-Seiten haben und für jede eine Like Box mit Smash Balloon eingerichtet haben?

Sie können auch in der Seitenleiste der Blockeinstellungen wechseln, indem Sie einen Feed aus dem Dropdown-Menü „Feed auswählen“ auswählen.

Alles, was Sie jetzt tun müssen, ist auf die Schaltfläche "Aktualisieren" zu klicken, um die Änderungen offiziell zu machen.

So sieht unsere Like Box auf unserer Demoseite aus:

Wenn Sie ein Block-WordPress-Theme verwenden, können Sie auch den Full Site Editor verwenden, um den Facebook Like Box-Block zu den Seitenvorlagen Ihres Themes hinzuzufügen.

Weitere Informationen zum Full Site Editor finden Sie in unserem Anfängerleitfaden zur Vollständigen Website-Bearbeitung.

Die Facebook Like Box Widget in WordPress einbetten

Wenn Sie ein klassisches WordPress-Theme verwenden, möchten Sie die Facebook Like Box möglicherweise in einem Widget-fähigen Bereich anzeigen, z. B. in einer Seitenleiste, im Header oder im Footer. Dies ist eine großartige Möglichkeit, die Like Box anzuzeigen, ohne die Benutzer vom Hauptinhalt der Seite abzulenken.

Wählen Sie im Popup „Feed einbetten“ die Option „Zu einem Widget hinzufügen“, um zum blockbasierten Widget-Editor zu gelangen.

Klicken Sie nun, wie in der vorherigen Methode, einfach auf die Schaltfläche „+ Block hinzufügen“, suchen Sie den Facebook-Feed-Block und ziehen Sie ihn in den gewünschten Bereich.

Auf unserer Demoseite möchten wir die Like Box als WordPress-Seitenleisten-Widget verwenden.

Wählen Sie im Block den Facebook-Feed mit der zuvor erstellten Like Box aus.

Klicken Sie dann auf „Aktualisieren“, um die Änderungen live zu schalten.

Und Sie sind fertig!

So sieht die Seitenleiste auf unserer Testseite mit dem Like Box-Widget aus:

Einbetten des Facebook Like Box Widgets mit einem Shortcode

Wenn die beiden vorherigen Methoden nicht funktionieren, empfehlen wir, die Facebook Like Box oder Fan Box mit einem Shortcode hinzuzufügen.

Kopieren Sie einfach den Shortcode aus dem "Embed Feed"-Popup und fügen Sie ihn irgendwo auf Ihrer Website ein.

Weitere Informationen zur Verwendung von Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen von Shortcodes in WordPress.

Methode 2: Hinzufügen einer Facebook Like Box mit Code

Wenn Sie nur eine Facebook Fan Box oder Like Box anzeigen möchten, ohne andere Arten von Facebook Feeds hinzuzufügen, dann mag die Verwendung eines Facebook Seiten-Plugins wie übertrieben erscheinen. In diesem Fall können Sie die Like Box stattdessen per Code hinzufügen.

Diese Methode mag für Anfänger einschüchternd wirken, aber wir zeigen Ihnen eine narrensichere Methode, um Code mit WPCode einzufügen. Es ist ein WordPress-Plugin, das das Hinzufügen von benutzerdefinierten Code-Snippets zu WordPress erleichtert, ohne Ihre Website zu beschädigen.

Für diese Anleitung reicht die kostenlose WPCode-Version aus, obwohl Sie auf die Pro-Version für erweiterte Funktionen wie den Testmodus und eine Cloud-basierte Code-Snippet-Bibliothek upgraden können.

Zuerst installieren wir das Plugin in WordPress. Sobald es aktiv ist, gehen Sie zu Code Snippets » + Snippet hinzufügen. Wählen Sie dann 'Benutzerdefinierten Code hinzufügen (Neues Snippet)' und klicken Sie auf '+ Benutzerdefiniertes Snippet hinzufügen'.

Sie gelangen nun zum Code-Editor. Geben Sie Ihrem benutzerdefinierten Code-Snippet zuerst einen Namen, damit Sie es später leicht identifizieren können. Für dieses Beispiel nennen wir es „Facebook JavaScript SDK“, da dies das ist, was wir hier hinzufügen werden.

Halten Sie diesen Tab nun offen und erstellen Sie einen neuen Tab in Ihrem Browser, um zur Facebook Developers Seite zu gelangen.

Klicken Sie im Menü auf „Anmelden“, um sich bei Ihrem Facebook-Konto anzumelden.

Wenn Sie diese Seite zum ersten Mal aufrufen, schließen Sie den Onboarding-Assistenten ab, um ein kostenloses Konto zu erstellen.

Sie werden dann zum Facebook Developers Dashboard weitergeleitet. Klicken wir auf die Schaltfläche „App erstellen“.

Wählen Sie auf der nächsten Seite einfach „Andere“ für den Anwendungsfall aus.

Klicken Sie danach auf die Schaltfläche „Weiter“.

Jetzt sehen Sie alle verschiedenen Apps, die Sie für Ihre Facebook-Seite erstellen können.

Um eine Like Box zu erstellen, können Sie einfach „Unternehmen“ auswählen und dann auf „Weiter“ klicken.

Geben wir Ihrer App jetzt einen Namen. Es kann alles sein, was Sie möchten, da dies nur zur Referenz dient. Sie können auch Ihre E-Mail-Adresse eingeben und ein optionales Geschäftskonto auswählen.

Klicken Sie schließlich einfach auf „App erstellen“.

Gehen wir nun zur Facebook Developers-Seite für Social Plugins.

Scrollen Sie dann nach unten, bis Sie einen Abschnitt wie im folgenden Screenshot finden:

Stellen Sie hier sicher, dass Sie die URL Ihrer Facebook-Seite eingeben, das Feld „Tabs“ leeren und bei Bedarf die Breite und Höhe der Like Box angeben.

Sie können auch einen kleineren Header verwenden, das Titelbild deaktivieren und mehr. Wir haben uns auch dafür entschieden, die Like Box an die Containerbreite anzupassen, damit sich die Größe responsiv an die Stelle anpasst, an der sie auf der Website platziert wird.

Klicken Sie nach Abschluss auf die Schaltfläche „Code abrufen“. Daraufhin wird ein Popup angezeigt, das Ihnen zwei Arten von Code-Snippets anzeigt: JavaScript SDK und iFrame. Beide zeigen Ihre Like Box an, aber im Allgemeinen ist das JavaScript SDK eine viel bessere Option.

JavaScript SDKs sind normalerweise schneller, da sie direkt in die Webseite eingebettet sind und als Teil des Hauptdokuments geladen werden können. iFrames erfordern das Laden eines vollständigen HTML-Dokuments, was die Ladezeit der Seite verlangsamen kann.

Stellen Sie im Tab „JavaScript SDK“ sicher, dass der zuvor erstellte App-Name ausgewählt ist.

Kopieren Sie dann den JavaScript SDK API-Code aus Schritt 2. Lassen Sie diesen Tab geöffnet, wechseln Sie zum WPCode-Tab und fügen Sie den Code dort ein.

Sie können den Code-Typ als „HTML-Snippet“ belassen.

Scrollen Sie nun nach unten zum Abschnitt „Einfügen“.

Die Einfügungsmethode kann auf „Automatisch einfügen“ belassen werden, während der Speicherort auf „Website-weiter Body“ geändert werden sollte.

Machen Sie den Code schließlich aktiv und klicken Sie auf „Snippet speichern“.

Als Nächstes erstellen Sie ein zweites Code-Snippet. Sie können die gleichen Schritte wie zuvor ausführen und es zum Beispiel „Facebook Like Box“ nennen.

Wechseln Sie danach zur Facebook Developers-Seite für Social Plugins von zuvor und kopieren Sie den Code aus Schritt 3.

Navigieren Sie erneut zum WPCode-Tab und fügen Sie den Code aus Schritt 3 in das Feld „Code-Vorschau“ ein. Der Code-Typ kann „HTML-Snippet“ sein.

Scrollen wir nach unten zum Abschnitt „Einfügen“.

Wenn Sie „Automatisch einfügen“ verwenden, können Sie die Like Box automatisch an mehreren Stellen anzeigen lassen, die zur Kategorie „Standort“ passen.

In unserem Beispiel haben wir uns entschieden, den Speicherort „Site-Weiter-Footer“ zu wählen, was bedeutet, dass die Like Box im Footer angezeigt wird.

Es gibt auch andere Optionen, wie z. B. "Vor dem Beitrag einfügen", um die Like-Box vor allen Ihren WordPress-Blogbeiträgen anzuzeigen.

Auf der anderen Seite ermöglicht die Methode „Shortcode“, einen benutzerdefinierten Shortcode zu erstellen.

Sie können es dann mit dem Shortcode-Block zu bestimmten Teilen Ihrer Website hinzufügen.

Sobald Sie die Einstellungen für die Einfügung konfiguriert haben, aktivieren Sie einfach den Code und klicken Sie auf „Snippet speichern“.

Das ist alles! Sie können dann Ihre Website besuchen, um zu sehen, wie die Like Box aussieht:

Weitere Anleitungen zum Anzeigen von Social-Media-Feeds auf Ihrer WordPress-Website finden Sie in unserem Artikel „Social-Media-Feeds in WordPress hinzufügen“.

Bonus: Weitere Möglichkeiten zur Integration von Facebook mit WordPress

Möchten Sie Ihre Facebook-Integration auf die nächste Stufe heben? Schauen Sie sich diese zusätzlichen Anleitungen an:

• So erstellen Sie ein Facebook Like Box Popup in WordPress – Steigern Sie das Engagement mit einem strategisch platzierten Like Box Popup.
• Facebook-Statusbeiträge in WordPress einbetten – Teilen Sie spezifische Facebook-Updates direkt auf Ihrer Website.
• So binden Sie einen Facebook-Gruppenfeed in WordPress ein – Zeigen Sie Ihre Community-Diskussionen auf Ihrer Website an.
• So zeigen Sie Ihre Facebook-Seitenbewertungen in WordPress an – Präsentieren Sie soziale Beweise mit Kundenbewertungen von Facebook.
• Schnelle Wege, um mehr Facebook-Likes mit WordPress zu erhalten – Implementieren Sie diese Strategien, um Ihre Facebook-Fangemeinde zu vergrößern.
• So zeigen Sie Twitter und Facebook von Autoren auf der Profilseite an – Verbinden Sie Ihre Leser mit Ihren Mitwirkenden in sozialen Medien.
• Facebook-Reaktionen hinzufügen – Bringen Sie die beliebte Reaktionsfunktion von Facebook zu Ihren Blogbeiträgen.
• Erstellen einer Facebook-Anzeigen-Landingpage in WordPress – Gestalten Sie hochkonvertierende Landingpages für Ihre Facebook-Werbekampagnen.
• Automatisch von WordPress nach Facebook posten – Optimieren Sie Ihre Social-Media-Strategie mit automatischen Beiträgen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine Facebook Like Box oder Fan Box in WordPress hinzufügen. Vielleicht möchten Sie auch unser ultimatives Social-Media-Cheat-Sheet und die Liste der besten Social-Media-Plugins für WordPress 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.