WordPress

Ein WordPress Blog in Facebook integrieren

31. August 2009

Seit Mai 2007 gibt es die Facebook-API und ein Netzwerk aus Entwicklern hat diese schon eifrig auf Herz und Nieren getestet, so dass tagtäglich neue Applikationen auf Basis der API entstehen. Das „Gesichtbuch“ sprengt die Superlative – mehr als 250 Millionen Benutzer verbringen jeden Tag insgesamt mehr als 5 Milliarden Minuten in dem Netzwerk. Zeit, sich Gedanken zu machen, wie man Facebook etwa für das Blogging verwenden kann.

In Deutschland ist Facebook noch ein relativ „kleiner“ Player mit großem Potenzial. Im Juli gab es etwa 3,4 Millionen aktive Nutzer, Tendenz steigend, hauptsächlich in der Altersgruppe von 18-35 Jahren. Im Vergleich: bei Studivz sind etwa 14 Millionen Nutzer aktiv dabei. Facebook kann also in Deutschland auch prächtig wachsen, trotz der Konkurrenz durch Studivz.

Die ersten Applikationen auf Basis der Facebook-API waren direkt in das Netzwerk integriert. So gibt es zum Beispiel jede Menge interaktive Browser-Spiele, welche man über das Netzwerk mit seinen Freunden spielen kann. Aktuell ist zum Beispiel die Applikation „Mafia Wars“ ein Renner. Dabei muss man als Spieler eine „Mafia Familie“ mit seinen Freunden gründen und um Geld zu verdienen, Aufgaben wie Schutzgeld einsammeln und so weiter erledigen. Die Applikationen wachsen dabei durch ein einfaches Schneeballsystem – denn, um zum Beispiel eine „Mafia Familie“ zu gründen, muss man Freunde dazu bewegen, dieser beizutreten – diese stehen dann wieder vor der Wahl, Freunde einzuladen, um eine eigene Familie zu gründen. So multipliziert sich die Nutzeranzahl und die Applikationen wachsen bisweilen rapide.

Diese Applikationen tragen sich in der Regel durch Vermarktung und Werbung und machen, so ganz nebenbei, Facebook noch attraktiver. Das kann auch eine Erklärung für das rasante Wachstum von Facebook auch in Deutschland sein.

Seit Anfang 2009 gibt es zum Beispiel das Plugin Wordbook für WordPress von John Eckman. Mit diesem Plugin können WordPress Nutzer ihre Posts auch direkt ins Facebook stellen und den Nutzern das Kommentieren, sowie das Weiterverteilen über das bekannte Facebook-Interface ermöglichen. Damit lebt das Blog im Endeffekt zweimal – einmal auf Facebook als Applikation (zum Beispiel: mein privates Blog) http://apps.facebook.com/freigeistblog/ und einmal unter der ursprünglichen URL http://freigeist.devmag.net/.

Möchte man über Facebook auf das Blog zugreifen, muss man zunächst der Applikation den Zugriff erlauben. Dazu muss man lediglich die URL der so genannten Leinwandseite aufrufen (Beispiel). Damit hat der Betreiber des Blogs von dem Zeitpunkt an Zugriff auf Daten von Nutzern der Applikation (auf was die meisten Applikationen auch ganz heiß sind – denn mit Informationen wie Geburtsdatum, Geschlecht und Wohnort lässt sich die Werbung doch sehr zielgesteuert einblenden).

Bei unserer Applikation handelt es sich lediglich um ein Blog, das heißt, es ist sehr unschuldig. Bisher werden in der Facebook-API Blogs oder Webseiten als Applikationen behandelt, vielleicht wird sich das aber in Zukunft ändern. Facebook-Nutzer, welche das Blog als Applikation hinzugefügt haben, können nun direkt über Facebook Kommentare senden. Diese werden im Blog angezeigt, obgleich man über Facebook oder das Blog direkt besucht. Über die „Share This“ Funktion kann man anderen Facebook-Freunden Posts weiterleiten.

Diese Funktionalität ist an und für sich noch recht beschränkt und Communities kann man um das Blog so nur schwer bilden. Doch das Potenzial scheint sehr groß, denn man kann die Aktivität in einem Blog so direkt in den eigenen Facebook-Newsfeed einbinden – also der Feed, der beim einloggen, die letzten Aktivitäten von Freunden anzeigt. So können zum Beispiel Kommentaraktivität in diese Feeds eingebunden werden, welches dann auch den Freunden im Feed sichtbar wird. So kann, quasi schneeballmäßig „Word-to-mouth“-Marketing betrieben werden, mit denen Sie als Blog-Betreiber neue Leser aus dem Freundeskreis anwerben können.

Um das eigene WordPress-Blog mit dem Plugin-WordBook mit Facebook zu verknüpfen, sind nur wenige Schritte nötig. Zunächst müssen Sie auf hier eine neue Applikation erzeugen. Dazu benötigen Sie einen Facebook-Account und müssen sich unter der Adresse als Entwickler registrieren. Das alles ist ein Aufwand von wenigen Minuten.

Eine Facebook Applikation erzeugen

Eine Facebook Applikation erzeugen

Nachdem Sie den Nutzungsbedingungen zugestimmt haben und der Applikation einen Namen gegeben haben, sehen Sie direkt ihren API-Schlüssel.

Einstellungen für eine Facebook Applikation

Einstellungen für eine Facebook Applikation

Der nächste Schritt ist es, eine Post-Authorize Callback-URL zu definieren. Dabei handelt es sich um eine Adresse auf ihrem Server, zu der Facebook eine Notiz sendet, sobald ein Nutzer ihre Applikation authentifiziert. Genauso gibt es eine Post-Remove Callback-URL, an welche eine Notiz gesendet wird, sollte der Nutzer die Applikation wieder entfernt haben. Diese Events werden von dem Plugin allsamt behandelt, das heißt, Sie brauchen hier lediglich die Root-Adresse ihres Blogs samt Slash am Ende anzugeben.

Callback URLs definieren

Facebook Applikation: Callback URLs definieren

Als dritten Schritt müssen Sie nun die „Leinwandseite“ anlegen, also die Seite, über welche Facebook Nutzer auf das Blog Zugriff haben, sowie eine Leinwand Callback URL – das ist die eigentliche Seite, von welcher Facebook die Inhalte aus Ihrem Blog in die Leinwandseite integriert. Wiederum ist es wichtig, dass am Ende ein Slash ist, denn sonst funktionieren die internen Links im Blog nicht mehr.

Leinwandseite (Canvas) definieren

Facebook Applikation: Leinwandseite (Canvas) definieren

Dazu haben Sie noch ein paar weitere Optionen – nämlich wie Ihre „Leinwandseite“ integriert werden soll. Sie haben die Wahl zwischen Iframe und FBML. Bei FBML handelt es sich um ein eigenes Facebook XML-Schema, mit welchem Sie gewisse Tags verwenden können – etwa zum Anzeigen des Profilbildes eines Nutzers. Mit FBML können Sie auf sehr viele Facebook-Funktionalitäten zugreifen. Das WordBook-Plugin funktioniert jedoch über Iframes, da dabei die Nutzung von Javascript und gewissen Tags möglich ist, welche in dem FBML Schema nicht erlaubt sind. Das heißt, iFrames geben dem Anwendungsentwickler etwas mehr Flexibilität, jedoch kann über iFrames auf weniger Facebook-Funktionalitäten zurückgegriffen werden. Das hat auch den Vorteil, dass der Code, welcher Facebook von der Canvas Callback-URL holt, nicht noch einmal durch den Facebook-Parser geschickt werden muss, um die FBML-Tags darzustellen – ein kleiner Performance-Gewinn. Mit der Iframe Methode müssen lediglich von Facebook die Links angepasst werden, sodass sie über das Facebook Layout durch das Blog browsen können. Die Option „Resizeable“ erlaubt es dem Facebook Javascript, die Größe an das Layout von Facebook anzupassen.

Damit ist die Arbeit eigentlich schon fast getan. Jetzt muss lediglich das Plugin mit der WordPress-Standardmethode installiert werden, hochladen und aktivieren. Dann können Sie das Plugin über das Einstellungs-Panel konfigurieren. Dazu brauchen Sie zunächst ihre API-Kennung, ihren Entwickler-Schlüssel sowie die URL zu der Leinwandseite.

