Unterwegs mit Freunden

Inhaltsverzeichnis

Das Warten hat sich gelohnt: Facebook hat Anfang Oktober [a] den ersten Schritt in Richtung des geheimnisvollen „Project Spartan“ [b] freigegeben – allerdings ohne es so zu nennen. Trotzdem höchste Zeit für Facebook-Entwickler, sich die Dokumentation [c] anzuschauen und nachzuprüfen, was bereits möglich ist.

Mit Spartan soll eine App nicht nur über das Web, sondern auch auf Smartphones und Tablets unter iOS und Android zur Verfügung stehen. Auf den mobilen Geräten kann sie nativ oder – bevorzugt – mit HTML5 programmiert werden.

Bei diesen Mobile Apps kann es sich entweder um normale Facebook Apps handeln, auf eigenen Servern betriebene HTML5-Webanwendungen, die auf die Facebook-API zugreifen. Zudem kann man native Anwendungen mit den jeweiligen SDKs entwickeln, oder man packt eine HTML5-Anwendung in das mobile Framework PhoneGap [d], das es in eine Anwendung für die App Stores von Apple oder Google verwandelt.

Wie auch immer, nach der Registrierung bei Facebook profitiert die eigene App von den ersten Vorteilen des weltgrößten sozialen Netzwerks: Die Authentifizierung kann man – optional – Facebook überlassen. Damit stehen der App die Daten des Benutzers für eine individuelle Ansprache zur Verfügung, und es wird ein Link zur eigenen App in der Facebook Mobile App bereitgestellt. Dieser Link funktioniert für HTML5- und native Anwendungen gleich, die Facebook-App startet also auch native Apps nach einem Klick auf einen Bookmark. Zudem ist die App über die Facebook-Suche auffindbar.

Facebook Mobile Apps nutzen neue API-Methoden zur sozialen Interaktion, die über Like-Buttons erheblich hinausgehen: Ein Klick auf einen Post startet nun direkt die mobile App, Anfragen können Freunden konkrete Aufforderungen zusenden, Einträge in die neue Zeitleiste sind demnächst per Open Graph möglich. Nicht zuletzt kann man sich In-App-Verkäufe über Facebook Credits bezahlen lassen.

Keine hohen Einstiegshürden

Ein kleines Beispiel soll demonstrieren, wie man die neue API nutzt. Nach der Registrierung als Entwickler auf http://developer.facebook.com/apps stellt man die neue App ein. Das heißt im Wesentlichen, ihren Namen und eine URL anzugeben. Im einfachsten Fall also unter „Wähle aus, wie sich Deine Anwendung in Facebook integriert“, das Feld „Website“ ausfüllen. Voraussetzung für die Registrierung ist ein per Handy oder Kreditkarte validierter Facebook-Account.

Zur Demonstration soll eine kleine App zum Kopfrechnen dienen (der komplette Quelltext ist über den iX-Listing-Service verfügbar, siehe iX-Link).

Der Service hinter der URL sollte eine mobile HTML-Seite ausliefern. Zu Testzwecken kann dort ein beliebiger, auch lokaler, Server eingetragen werden, da die Integration stets auf dem Endgerät passiert, die Facebook-Server aber nie direkten Kontakt aufnehmen. Selbst http://localhost ist sinnvoll, wenn man zum Beispiel auf einem Mac den UserAgent des Safari auf iPhone einstellt und ganz gemütlich auf dem Desktop testet. Die folgenden Header-Einträge sorgen für eine vernünftige Darstellung auf tragbaren Geräten:

<meta name="viewport" 
   content="initial-scale=1,minimum-scale=1, 
   maximum-scale=1,user-scalable=no"/> 
 <meta name="apple-mobile-web-app-capable" 
  content="yes" /> 

Das JavaScript-SDK wird durch das folgende Fragment geladen:

<div id="fb-root"></div> 
  <script> 
     (function() { 
       var e = document.createElement('script'); 
       e.async = true; 
       e.src = document.location.protocol + 
               '//connect.facebook.net/en_US/all.js'; 
       document.getElementById('fb-root'). 
  appendChild(e); 
     }()); 
     window.fbAsyncInit = function() { 
     FB.init({appId: 'XXXXXXXX', 
          status: true, cookie: true, 
          xfbml: true, oauth: true}); 
     FB.Event.subscribe('auth.statusChange', 
       handleStatusChange); }
 </script> 

Für die appId ist die bei der Registrierung erzeugte Kennung der Anwendung einzusetzen. Nun ist das SDK einsatzbereit und ruft bei einer Nutzer-Anmeldung die Methode handleStatusChange auf. Damit lassen sich beispielsweise Anmelde-Buttons darstellen oder verstecken. Falls man authenticated referral nicht gewählt hat, muss der Benutzer sich erst einmal anmelden. Dabei werden die Daten angegeben, die die App aus dem Benutzerprofil lesen möchte:

FB.login(function(response) { }, 
  {scope:'email'}); 

Benutzerdaten zur individuellen Ansprache

