Facebook Like Box, auch bekannt als Facebook Fan Box, ist zu einem Muss für viele Websites geworden. Es ermöglicht Websitebesitzern, ihren Benutzern eine einfache Möglichkeit zu bieten, ihrer Facebook-Community beizutreten und Updates direkt in ihrem Facebook-Newsfeed zu erhalten. Kürzlich hat uns einer unserer Benutzer darauf aufmerksam gemacht, dass wir das Thema zum Hinzufügen der Facebook-ähnlichen Box in WordPress nicht behandelt haben. Obwohl wir beschrieben haben, wie Sie die Facebook-Gefällt mir-Schaltfläche, die Facebook-Sendeschaltfläche und die Facebook-Kommentare hinzufügen. In diesem Artikel zeigen wir Ihnen, wie Sie die Facebook-Fanbox in WordPress hinzufügen.
Hinzufügen einer Like-Box mit dem offiziellen Facebook-Plugin für WordPress
Die vielleicht einfachste Möglichkeit, Ihrer WordPress-Site eine Facebook-ähnliche Box hinzuzufügen, besteht darin, das offizielle Facebook-Plugin für WordPress zu verwenden. Als erstes müssen Sie die installieren und aktivieren Facebook Plugin. Gehen Sie nach der Aktivierung des Plugins zu Aussehen » Widgets. Ziehen Sie das Facebook-ähnliche Box-Widget einfach per Drag & Drop in Ihre Seitenleiste. Sie müssen die URL Ihrer Facebook-Fanseite in den Widget-Konfigurationen angeben.
Das Widget hat die gleichen Optionen wie Facebook-Social-Plugins für Websites. Sie können einen Stream anzeigen, Gesichter anzeigen, Kopfzeile entfernen, Rahmenfarbe ändern. Derzeit sind nur zwei Themen hell und dunkel verfügbar.
Wie Box manuell hinzufügen, ohne ein Plugin zu verwenden
Es ist möglich, Facebook Like Box manuell hinzuzufügen, ohne ein Plugin zu verwenden. Gehe zu Like Box des Facebook Social Plugins Seite. Geben Sie die URL Ihrer Facebook-Seite an und konfigurieren Sie das Aussehen der Like-Box.
Drücken Sie die Code abrufen Schaltfläche, um den Code für das Like-Box zu erhalten.
Facebook bietet Ihnen mehrere Möglichkeiten, den Like-Box-Code auf Ihrer Website hinzuzufügen. Sie können zwischen HTML5, XFBML und Iframe wählen. Wir zeigen Ihnen, wie Sie jeden von ihnen hinzufügen, aber Sie müssen einen auswählen. Unserer Meinung nach ist HTML5 eine einigermaßen gute Option für die meisten WordPress-basierten Websites. XFBML ist gut für Leute, die andere Facebook-Plugins verwenden, die XFBML verwenden, um Facebook-Buttons anzuzeigen. Verwenden Sie iframe, wenn die ersten beiden Optionen für Sie nicht funktionieren.
Hinzufügen von HTML5 Facebook Like Box Code in WordPress
Klicken Sie im Codefenster auf die Registerkarte HTML5 und kopieren Sie den ersten Teil des Codes. Sie empfehlen, dass Sie es gleich danach einfügen <body>
-Tag, das normalerweise in Ihrer header.php-Datei zu finden ist. Es funktioniert jedoch überall im Körper. Um es dir leicht zu machen, kannst du es einfach in der Fußzeile hinzufügen, indem du unser Kopf- und Fußzeilen-Plugin einfügen. Der erste Teil des Codes würde so aussehen:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
Dieses Javascript verbindet Ihre Website mit der Javascript-Bibliothek von Facebook. Kopieren Sie nun den zweiten Teil des Codes, der in etwa so aussehen würde:
<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Dieser Teil des Codes weist das Javascript, das Sie zuvor geladen haben, an, das ähnliche Feld an dieser Stelle und mit diesen Parametern anzuzeigen. Für dieses Beispiel fügen wir diesen Code in die Seitenleisten-Widgets ein. Gehe zu Aussehen » Widgets. Ziehen Sie ein Text-Widget per Drag & Drop in Ihre Seitenleiste und fügen Sie den Code darin ein. Speichern Sie Ihr Widget und überprüfen Sie Ihre Website.
Dies funktioniert auch in jedem anderen Bereich Ihrer Website. Wenn Sie mit Code vertraut sind, können Sie diesen in Ihre Fußzeile, nach dem Post usw. einfügen.
Vergessen Sie nicht, die URL der Facebook-Fanseite in Ihre eigene Seiten-URL zu ändern.
Hinzufügen von XFBML Facebook Like Box Code in WordPress
Klicken Sie auf die Registerkarte XFBML, um den Code für die XFBML-Facebook-ähnliche Box zu erhalten. Um eine XFBML Facebook Like Box hinzuzufügen, müssen Sie drei kleine Codestücke in WordPress hinzufügen.
Kopiere das erste Stück Code und füge es in dein Theme ein header.php
gleich danach ablegen <body>
Schild. Ähnlich wie der letzte funktioniert dieser Code überall im Körper. Um es dir leicht zu machen, kannst du es einfach in der Fußzeile hinzufügen, indem du unser Kopf- und Fußzeilen-Plugin einfügen. Dieser Code möchte in etwa so aussehen:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
Diese kleine Javascript-Funktion verbindet Ihre Website mit der Javascript-Bibliothek von Facebook.
Die zweite Codezeile ist eine XML-Namespace-Deklaration, und Sie müssen sie im <html>
Tag Ihrer Website. Der einfachste Weg wäre, deine Themes zu öffnen functions.php
Datei, fügen Sie den folgenden Code ein:
//Adding the Open Graph in the Language Attributes function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"'; } add_filter('language_attributes', 'add_opengraph_doctype');
Kopieren Sie zuletzt die dritte Codezeile, die so aussehen würde:
<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
Dieser Code weist das Javascript, das Sie im ersten Schritt geladen haben, an, die Like-Box an dieser Stelle und mit diesen Parametern anzuzeigen. Gehe zu Aussehen » Widgets. Ziehen Sie ein Text-Widget per Drag & Drop in Ihre Seitenleiste und fügen Sie die dritte Codezeile in dieses Text-Widget ein. Speichern Sie Ihre Änderungen und sehen Sie sich eine Vorschau Ihrer Website an.
Facebook Likebox iframe in WordPress hinzufügen
Klicken Sie auf die Registerkarte IFRAME, um den Iframe-Code zu kopieren. Gehe zu Aussehen » Widgets und ziehen Sie ein Text-Widget per Drag & Drop in Ihre Seitenleiste. Fügen Sie den iframe-Code in das Text-Widget ein und speichern Sie die Änderungen. Öffnen Sie Ihre Site, um eine Vorschau der Facebook-Fanbox anzuzeigen.
Wir hoffen, dieser Artikel hat Ihnen geholfen, Facebook Like Box / Fan Box auf Ihrer WordPress-Site hinzuzufügen. Bei Fragen und Feedback hinterlassen Sie bitte einen Kommentar. Du kannst auch Folge uns auf Facebook.