Facebook in ein WordPress Blog integrieren

Die API von Facebook mehr – viel mehr. Im ersten Artikel haben wir ein WordPress-Plugin vorgestellt, mit dem man quasi ein Blogzwilling als Facebook-Applikation erzeugen und in das eigene Facebook Profil einbinden kann. Hier soll ein weiteres Plugin vorgestellt werden, welches „Facebook Connect“ und „OpenID“ verwendet. Damit können Sie regelrechtes Community-Building mit Facebook um ihr Blog herum betreiben.

Zunächst ein wenig Geschichte. Vielen Nutzern ist es ein Graus, für jedes Blog ein eigenen Account zu eröffnen, um Kommentare zu posten. Da bietet es sich an, die Accounts zum Beispiel von sozialen Netzwerken mehrfach zu verwenden. Ein formales Protokoll dafür gibt es seit 2005 mit OpenID. Dabei ist ein Nutzerprofil quasi dezentral für verschiedene Provider von Diensten abrufbar und verwendbar. Das heißt, man kann sich über Facebook ein Account erstellen und diesen Account dann mit einem Blog verknüpfen oder etwa mit einem MSN oder MySpace Account verbinden, ohne das neue Accounts angelegt werden müssen. Das birgt natürlich Sicherheitsrisiken, jedoch auch viele Chancen und Möglichkeiten das Netz benutzerfreundlicher zu machen.

Facebook hat 2007 angekündigt, OpenID vollständig zu implementieren – alle anderen Branchenriesen unterstützen das Protokoll ebenfalls. Und das erklärt nun im Schluss, warum man immer häufiger Buttons, wie „Connect with Facebook“ oder „Google Friend Connect“ begegnet. Das bringt uns wiederum zu unserem Facebook Connect WordPress Plugin, welches Facebook Connect fast nahtlos in ihr WordPress Blog integriert.

Wie bereits erwähnt kann man das Blog mit dem Facebook Zugang nutzen – ist man bereits auf Facebook eingeloggt, muss man sich nicht erneut einloggen. Das ist auch eine Möglichkeit, die mit OpenID geschaffen wurde.

Zudem muss sich der Nutzer nicht für das Blog registrieren, da das Plugin über die Facebook-API die Nutzerinformationen aus Facebook holt. Das ist gerade die Erleichterung für Ihre Nutzer, da sie ihre Daten nicht noch einmal an einer anderen Stelle hinterlegen müssen. Das heißt unter anderem auch, das Profilbild des Nutzers von Facebook ist so sichtbar, was ein Blog doch sehr viel persönlicher macht. Möchte ein Nutzer sein Facebook-Account nicht mit dem Blog verknüpfen, kann er auch wie gewohnt einen eigenständigen Account anlegen.

Das Plugin versucht, viele Facebook Funktionaliäten zu integrieren. So können Sie Einladungen an Freunde in ihrem Netzwerk senden – ihr Blog kann so vom „Word-of-Mouth“ Marketing profitieren. Dies kann dadurch noch ausgeweitet werden, wenn Sie im Plugin die Option akivieren, welche die Aktivität ihrer Nuzer auf ihrem Blog, zum Beispiel die Kommentaraktivität in den Feed auf Facebook integriert. Dieser ist dann wiederum sichtbar für Freunde und Bekannte, wodurch Sie eventuell weitere Leser gewinnen können. Zu guter Letzt – Sie können, wie bei „Google Friend Connect“ ein Gadget einbinden, welches die letzten Besucher auf ihrem Blog samt Profilbild anzeigt.

Facebook Connect Implementation vom Plugin-Programmierer Sociable.es
Facebook Connect Implementation vom Plugin-Programmierer sociable.es (auf Spanisch)

Im Endeffekt wird mit diesem Plugin der Spieß umgedreht. Im vorangehenden Artikel stellten wir ein Plugin vor, mit dem man das Blog und die Funktionalität in Facebook integriert – hier soll dem Blog die Möglichkeit gegeben werden, Inhalte und Funktionalitäten aus den sozialen Netzwerken zu verwenden, ohne in diese integriert zu werden.

Plugin Installation und Konfiguration

Zunächst muss, wie im vorherigen Artikel beschrieben, ein Zugang zur Facebook-API eingerichtet werden. Für diesen erhalten Sie dann einen API-Schlüssel. Für das Plugin müssen sie wiederum eine eigene Anwendung erstellen, für welche Sie wiederum eine Anwendungs-ID erhalten.

