Kategorien
Inspiration Tutorials

Facebook Anwendungen mit PHP – Am Anfang steht FBML

Um Facebook-Plugins für WordPress ging es hier in punkto Anwendungsentwicklung schon öfter. Diese Serie soll einen tiefer gehenden Einblick in die Entwicklung von Facebook-Anwendungen geben – und das mit einem konkreten Beispiel. Ziel dieses Workshops ist der Einblick in die wichtigen Elemente der Facebook-Anwendungsentwicklung und die Grundlagen von FBML. Damit das Ganze nicht so trocken ist, erstellen wir ein Quiz und die Möglichkeit, dieses Spiel weiter zu empfehlen.

In den Beiträgen über die WordPress Facebook Plugins haben wir uns schon ein wenig mit Anwendungsentwicklung für Facebook beschäftigt. Diese Serie soll einen tiefergehenden Einblick in die Entwicklung von Facebook Anwendungen geben – und das mit einem konkreten Beispiel.

Ziel dieses Workshops soll es sein in die wichtigen Elemente der Facebook Anwendungsentwicklung einen Einblick zu gewähren und dabei auf ein konkretes Beispiel zuarbeiten. Zunächst soll die Facebook Markup Language etwas eingeführt werden. Diese wird zur Strukturierung und Darstellung verwendet. Daraufhin soll die API genauer untersucht werden – nämlich, wie und an was für Daten Sie über Facebook kommen. Zudem soll dabei die Facebook Query Language eingeführt werden. Im dritten Teil soll alles zusammenfließen. Unsere Musteranwendung soll ein einfaches Quiz sein, mit einer Reihe von Features. So soll der Nutzer die Anwendung weiterempfehlen können.
Die Inhalte

Um zu starten benötigen Sie einen Zugang als Entwickler von Anwendungen, den es als Facebook Nutzer gratis gibt. Wie in dem Artikel über die Integration eines Blogs in Facebook, müssen Sie eine neue Anwendung erstellen. Sie erhalten wiederum einen Schlüssel und eine Anwendungs ID. Als nächster wichtiger Setupschritt kommt die Definition der Canvas- also der sogenannten „Leinwandseite“. Hier wird es etwas kniffliger. Sie können selbst den URL zu der Leinwandseite bestimmen, diese hat die Form: http://apps.facebook.com/anwendungsname. Die Canvas Callback URL ist die Adresse auf ihrem Webserver, auf dem die Anwendung eigentlich liegt – zum Beispiel http://www.ihreseite.de/anwendungsname. Facebook leitet alle Anfragen der Form http://apps.facebook.com/anwendungsname/anfrage an http://www.ihreseite.de/anwendungsname/anfrage weiter.

Als Nächstes müssen Sie entscheiden, ob sie FBML (Facebook Markup Language) oder ein Iframe wählen. Der Unterschied wurde ebenfalls in dem Artikel über Facebook und WordPress schon einmal angesprochen. Bei FBML handelt es sich um Facebook XML Schema, mit dem Sie auf verschiedene vordefinierte Prozeduren von Facebook zurückgreifen können. Dadurch können Sie zum Beispiel durch einen FBML-Tag das Bild eines Nutzers ihrer Applikation einfügen lassen – genauso gibt es Tags zum Darstellen einer Kommentarbox und viele mehr. Eine ausführliche Diskussion der Vor- und Nachteile der zwei Methoden, finden Sie auf der Dokumentationsseite von Facebook.

Vor- und Nachteile von FBML

Vorteile:

  • einfacher Zugang, schnell zu erlernen – Umfangreiche Referenz
  • Zugriff auf viele vordefinierte Facebook Funktionen und Elemente
  • gibt der Applikation schöne URLs

Nachteile

  • sie können Javascript nicht verwenden, sondern müssen auf Facebook Javascript zurückgreifen, d.h. vorhandenen Javascript Code müssen Sie anpassen
  • kann langsamer sein, da stets die komplette Facebook Seite geladen werden muss (und nicht nur der Inhalt des IFrame)

Vor- und Nachteile von IFrame

Vorteile:

  • Verwendung von AJAX, CSS, Javascript wie gewohnt
  • einfacher, da vorhandene Scripts nicht oder nur kaum angepasst werden müssen
  • auf lange Sicht, einfacher für Anwendungsentwickler, da sie sich nicht an das restriktive FBML-Schema halten müssen
  • bessere Performance

