Home Menü

Facebook Like Box in WordPress richtig einbinden (als Widget)

Die „Like Box“ von Facebook ist für Webseitenbetreiber ein ideales Mittel um passiv mehr Fans für die eigene Facebook-Fanpage zu gewinnen. Diese Anleitung zeigt Ihnen, wie Sie eine solche „Like Box“ erstellen, in WordPress als Widget in der Sidebar einbinden, den Datenschutz gewährleisten, die Sprache auf Deutsch umstellen und die Performance durch asynchrones Laden der Skripte hoch halten.

Ein Beispiel für eine Like-Box

Seitdem jüngsten Redesign von Blog IT-Solutions nutzen wir die Facebook Like-Box in der Sidebar unserer WordPress-Installation.

Bereits in den ersten Monaten hat sich gezeigt, dass die Like-Box ihren Sinn erfüllt und passiv, also ohne aktiv Aufwand und Energie in den Aufbau der Fanbase zu stecken, neue Fans generiert, welche häufig auch zu Stammlesern werden. Doch der Einbau dieser Like Box als Widget unter WordPress war nicht (ganz so) einfach und mit einigen Problemen behaftet. Damit Sie mit diesen Problemen nicht unnötig Zeit verschwenden, habe ich Ihnen die wichtigsten Punkte die es zu beachten gibt in dieser Anleitung zusammengestellt.

Facebook Like Box erstellen

Um eine Facebook Like Box zu erstellen, folgenden Sie dem Link in den Facebook Developer-Bereich:

Facebook Developer – Like Box

Dort geben Sie die notwendigen Daten wie den Link zur gewünschten Facebook Fanpage oder optional die Höhe und Breite der Box ein. Die anderen Optionen können Sie gerne nach Lust und Laune ausprobieren. Alle Änderungen werden sofort in die Vorschau der Like Box übernommen.

Damit sich die Like Box auf Blog IT-Solutions ideal in die Sidebar einpasst, haben wir uns für eine Breite von 300 Pixel und eine Höhe von 280 Pixel entschieden. Je nachdem welche Breite Ihre Sidebar aufweist, müssen die Werte entsprechend angepasst werden.

Sobald die Vorschau Ihren Vorstellungen entspricht, können Sie den nötigen Code für Ihre Webseite mit einem Klick auf Get Code generieren. Falls Sie bei Facebook noch nicht eingeloggt sind, dann müssen Sie das an dieser Stelle jetzt nachholen.

Kopieren Sie nun am besten beide Code-Teile – den ersten Teil mit dem JavaScript-Code und den zweiten Teil mit dem HTML-Code, in eine separate Textdatei, damit Sie nachfolgend beschriebene Änderungen am Code vornehmen können.

Tipp: Wir empfehlen Ihnen an dieser Stelle unbedingt die Einbindung der Like Box mit dem HTML5-Code und nicht als iFrame, da ansonsten (wie später noch gezeigt wird) die Box nicht asynchron geladen werden kann, was das Rendering der eigenen Webseite und somit die Ladezeit verzögert.

Facebook Like Box in Deutsch

Was bei der Erstellung der Like Box über die Facebook Homepage relativ schnell auffällt, ist die fehlende Konfigurationsmöglichkeit für die Sprache. Die Konsequenz: Der Header im Beispiel wird nicht in Deutsch sondern in Englisch mit den Worten „Find us on Facebook“ dargestellt. Um die Sprache nun auf Deutsch umzustellen ist eine kleine Anpassung des ersten Code Teils – für die Einbindung des JavaScript SDKs – notwendig.

Ersetzen Sie dazu den unter Zeile 1 gezeigten und von Facebook generierten Code mit der Zeile 2, indem Sie die Zeichenfolge „en_US“ mit „de_DE“ ersetzen.

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";

Facebook Like Box Widget asynchron laden

Im Standard wird das Facebook SDK (erster Codeteil) synchron von den Facebook-Servern geladen, was dazu führt, dass der JavaScript-Code das Rendering der eigenen Webseite verzögert und die Ladezeit steigt (siehe dazu auch WordPress Performance – Skripte am Ende laden). Die Lösung: Der JavaScript-Code muss asynchron geladen werden.