Neue Facebook Applikation erstellen
Neue Facebook Applikation erstellen

Sie müssen zudem die Callback-URLs definieren. Diese verweisen auf das Root-Verzeichnis Ihres Blogs.

Callback URLs für die neue Facebook Applikation definieren
Callback URLs für die neue Facebook Applikation definieren

Danach ist die Arbeit eigentlich schon erledigt und der Spaß kann beginnen. Sie müssen nun das Plugin von der Webseite des Programmierers herunterladen. Laden Sie dieses in das Plugin-Verzeichnis ihrer WordPress-Installation und entpacken Sie es dort. Das Plugin selbst besteht zum großen Teil aus der Programmbibliothek „Facebook Connect“, die von Facebook stammt. Eine Datei könnte Ihnen dabei auffallen, da sowohl eine PHP als auch eine HTML-Datei mit gleichem Namen auftaucht – die Datei „xd_receiver.htm“. Diese hat eine zentrale Rolle, da über Sie die „cross-domain communication“ abgewickelt wird. Daher auch der Name x für cross und d steht für Domain.

Was hat es damit auf sich? Typischerweise werden HTTP-Anfragen über das XMLHttpRequest behandelt. Die Sicherheitseinstellungen im Browser erlauben jedoch nur die Nutzung von XMLHttpRequest, sofern die Anfragen an dieselbe Domain geschickt werden. In unserem Fall müssen Anfragen jedoch von und an Facebook gesendet werden können. Das wird mit so genannter „Iframe Cross Domain Communiation“ erledigt. Dabei erzeugt die Applikation auf facebook.com ein Iframe mit der entsprechenden Anfrage, etwa ob ein Nutzer bereits bei Facebook eingeloggt ist. Diese Anfragen werden über den URL des Iframes erzeugt. Es wird dann wiederum auf der Domain von facebook.com, die Anfrage überprüft – also etwa der Login Status. Daraufhin wird auf der Applikationsdomain ein Iframe erzeugt, an welches das Ergebnis gesendet wird. Das Ergebnis der Anfrage landet als Query-String an die Datei xd_receiver.htm auf dem eigenen Server. Somit wurde die Nutzung von XMLHttpRequest umgangen.

Nun zurück zu unserem Plugin. Nachdem dieses in das Plugin-Verzeichnis hochgeladen wurde, kann es aktiviert werden. Daraufhin können Sie die Einstellungen des Plugins verändern und es als Widget zum Beispiel in Ihre Sidebar einfügen. Zunächst sind jedoch API-Key und Schlüssel anzugeben.

Einstellungen für das Facebook Connect Plugin
Einstellungen für das Facebook Connect Plugin

Wie sie sehen, können Sie hier bereits gewisse Optionen aktivieren – so zum Beispiel das automatische Einfügen von Kommentaren, ohne das diese vorher moderiert werden. Da sich auf Facebook in der Regel nur natürliche Personen tummeln, ist das eine Option, die man vielleicht aktivieren kann.

Der „Facebook share“-Button kann ebenfalls automatisch an ihre Blog-Posts angefügt werden – zudem können Sie die Option aktivieren, das Kommentare ihrer Nutzer in deren Aktivitätsfeed auf Facebook integriert werden.

Nachdem Sie diese Einstellungen angepasst haben, werden Sie informiert, dass Sie für die Darstellung kein Template definiert haben. Um ein Template zu aktivieren und mit Facebook zu „synchronisieren“, müssen sie nun bei den Einstellungen etwas weiter nach unten scrollen und die Templates erzeugen und dann aktivieren.

Facebook Connect Template Einstellungen anpassen
Facebook Connect Template Einstellungen anpassen

Wie Sie sehen, können Sie hier auch die Sprache über die Templates anpassen. Das erste Template ist zum Beispiel für die Aktivitätsfeeds auf Facebook. Diese können Sie jedoch auch in ihr Facebook Connect Gadget integrieren (siehe das Beispiel auf sociable.es).

Nun bleibt eigentlich nur noch, dass „Facebook Connect Gadget“ als Widget in die Sidebar einzufügen. Dazu müssen Sie nun auf die Seite für die Widgets wechseln und das „Facebook Connect Widget“ in Ihre Sidebar kopieren.

Facebook Connect Widget in die Sidebar integrieren
Facebook Connect Widget in die Sidebar integrieren

