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.

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.

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

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.

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.

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.

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. ™