Nachteile:

  • kein Zugriff auf FBML-Tags, sondern nur auf XFBML, was nur eine Teilmenge von FBML darstellt
  • Anfangs etwas komplizierter und langwieriger zu erlernen

Um nun mit ihrer Applikation loszulegen, benötigen Sie noch eine PHP-Bibliothek, die von Facebook gestellt wird. Mit dieser Bibliothek ist der Zugang zur Facebook API sehr leicht und die Bibliothek bietet sehr viele vordefinierte Funktionen und Routinen, mit denen sie schnell in der Anwendungsentwicklung durchstarten können.

Die Dokumentation zur PHP Client Library ist sehr dürftig, jedoch finden Sie in der Datei „facebookapi_php5_restlib.php“ im Unterordner „PHP“ einen Satz von Funktionen, mit dem Sie arbeiten können – aus den Kommentaren kann man auf deren Funktion schließen. Da die Client Library von SimpleXML gebrauch macht, funktioniert die Standardbibliothek nur mit PHP5. Sie können jedoch eine inoffizielle PHP-4-kompatible Version herunterladen.

Nun wollen wir aber loslegen. Ziel soll es zunächst sein, eine einfache „Hello World“-Anwendung zu entwickeln und dabei in die grundlegenden FBML-Tags einzuführen.

<?php
// die Facebook PHP Client-Library einfügen
include_once 'php/facebook.php';
// Ihr API Schlüssel
$api_key = '###########';
$secret  = '###########';
// eine Objektinstanz erzeugen
$facebook = new Facebook($api_key, $secret);
//wird verwendet, sodass die Seite den Facebook Look hat - also mit Tabnavigation
$facebook->require_frame();
//Fordert den Nutzer auf, der Applikation den Zugriff zu gewähren
$user = $facebook->require_login();
?>
<p>Hallo <fb:name uid='<?php echo $user?>' capitalize="true" firstnameonly="true" useyou="false" linked="true"/>, dies ist eine minimalistische Facebook Anwendung, die mit der PHP Clientlibrary realisiert wurde - mal schauen, wie weit wir hiermit noch kommen. In der Zwischenzeit kannst du hier doch ein Kommentar hinterlassen...</p>
<fb:comments xid="commentsBox" canpost="true" candelete="false" returnurl="http://apps.facebook.com/cook-off">
<fb:title>Kommentare</fb:title>
</fb:comments>

Zwischenschritte
Bevor Sie das Ergebnis zu Gesicht bekommen, müssen Sie zunächst die Applikation zu Ihren Anwendungen hinzufügen und der Anwendung Zugriff gewähren. Dann könnte das, was Sie zu Gesicht bekommen, wie folgt aussehen.

So sieht die erste Ausgabe mit ein paar FBML-Tags aus

Sie haben hier die Bekanntschaft mit ein paar FBML-Tags, sowie einigen Funktionen aus der Client Library gemacht. Aufgrund der Funktion require_frame() wird das bekannte Facebook Design geladen, samt der Tabbed Navigationsleiste und des Facebook Stylesheets. Der Aufruf $facebook->require_login() führt dazu, dass ein Nutzer zunächst den Zugriff der Anwendung zulassen muss. Das Objekt, in dem Fall die Variable $user, steckt die User Identification Number (UIN), über welche Sie dann Zugriff auf das Profil und die Information darin haben.

Dies wird über die FBML-Tags verwendet, indem das Bild des Nutzers über <fb:profile-pic uid='<?php echo $user?>‘ linked=“true“/> eingeblendet wird. Eine Kommentarbox wird durch den FBML-Tag <fb:comments> eingefügt.

Die Facebook Markup Language beinhält neben Tags zum darstellen von Facebook Elementen, wie eben der Kommentarbox, auch Elemente, mit der man quasi-prozedurale Strukturen definieren kann. Im folgenden sollen noch einige FBML-Tags vorgestellt werden. Auf den Entwicklerseiten gibt es eine kleine Referenz und mittlerweile gibt es auch schon ein Buch zur Facebook Anwendungsentwicklung mit FBML im O’Reilly Verlag.

Bedingungen und prozedurale FBML-Tags

Mit einfachen Bedingungen können Sie insbesondere steuern, was die Besucher ihrer Applikation zu Gesicht bekommen und was nicht, abhängig zum Beispiel von dem Login Status oder den Einstellungen zur Privatsphäre.

<fb:if-can-see uid="12345" what="profile">
Sie dürfen das Profil von dem Nutzer mit der Kennung 12345 betrachten.
<fb:else>
Sie nicht.
</fb:else>
</fb:if-can-see>