Auch hier haben Sie einige Konfigurationsmöglichkeiten – insbesondere können Sie die Sprache anpassen und entscheiden ob ein großer „Connect to Facebook“ Button angezeigt werden soll. Nachdem das Widget installiert ist, sollten Sie erst einmal herumprobieren, was das Plugin für Sie bereit stellt. Insbesondere das Widget auf sociable.es stellt mit den Tabs eine schöne Implementation dar. ™

Thiemo Fetzer lebt seit 2008 in London und promoviert dort im Fachbereich "Entwicklungsökonomie" an der London School of Economics. Zuvor hat er Wirtschaftswissenschaften, Mathematik und Informatik in Magdeburg und Ulm studiert.

Sortiert nach:   neueste | älteste | beste Bewertung
Uwe
Gast
6 Jahre 8 Monate her

Ein sehr gut geschriebener Artikel, vielen Dank!

Ich habe im Google Reader auf „Bevorzugen“ geklickt, aber vermutlich siehst Du das ja nicht, deshalb auf diesem Weg hier auch nochmals :-)

Bernhard
Gast
6 Jahre 8 Monate her

Gibt es so etwas auch für Googles Aufkauf „Blogger.com“ ?

Gruß
Bernhard

Bernhard
Gast
6 Jahre 8 Monate her

a bisserl off topic:

Toll, Eure Editierfunktion für Kommentare. Gibt es so etwas für WordPress? – Das würde ich gern einem sehr bekannten WordPress.Blogger unter die „Nase“ halten (ich habe selbst mit WP nix am Hut).

Ich sehe gerade: Die Editierfkt. ist WordPress Ajax. –> Gibt es einen Tipp?

Gruß aus hessisch-Absurdistan,
Bernhard

Tim
Gast
Tim
6 Jahre 8 Monate her
ovidiu
Gast
6 Jahre 7 Monate her

hi,

hab den gleichen Artikel auch woanders in English gelesen und habe ein Paar wichtige Verstaendnisfragen hierzu:

– laesst sich der connect via FACEBOOk button der im widget autaucht auch an anderer Stelle einfuegen, wie z.b. auf der Login seite von meinem Blog?
– wenn man auf Invite your friends geht, ist die seite mit meinen freunden extrem weit und schiebt meine sidebar unter den Inhalt. Ich glaube die Groesse kann man in Facebook eisntellen? zumindest mit css kann ich da nicht viel machen.

Karsten
Gast
6 Jahre 7 Monate her

Hi,

gibt es auch eine Möglichkeit, Facebook Events ins Blog zu holen (oder umgekehrt)?

Niklas Beinghaus (@deroeko)
Gast
5 Jahre 8 Monate her

Mich würde auch interessieren, ob es irgendeine Möglichkeit gibt, Events aus Facebook einzubauen…

trackback

[…] Anleitung auf drweb.de. Dort gibt es auch eine Anleitung für die umgekehrte Variante, nämlich Facebook in sein WordPress zu entführen, aber ich denke, das werde ich hier nicht machen – dafür ist Facebook einfach zu […]

Hier
Gast
6 Jahre 7 Monate her

Ich hab nen T-Shirt da steht vorne dick drauf:

I am NOT in Facebook

:-) Und so bleibt das auch!

trackback
6 Jahre 7 Monate her

[…] zu diesem Zweck habe ich für den Windows Live Writer eine Fan Seite erstellt und im Blog das Facebook Connect WordPress Plugin […]

sparblog
Gast
6 Jahre 4 Monate her

Hallo,

nette Anleitung, habe alles schritt für schritt gemacht, aber wenn ich in mein blog ein Beitrag erstelle, erscheint er nicht auf der Facebook Seite ?

Kann mir jemand helfen ?

Gruß
sparblog

Therme
Gast
6 Jahre 11 Tage her

Super, ein sehr guter Artikel.
Genau so etwas habe ich gesucht. Das versuche ich in unseren Blog umzusetzen und einzubauen. Bin zwar nicht so ein Freund von Facebook, aber es würde auf jeden Fall einen Mehrwert für den Blog ergeben.

hellraiser
Gast
5 Jahre 10 Monate her

Klasse geschrieben. Wer soviel Liebe in einen Blogbeitrag steckt, verdient auch einen Kommentar.

Olly
Gast
5 Jahre 7 Monate her

Danke für den Tip – und weiter so !

http://wordpress.org/extend/pl

Gruss

stan
Gast
stan
5 Jahre 7 Monate her

Cool danke !

seo bunny
Gast
seo bunny
5 Jahre 7 Monate her

Funktioniert das auch wenn mein Profil in den Einstellung auf Privat gestellt wurde?

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen