Plugins, Social Media, Tutorial
Kommentare 3

Facebook Widget in WordPress einbauen

Facebok Widget

Soziale Netzwerke, wie Twitter, Facebook & Co, gehören heute zum Bloggeralltag. Die wichtigsten Plattformen sind Twitter, Facebook, Google Plus, Pinterest und Instagram. Dazu kommen noch die speziellen themenabhängigen Plattformen. Bei Bücherblogs sind das beispielsweise LovelyBooks und Was liest Du?

Es gibt zwei Wege der Kommunikation zwischen Blog und den Sozialen Netzwerken. Grafik KommunikationMit den Share Buttons unter oder über den Beiträgen im Blog, können diese Beiträge in den Sozialen Netzwerken geteilt werden. Der umgekehrte Weg ist, auf den Blogs die eigenen Aktivitäten der Sozialen Netzwerke anzuzeigen. Diese Widgets sieht man in Blogs immer öfter. Facebook und Google Plus Seiten mit oder ohne Feed, Twitter Feeds oder Bilder von Pinterest und Instagram und viele andere mehr.

Bevor du jedoch wahllos Social Widgets einbindest, solltest du dir überlegen, warum du das machen möchtest und wie sinnvoll das für deinen Blog und deine Ziele ist.

Update vom 14.06.2016

Das Landgericht Düsseldorf hat am 09.03.2016 in einem Urteil die Nutzung von Like Buttons und Social Plugins von Facebook untersagt. Die Einbindung von Social Plugins verstößt gegen das Datenschutzrecht und die Betreiber von Webseiten, mit eingebundenen Social Plugins, riskieren somit eine Abmahnung.

Weitere Infos kannst du bei Allfacebook nachlesen.

Heute zeige ich dir, wie du ein Facebook Widget für deine Facebook Seite in deinen Blog einbauen kannst. Grundsätzlich gibt es zwei Möglichkeiten:

  • mit einem Plugin für WordPress
  • ohne Plugin direkt von Facebook

Bei der Verwendung von Plugins solltest du darauf achten, die Zahl der Plugins möglichst gering zu halten. Plugins haben einen direkten Einfluss auf die Ladezeiten und die Sicherheit deines Blogs.

Facebook Seite direkt einbinden

Facebook stellt Widgets für Facebook Seiten zur Verfügung, die in die Website bzw. Blog eingebaut werden können. Diese Methode kann ich nur für diejenigen empfehlen, die sich ein wenig mit dem Einbinden von Codes auskennen. Der Code ist unabhängig von WordPress und anderer Software und kann überall dort eingebunden werden, wo das Facebook Widget angezeigt werden soll.

Die Social Plugins stehen auf der Facebook Entwickler Seite. Der direkte Link ist https://developers.facebook.com/docs/plugins/page-plugin.

Du gelangst dorthin auch über deine Facebook Seite. Gehe auf den Link Entwickler unten auf der Seite. Dann wählst du Social Plugins –> Embedded Posts, Pages & Video –> Page Plugin. Auf dieser Seite siehst du dann die verschiedenen Möglichkeiten, die du in deinem Blog einbinden kannst. Du kannst das Aussehen und Größe der Widgets nach Wunsch einstellen und in der Vorschau kontrollieren.

Standard Facebook Widget

Einstellungen für das Facebook Widget, das die Freunde mit anzeigt

Wähle dein Widget aus und klick auf den Get Code Button. Du erhältst deinen individuellen Code für dein Widget.

Code für das Facebook Page Plugin

Code für das Facebook Page Plugin

Das Einbinden des Codes erfolgt in zwei Schritten. Zuerst musst du Javascript, das unter Punkt 1 angezeigt wird, in deinen Quellcode reinkopieren. In WordPress kopierst du den Code in die Datei mit dem <body> tag. Welche php-Datei das ist, hängt von deinem Theme ab. Änderungen solltest du nur in deinem Childtheme vornehmen. Das zweite Codeschnipsel kannst du dann überall dort einbinden, wo du das Widget haben möchtest.

Facebook Widget in WordPress als Plugin einbauen