Einstellungen für das WordBook Plugin anpassen

Einstellungen für das WordBook Plugin anpassen

Und das war eigentlich schon alles.

Jetzt können Sie zudem noch einige Optionen aktivieren, beziehungsweise deaktivieren – etwa die Kommentarfunktion von Facebook aus oder ob Nutzer ihre Applikation zu ihrer Profilseite hinzufügen können. Insbesondere diese Funktionalität ist interessant, da dadurch die letzten vier bis fünf Posts in ihrem Blog auf der Profilseite ihrer Facebook-Leser erscheint. Da die Profilseite für die Freunde von Freunden in der Regel zugänglich ist, können Sie somit indirekt und einfach die Facebook-Profilseite nutzen, um Leserschaft für ihr Blog zu gewinnen.

Browsen durch das Blog über Facebook
Browsen durch das Blog über Facebook

Das WordBook Plugin behandelt also die Anfragen – im Endeffekt ließt Facebook so nur die Feeds ihres Blogs aus. Da ist ja noch nicht viel mit zu machen, könnte man sich fragen. Warum sollte man Facebook als Feedreader verwenden? (Und dafür auch noch Informationen an Dritte weitergeben, die man für eine Mitgliedschaft in der Leserschaft eines Blogs sonst nicht braucht). Die Frage ist berechtigt – doch die API kann noch mehr. ™

Applikation authentifizeren

Applikation authentifizieren

Morgen folgt ein zweiter Teil: Facebook in ein WordPress Blog integrieren.

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.

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

29 Kommentare

chronologisch
nach der Bewertung zuerst neue chronologisch
1

Gutes Tutorial Thiemo,

sowas wollten wir in nächster Zeit auch verfassen, aber das hat sich jetzt ja erledigt. ;)



Wir haben neulich mal darüber geschrieben wie man wirklich super einfach den Status einer Facebook Page mit seinem Blog o.ä. synchronisieren kann:

http://facebookmarketing.de/tutorials/facebook-page-status-automatisch-aktualisieren

Das ganze funktioniert auch mit normalen Profilen, da es als Statusupdate raus geht wird es auch oft geklickt. Aber natürlich nicht so cool wie die eigene Applikation!

Gruß

Philipp

2

sehr guter artikel und gleich umgesetzt^^ eine frage hab ich aber:

Directory Status: Not Submitted
Verification Status: Not Submitted

muss ich beides ausführen oder?

Edit: sorry hat sich erledigt, geht ja erst nach einer gewissen anzahl an fans der anwendung.

Autor3

@markus:

Freut mich das es geklappt hat.



Zu deinen Fragen.

Man kann eine Applikation nachdem man sie erstellt hat, von facebook verifizieren lassen. Damit kann man die eigene Applikation abheben und quasi ein Gütesiegel anbringen.



Da gibt es aber ein paar Bedingungen, die kannst du einsehen unter: http://wiki.developers.facebook.com/index.php/Verification_Checklist



Es handelt sich dabei um einige einfache generelle Dinge, wie etwa das man eine Art Nutzungsbedingungen, sowie Kontaktadresse usw anbringt. Aber es geht auch um die Kontrolle der Anzahl von Notices die man an die Applikationsnutzer sendet.



Zu der Frage "Directory Status". Im Endeffekt etwas ähnliches. Man kann bei Facebook als Nutzer Applikationen direkt suchen und sich dabei durch eine Art Verzeichnis durchklicken - das findest du unter http://www.facebook.com/apps/. Auch das dauert eine Weile und es gibt ein paar Kritrien, die man erfüllen muss um in das Verzeichnis aufgenommen werden zu können.



Hoffe das hat geholfen.

4

Schöne Anleitung, danke! Aber wie bekomm ich die Application in eine Seite (Fanpage) statt ein Profil!?

5

Hi,

leider funktioniert das Plugin bei mir noch nicht so wie es sollte und ich kann den Fehler leider nicht finden.

Ich habe die Installationsschritte befolgt, aber leider werden auf der Seite meiner Applikation http://apps.facebook.com/innovationsraumblog/ keine Inhalte des Blogs angezeigt.