Ab jetzt stehen die aus den Facebook-Apps bekannten Möglichkeiten bereit, zum Beispiel der Abruf des kompletten Nutzer-Profils:

  FB.api('/me', function(response) { 
      alert("Benutzer-ID: "+response.id+", 
            Name: "+response.name); 
    }); 

Mit dieser API-Methode wird eine Anfrage an die angegebene Facebook-REST-URL gesendet. Dies geschieht asynchron, die App bleibt also für den Nutzer responsive. Der Entwickler hat dafür eine Callback-Methode anzugeben, die das Ergebnis JSON-codiert übergeben bekommt.

Ein neues Feature für Mobile Apps sind Anfragen. Damit kann ein Nutzer ausgewählten Freunden eine konkrete Aufforderung senden. Der Empfänger erhält eine Benachrichtigung in der Facebook Mobile App. Klickt er darauf, wird die eigene App gestartet und kann auf die Aufforderung geeignet reagieren.

Eine Anfrage sendet die App so:

FB.ui({method: 'apprequests', 
     message: 'fragt: Was ist '+a+'+'+b+'?'}, 
     function(response) {}); 

Dieser Code präsentiert dem Benutzer einen Dialog, der den Text als Preview anzeigt. Er kann hier auswählen, welchen seiner Freunde er den Request senden möchte. Alternativ könnte man das mit dem Parameter to fest vorgeben (Abbildung 1).

Daraufhin erhalten die ausgewählten Benutzer eine Benachrichtigung in Facebook. Wenn sie Letztere anwählen, bringt Facebook sie direkt zur Mobile App (Abbildung 2 bis 4).

Die App muss jetzt beim Start darauf reagieren, dass eine Anfrage vorliegt. Die IDs der Requests werden im Parameter request_ids übermittelt, Details liefert ein API-Aufruf:

match = RegExp('[?]request_ids=([^]*)'). 
         exec(window.location.search); 
 if (match) { 
   requestId = match[1].split("%2C")[0]; 
   FB.api('', {"ids": requestId }, function(response) { 
     alert("Anfrage von "+response[requestId]. 
  from.name); 
     FB.api(requestId, 'delete', function(response) {}); 
   }); 
 } 

Außer ein paar Klimmzügen, um unter JavaScript den Parameter auszulesen, sieht man hier noch, dass die Request-ID abschließend gelöscht wird, da sie sonst immer wieder übermittelt würde.

Neu ist auch das Verhalten von Pinnwand-Posts. Natürlich gibt es die schon lange, nun spielen sie aber auch auf mobilen Geräten eine aktive Rolle: Klickt man in der Facebook Mobile App auf den Pinnwand-Eintrag einer Anwendung, startet diese automatisch. Das ist ein probates Mittel, mehr Nutzer für die eigene App zu bekommen:

FB.ui({ 
     method: 'feed', 
     name: 'Ich habe im Kopf gerechnet!', 
     caption: 'Kopfrechnen!', 
     description: 'Finde heraus, 
      welcher Deiner Freunde am besten Kopfrechnen 
  kann!', 
     link: 'http://kopfrechnung.appspot.com' 
   }, 
   function(response) {}); 

Credits auch in mobilen Anwendungen

Schließlich können nun auch mobile Anwendungen das Facebook-eigene Bezahlsystem Credits (deutsch: Guthaben) verwenden. Darin hat jeder Nutzer ein Konto mit Facebook Credits. Einen In-App-Kauf kann er direkt oder nach Auffüllen von seinem Konto bezahlen. Die Facebook-Plattform kümmert sich um die Anbindung zum Zahlungsanbieter. Für native Apps wird Credits allerdings noch nicht angeboten. Die Anbindung selbst ist nicht schwer, umfasst aber eine direkte Kommunikation zwischen App-Backend und Facebook, in der ein Einkauf bestätigt wird. Eine genaue Erklärung der Abläufe findet sich in der Onlinedokumentation [e].

Fazit

Eine einfache Facebook Mobile App kann aus einer einzigen HTML5-Seite mit etwas JavaScript bestehen, komplexere Anwendungen werden ein Backend mitbringen. In jedem Fall ist die Anbindung technisch einfach.

Das Ziel, möglichst viele Nutzer auf die eigene Mobile App zu ziehen, wird durch zahlreiche Kanäle unterstützt, auf denen Nutzer und ihre Freunde die Anwendung erreichen können. Damit sind technisch verschiedene Geräte und fachlich wie immer die Ausschlachtung des sozialen Graphen gemeint.

Jörg Viola

ist Gesellschafter und Geschäftsführer der ObjectCode GmbH. Er beschäftigt sich mit Internet-, Software- und Business-Development. Mit Begeisterung formt er aus modernen Technologien sinnvolle Anwendungen.

Literatur

[1] Ramon Wartala; Das eigene Gesicht; Facebook-Applikationen entwickeln, iX 4/2008, S. 78

Alle Links: www.ix.de/ix1201139 (js)