Wenn du dich mit dem Einbinden von Codes nicht auskennst oder kein Childtheme zu deinem Theme hast, kannst du ein Plugin installieren, das das Facebook Widget einbindet. Dafür stehen dir zahlreiche Plugins zur Verfügung. Ich habe mir 3 Plugins näher angesehen.

Die beiden Plugins Simple Facebook Plugin und Facebook Like Widget unterscheiden sich nur wenig voneinander. Beide Plugins werden als Widget eingebunden. Die Widgets sehen genauso aus, wie die über Facebook direkt eingebundenen Widgets. Die Widgetbereiche sind im verwendeten Theme festgelegt. Meistens ist es die Sidebar und der Footer. Beide Plugins bieten fast die gleichen Einstellungen, wie Facebook. Das Like Widget benötigt mehr Einstellungen, als das Simpel Facebook Plugin. Die angezeigten Widgets unterscheiden sich kaum.

Das Custom Facebook Feed dagegen zeigt nur den Facebook Feed, der individuell angepasst, und auch außerhalb der Widgetbereiche, verwendet werden kann.

In einem Blog ohne Childtheme, habe ich mich für das Simple Facebook Plugin entschieden. Das Plugin ist responsive und am einfachsten und schnellsten einzubauen.

Einstellungen WP-Plugin

Einstellungen WordPress Plugin

Ich finde das Titelbild mit dem Teilen Button ausreichend, wie du am Beispiel des Screenshots am Artikelanfang sehen kannst. Probeweise lasse ich für eine andere Facebook Seite noch den Feed anzeigen. Dazu habe ich die Option Show Page Posts gewählt.

Facebook Widget mit Feed

Facebook Widger mit angezeigten Feed

Auf dem Button steht statt Teilen Registrieren, weil ich den Call-To-Action Button so genannt habe, der jetzt angezeigt wird. Registrieren bedeutet in diesem Fall die Anmeldung zum Newsletter.

Fazit

Soziale Netzwerke gehören heute zum Bloggeralltag. Die Kommunikation zwischen dem Blog und den Sozialen Netzwerken bilden die Share Buttons in den Beiträgen und die Social Widgets der eigenen Seiten in der Sidebar oder dem Footer.

Es gibt verschiedene Möglichkeiten die Social Widgets einzubinden. Dieses Tutorial zeigt den Einbau der Facebook Seite mit und ohne Plugin.

DISCLAIMER: Ich übernehme keinerlei Haftung für die Umsetzung der Tipps in diesem Beitrag! Das gilt vor allem für das Kopieren und Einfügen von Codeschnipseln in den Quellcode.

Screenshots und Grafik: ©Kristina Marino

3 Kommentare

  1. Hallo Kristina,

    schön, dass du dieses Thema hier mal so übersichtlicht beschreibst.

    Eine kleine Ergänzung: Zum Einbinden des Quellcodes würde ich vom Editieren der Theme-Dateien unbedingt abraten! Mindestens ein Child-Theme ist dazu nötig und auch dann sollte man wissen, was man tut. 😉
    Mit einem Plugin wie z.B. Header and Footer kann man stattdessen einfach und sicher aus dem Backend beliebigen Quellcode auf allen oder bestimmten Seiten und an verschiedenen Positionen einfügen.

    Schönen Gruß
    Michelle

  2. Hallo Michelle,

    freut mich, dass die mein Beitrag gefällt und danke für den Tipp für das Plugin für Header und Footer.

    Das Einbiden des Quellcodes ist für Anfänger nicht geeignet. Darauf weise ich in meinem Artikel hin, genauso, dass Änderungen nicht an Originaldateien vorgenommen werden sollen.

    Viele Grüße
    Kristina

  3. Klasse Beitrag dank!
    Ein Gericht entscheidet…….

    Gilt aber wieder nur mal für und gegen die Deutschen!

    Diese Gerichtsdeppen 🙂 Hahaha verklagt uns mal in Uruguay.

    Die Sicherheit gegen jede Abmahnung!

    Die Einfachste Umgehung Rechtlichen Unfugs.
    Deuru.

    Liebe Grüße aus Uruguay

    Peter

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.