Hat jemand eine Idee, woran das liegen könnte? Würde mich sehr über Hilfe freuen.

Danke.

6

Hallo!



Ich würde mich gerne der Frage von Gabriel anschließen, denn eine Integration in eine FB-Seite ist mir bis dato noch nicht geglückt.



Sonst ist die Anleitung wirklich sehr gut gemacht! Gratulation!



Oliver

7

Die Integration eines Blogs in eine Fan Seite geht ganz einfach. Über "Werbeanzeigen und Seiten" eine neue Page angegen und dann den Blog unter "Seite bearbeiten" > "Notizen bearbeiten" den Blog importieren.

8

Gute Sache. Ne Fanpage bei facebook hab ich mir schon länger gemacht, aber auf die Idee, auch die Einträge nach facebook zu portieren, bin ich bisher nicht gekommen.

9

Prima Tutorial. Wordpress facebook App. Cool.

10

Danke!

Genau das was ich gerade gebraucht habe!

Zwar schade das das nicht unmittelbarer direkt als Statusmeldungen auf eine Fan Seite geht, aber nja ^^

11

Sehr informatives Tutorial.

Werde ich auf Jedenfall ausprobieren. Ich denke aber, dass es schon auch drauf ankommt was im Blog so angeboten wird. Schliesslich ist man (ich zumindest) auf Facebook als Privatperson angemeldet. Da kann ich mir vorstellen, dass sich meine Freunde nicht auschliesslich für mein "geschäftliches Blog-Angeobt" interessieren. Ich hätte das ja auch so. Deshalb drängt sich hier in vielen Fällen wohl eher eine Fanpage auf. Aber wie gesagt, eine gute Idee.

12

Hallo Thiemo,



super Tutorial danke.



Eine Frage habe ich noch:

Kann ich den Blog auch in einem eigenen Reiter in einer Fansite erscheinen lassen, wie es in Profilen dargestellt wird?



Danke

Michael

13

Cool, vielen Dank für die Anleitung. Ist imho deutlich schicker und sinnvoller als Fanpages mit Social RSS oder ähnlichen Lösungen.

14

Hi



ich habe dein Tutorial vefolgt !



Nur mache ich entweder etwsa falsch oder irgendwas funzt da nicht !



Ich habe die Anwendung nach deiner Anleitung erstellt und dieses dann zu meinem Facebook-Profil hinzugefügt.

Aber wenn ich jetzt auf die Anwendung klicke in Facebook zeigt er mir keinen Inhalt an .



Was könnte das Problem sein ?

15

danke für die Anleitung, hat absolut problemlos funktioniert :)

Bin mal gespannt wieviele Besucher man über Facebook für den eigenen Blog gewinnen kann.

16

Also so ganz funzt es bei mir leider auch nicht...



Problem 1: Blogkommentare werden in Fb angezeigt, aber umgekehrt, wenn ich in Fb nen Kommentar schreibe, meldet er immer, ich hätte das Kommentarfeld nicht ausgefüllt.



Problem 2: Ich krieg die App net in ne Fansite eingebaut...



Letzteres wäre eine sinnvolle Erweiterung dieser Serie, denn ich möchte ja auch, dass die Leute mich abonnieren können und deren Freunde das dann auch sehen.

17

Moin,



soweit hat alles super geklappt. Aber ich möchte die Anwendung gerne in eine Fan Page einbinden, wie viele andere auch :)



Bekommt man das hin, ohne das die App im Directory ist?



VG

Jan

18

Wer nicht selber den Code schreiben will: Den neuen FB Like-Button einfach als WP-Plugin installieren http://www.kouguu.net

19

Super Tutorial! Vielen Dank! Wir werden es gleich versuchen umzusetzen!

20

Hallo,



hab mich an die Anleitung gehalten und alles so ausgeführt wie oben beschrieben, jedoch bekomme ich folgenden Fehler bei der Authent. (Once your Facebook application is established, click here to grant WPBook the permission to publish to your stream. Then return and enter your FB profile id below.):



API Error Code: 100

API Error Description: Invalid parameter

Error Message: next is not owned by the application.