Dies geschieht mit einer weiteren, kleinen Anpassung des JavaScript-Codes:

<div id="fb-root"></div>
<script>// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true; js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script>

Die einzige Veränderung im obigen Code ist lediglich dieses kleine Codefragment

js.async = true;

dass aus Sicht der Performance Ihre Besucher sehr freuen wird.

Facebook Like Box Widget einbinden

Wenn Sie alle Änderungen am Code vorgenommen haben, dann besitzen Sie nun zwei Code-Teile die für die Einbindung in WordPress bestens geeignet sind.

JavaScript-Code einbinden

Um den JavaScript-Code einzubinden, der jetzt auch bei Ihnen in etwa so aussehen sollte,

<div id="fb-root"></div>
<script>// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true; js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script>

navigieren Sie unter WordPress zu Design -> Editor und öffnen die Datei footer.php, welche normalerweise in Ihrem Theme vorhanden sein sollte. Suchen Sie nun das schließende Body-Tag

</body>

und platzieren den modifizierten JavaScript-Code unmittelbar davor.

HTML-Code einbinden

Der zweite Teil des Facebook-Codes, welcher nicht abgeändert wurde, wird nun in der Sidebar Ihres WordPress-Themes platziert (sofern dieses eine Sidebar besitzt).

<div 
class="fb-like-box" 
data-href="https://www.facebook.com/BlogITSolutions" 
data-width="300" data-height="280" data-colorscheme="light" 
data-show-faces="true" data-header="true" data-stream="false" 
data-show-border="true">
</div>

Navigieren Sie im WordPress Back-End zu Design -> Widgets und ziehen Sie dort ein Text-Widget in die Sidebar. Anschließend fügen Sie den von Facebook generierten HTML-Code in das Text-Widget ein.

Wenn Sie nun einen Blick auf Ihre Webseite werfen und das Browser-Fenster aktualisieren (gegebenenfalls muss noch der Browser-Cache geleert werden bzw. die serverseitig durch Plugins wie WP SuperCache, W3TC oder Autoptimize generierten Cache-Dateien), dann sollte die Facebook Like Box nun in Ihrer Sidebar erscheinen.

Datenschutzerklärung wegen Facebook Like Box

Abschließend noch ein paar wichtige Worte zur Datenschutzerklärung, die aufgrund der Facebook Like Box noch um einen Teil ergänzt werden muss, damit Ihr Impressum (hoffentlich wie bisher) rechtssicher bleibt und Sie sich (auch weiterhin) vor Abmahnungen schützen.

Hinweis: Der folgende Tipp ist nach bestem Gewissen zusammengestellt, er ersetzt jedoch keine Rechtsberatung.

Eine Empfehlung für die Generierung des nötigen Facebook Passus (sowie auch für andere Dienste) ist der Generator für Muster-Datenschutzerklärungen von eRecht24.de. Wählen Sie dazu auf der verlinkten Seite die von Ihnen eingebundenen Dienste aus und lassen Sie sich die notwendige Datenschutzerklärung erstellen, welche Sie anschließend auf Ihrer Seite einbinden. Gerne können Sie auch einen Blick in unsere Datenschutzerklärung werfen.

Tipp: Wenn Sie den Artikel interessant fanden, dann hinterlassen Sie uns doch gerne einen Kommentar oder werden gleich Fan unserer Facebook-Seite. Jetzt Fan werden!

Fazit

Die Facebook Like Box ist eine ganz nützliche und effiziente Methode eine Facebook Fanpage auf der eigenen Webseite zu bewerben. Wenn Sie die hier aufgelisteten Tipps beachten, dann stellt die richtige Integration der Facebook Like Box als Widget in WordPress sowohl aus rechtlicher Sicht als auch aus Sicht der Web Performance kein Problem dar.

Getestet unter WordPress 3.9(.2)

Veröffentlicht von Josef Seidl

Josef Seidl hat an der TU München und der Stanford University Wirtschaftsinformatik studiert, bevor er mit INNOSPOT sein eigenes Unternehmen gründete. Er ist begeistert von Technik, schätzt performante Webseiten und ist gerne in den Bergen unterwegs. Zu finden ist er auch bei LinkedIn und privat bei Twitter.