Ein weiterer FBML-Tag dazu ist zum Beispiel:

<fb:if-is-app-user> Sie haben die Anwendung installiert!
<fb:else> Sie noch nicht. </fb:else>
</fb:if-is-app-user>

Formulare

Das werden wir später noch ausgiebig gebrauchen. Formulare können direkt über FBML erzeugt werden, jedoch gibt es dort auch Grenzen des Möglichen. Unser Ziel soll sein, eine einfache Quizanwendung auf Facebook zu erzeugen. Von diesen gab es eine ganze Schwemme vor einigen Monaten – mittlerweile gibt es bereits Anwendungen, mit denen Sie ihr eigenes Quiz erzeugen können. Wir wollen uns aber die Hände selber schmutzig machen.

Folgender Code wird verwendet um eine Box einzufügen, mit der Sie Freunde und Bekannte einladen können, ihre Anwendung hinzuzufügen.

<fb:request-form action="index.php"  method="POST" invite="true" type="Quiz" content="Wollten Sie schon immer mal ihr Webwissen testen? <?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/ihre-application\" label=\"Einladung senden.\"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="Laden Sie Ihre Freunde ein und Messen Sie ihr Wissen!">
</fb:request-form>
FBML Formular mit dem Sie Freunde einladen können, ihre Anwendung hinzuzufügen

Im folgenden bietet sich zum Beispiel so ein Formular irgendwo dazwischen zu schalten. D.h. wenn wir eine Quizanwendung entwickeln, könnten wir versuchen so ein Formular einzubinden, bevor der Nutzer sein Ergebnis aus dem Quiz zu Gesicht bekommt. Das wird bei sehr vielen Anwendungen so gehandhabt. Später wollen wir das obige etwas anpassen, sodass nur Freunde auswählbar sind, welche die Anwendung noch nicht hinzugefügt haben.

Anwendungsnutzer anzeigen

Mit diesem FBML-Tag können Sie das Profilbild der Nutzer anzeigen, welche ihre Anwendung bereits hinzugefügt haben. Später soll daraus soetwas wie eine Bestenliste werden. Mehr dazu aber später.

<fb:user-table>
<fb:user-item uid="683545112"/>
<fb:user-item uid="4"/>
<fb:user-item uid="7403766"/>
</fb:user-table>

Einzelne Profilbilder

Mit Hilfe der UID können Sie Profilbilder von einzelnen Nutzern anzeigen – das Profilbild von Mark Zuckerberg kann mit folgendem FBML-Tag eingefügt werden:

<fb:profile-pic uid="4" size="square"/>

Weiter oben wurden die Vor- und Nachteile von FBML beziehungsweise IFrames für die Canvas-Seite vorgestellt. Falls sie FBML gewählt haben und dennoch einmal ausgiebig Javascript nutzen möchten, können Sie ein IFrame einfügen. So können Sie in gewisser Hinsicht von Iframes indirekt dennoch Gebrauch machen – jedoch müssen Sie im Iframe komplett auf FBML verzichten. An das IFrame wird standardmäßig Information wie die Signatur des Nutzers sowie ein Sessionkey über das src-Attribut als Query-String an den URL hinzugefügt, sodass Sie den Nutzer auch über den IFrame noch identifizieren können.

Share Button

Vielleicht haben Sie sich schon einmal gefragt, was für Informationen bei dem Share-Button standardmäßig geladen werden. Im Endeffekt können Sie da selbst bestimmen — möchten Sie eine Webseite ihren Freunden mitteilen, so werden in der Regel die Metatag Beschreibung ausgelesen. Mit folgendem FBML Code können Sie selbst bestimmen, was als Text und was für ein Icon geladen werden soll.

<fb:share-button class="meta">
<meta name="medium" content="mult"/>
<meta name="title" content= "Titel">
<meta name="description" content="Beschreibung"/>
<link rel="image_src" href=http://www.test.de/images/icon-big.gif />
<link rel="target_url" href=http://www.test.de/>
</fb:share-button>

Im nächsten Teil wollen wir unsere Anwendung ein wenig strukturieren – zunächst aber soll die Frage beantwortet werden, wie wir Daten über unsere Anwendungsnutzer abfragen und zum Beispiel in einer eigenen Datenbank ablegen können. Daraufhin soll unsere Quiz Anwendung vorgestellt werden.

(mm),

Von Thiemo Fetzer

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.

8 Antworten auf „Facebook Anwendungen mit PHP – Am Anfang steht FBML“

Schreibe einen Kommentar

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