Weiß jemand Rat, bin leider nicht so gut in Englisch, deswegen konnte mir das Forum der Developer nicht weiter helfen.



Dabke im Voraus

LG Ivonne

21

Hallo Ivonne,



der Fehler "API Error: 100" erscheint, wenn du in deinen Anwendungseinstellungen die Connect URL nicht gesetzt hast. Die Connect URL ist die Adresse der Seite, von der du auf Facebook zugreifst (also dein Blog o.ä.).



Hoffe, das hilft.



Grüße

Marcel

22

SEHR, sehr, sehr gut!!!



Hab' alles Schritt für Schritt durchgeführt, hat alles wunderbar geklappt, vielen vielen Dank.

Hab' sogar übersetzt und bei mir veröffentlicht.



Gruß

RG

23

Hallo,



bei mir klappt es leider auch nicht.

Denke das ich alles richtig eingestellt habe,

aber es erscheint nichts auf FACEBOOK..



hoerspiele.hn.vc - die Webseite

http://www.facebook.com/www.mario.de.tv



Brauche DRINGEND HILFE !!!!

************************************



Bitte per mail oder so direkt an mich !



D A N K E !

**************



Gruß, Mario aus Dortmund

24

Hallo,



bekomme das nicht hin den WP in Facebook zu bekommen.

25

hi :)



.. seit samstag hab ich ein wenig rumprobiert, ein ergebniss habe ich..



mein testblog unter http://wp.kifuzzy.net erscheint nun als anwendung in facebook. die anwendung hat die adresse in facebook http://www.facebook.com/apps/application.php?id=113843155332221



die anwendung selbst startend, inklusive "erlaubnis erteilen" zeigt dann den blog von kifuzzy gespiegelt. das geschieht von facebook relativ automatisch, dass die auf der blogseite erstellten dort refresht werden. ich kann in facebook kommentieren und die kommentare erscheinen dann im block unter wp.kifuzzy.net - derzeit so eingestellt, dass ich die kommentare freigeben muss, aber auch die automatische freigabe der facebook-kommentare dort will noch nicht so ganz klappen.



http://apps.facebook.com/blognetworks/ bietet einen service an, ein blog dort einzustellen, so dass ich das blog in einem user-profil in einem reiter anzeigen kann.



das ist interessant weil (wichtig):

die applikation laesst sich als einstellung (bei mir + doku da) nur als "iframe" und nicht als "FBML" machen, so dass es mit "WPBOOK" als anwendung einfuegbar ist - mit fbml und wpbook geht wohl nicht, daher kam ich auf den link, eher zufaellig, um es mal zu probieren.

da gibts das, dass der betreiber des blogs (me) in seiner facebook-seite-networkedblog jeweils refreshen muss, dass artikel erscheinen neue. kommentare gehen aber nichnt automatisch ins blog selbst, wie wenn ich es eben ueber die anwendung mache.



noch interessanter:

im profil meiner anwendung kann ich sogenannte fbml-reiter erstellen, in denen ich html machen kann. auf meinem test-profil der anwendung habe ich mal eine angepasste homepage von mir dort reingemacht, das wiederum finde ich sehr nett:

eigene homepages sozusagen als reiter im eigenen anwendungs-profil. wie ich das auch in einem user-profil hinbiege weiss ich noch nicht....



sorry, wenn zuviel text :)

26

Ich bekomm es nicht gebacken in Facebook die Anwendung richtig zum Laufen zu bekommen ... Ich kann zwar in meiner Anwendung was schreiben und das wird auch auf meiner Pinnwand angezeigt, aber die Beiträge aus dem WP-Blog kommen nicht an ... any idea?

27

Hallo,



gibt es die Möglichkeit die Blog-Beiträge aus WP direkt an die Fanpage (also die Unternehmens-Seite) und nicht auf meine private Pinnwand zu setzen?

Sonst macht es für einen rein geschäftlichen Blog keinen Sinn das Plugin "wordbook" einzusetzen.



Jemand eine Idee?

Gruß

Simon

28

Danke Dr. Web für mich ein besonders interessanter Artikel ich habe viel gelernt,

29

Danke Dr.Web für die tolle Anleitung! Sie hat mir weitergeholfen :-)