Artikel
Mobile Facebook-Apps Teil 2: Eine mobile Facebook-App bauen!
Eine eigene Facebook-App generieren, fit für iPhone und Android? Kein Problem, wir schauen hinter die Kulissen von Facebook und zeigen, wie eine mobile Facebook-App registriert wird.
In unserem 2. Teil setzten wir uns mit dem Thema auseinander, wie wir eine mobile Facebook-App selber erstellen.
Hier die ersten Erfahrungen:
1. App bei Facebook anlegen
Alles beginnt damit, eine neue Facebook-App zu registrieren. Wie für jede neue Facebook-App klickt man dazu im Developer-Center (https://developers.facebook.com/apps) auf "New App".
Wer das noch nie getan hat, muss sich zunächst als Facebook-Developer eintragen, z.B. indem er Mobilfunk-Nummer oder Kreditkartennummer angibt und verifizieren lässt.
Dann wählt man einen schicken Namen und füllt das Anwendungsprofil aus. Einzige Neuigkeit hier: Die Eingabe der "Mobile Web URL", die im Beispiel auf eine Google App Engine Domain zeigt, weil wir dort unsere Anwendung deployen möchten - hier kann aber jede Adresse auftauchen, unter der die Anwendung selbst später laufen soll.
Nach einigen Minuten steht die Facebook-App zur Verfügung. Sichtbar wird sie aber erst sein, wenn mindestens 10 Personen sie auch nutzen - aber das sollte im Rahmen der ersten Tests ja kein ernstzunehmendes Hindernis sein.
Merken sollte man sich den API-Schlüssel, die App-ID im obigen Bild. Natürlich kann man sie jederzeit nachschlagen - sie wird bei der Initialisierung des Facebook-SDK benötigt.
Zum einfachen Test möchte man der Facebook-App vielleicht zunächst die Adresse des Entwicklerrechners geben, z.B. "http://localhost:8888" - dann steht sie anderen Personen natürlich nicht zur Verfügung. Warum eine localhost-Adresse reicht? - Nun Facebook benötigt die Adresse nicht, um die Anwendung direkt aufzurufen. Vielmehr liefert es ein Redirect darauf aus und prüft hereinkommende API-Aufrufe gegen diese Domain.
2. Das Grundgerüst
Nach der Einrichtung wird nun die Facebook-App selbst aufgesetzt. Zunächst geht es um die Anmeldung. Dazu reicht das folgende Gerüst:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <code class="javascript plain"><html></code> <code class="javascript plain"><head></code> <code class="javascript spaces"> </code><code class="javascript plain"><title>Kopfrechnen</title></code> <code class="javascript spaces"> </code><code class="javascript plain"><style></code> <code class="javascript spaces"> </code><code class="javascript plain">body.connected</code> <code class="javascript preprocessor">#login { display: none; }</code> <code class="javascript spaces"> </code><code class="javascript plain">body.connected</code> <code class="javascript preprocessor">#logout { display: block; }</code> <code class="javascript spaces"> </code><code class="javascript plain">body.not_connected</code> <code class="javascript preprocessor">#login { display: block; }</code> <code class="javascript spaces"> </code><code class="javascript plain">body.not_connected</code> <code class="javascript preprocessor">#logout { display: none; }</code> <code class="javascript spaces"> </code><code class="javascript plain"></style></code> <code class="javascript plain"></head></code> <code class="javascript plain"><body></code> <code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"fb-root"</code><code class="javascript plain">></div></code> <code class="javascript spaces"> </code><code class="javascript plain"><script></code> <code class="javascript spaces"> </code><code class="javascript plain">(</code><code class="javascript keyword">function</code><code class="javascript plain">() {</code> <code class="javascript spaces"> </code><code class="javascript keyword">var</code> <code class="javascript plain">e = document.createElement(</code><code class="javascript string">'script'</code><code class="javascript plain">); e.async = </code><code class="javascript keyword">true</code><code class="javascript plain">;</code> <code class="javascript spaces"> </code><code class="javascript plain">e.src = document.location.protocol + </code><code class="javascript string">'//connect.facebook.net/en_US/all.js'</code><code class="javascript plain">;</code> <code class="javascript spaces"> </code><code class="javascript plain">document.getElementById(</code><code class="javascript string">'fb-root'</code><code class="javascript plain">).appendChild(e);</code> <code class="javascript spaces"> </code><code class="javascript plain">}());</code> <code class="javascript spaces"> </code><code class="javascript plain">window.fbAsyncInit = </code><code class="javascript keyword">function</code><code class="javascript plain">() {</code> <code class="javascript spaces"> </code><code class="javascript plain">FB.init({ appId: </code><code class="javascript string">'XXXXXXXXXX'</code><code class="javascript plain">, </code> <code class="javascript spaces"> </code><code class="javascript plain">status: </code><code class="javascript keyword">true</code><code class="javascript plain">, </code> <code class="javascript spaces"> </code><code class="javascript plain">cookie: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code> <code class="javascript spaces"> </code><code class="javascript plain">xfbml: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code> <code class="javascript spaces"> </code><code class="javascript plain">oauth: </code><code class="javascript keyword">true</code><code class="javascript plain">});</code>
<code class="javascript spaces"> </code><code class="javascript plain">FB.Event.subscribe(</code><code class="javascript string">'auth.statusChange'</code><code class="javascript plain">, handleStatusChange); </code> <code class="javascript spaces"> </code><code class="javascript plain">};</code> <code class="javascript spaces"> </code><code class="javascript keyword">function</code> <code class="javascript plain">handleStatusChange(response) {</code> <code class="javascript spaces"> </code><code class="javascript plain">document.body.className = response.authResponse ? </code><code class="javascript string">'connected'</code> <code class="javascript plain">: </code><code class="javascript string">'not_connected'</code><code class="javascript plain">;</code>
<code class="javascript spaces"> </code><code class="javascript keyword">if</code> <code class="javascript plain">(response.authResponse) {</code> <code class="javascript spaces"> </code><code class="javascript plain">console.log(response);</code> <code class="javascript spaces"> </code><code class="javascript plain">}</code> <code class="javascript spaces"> </code><code class="javascript plain">}</code> <code class="javascript spaces"> </code><code class="javascript keyword">function</code> <code class="javascript plain">loginUser() { </code> <code class="javascript spaces"> </code><code class="javascript plain">FB.login(</code><code class="javascript keyword">function</code><code class="javascript plain">(response) { }, {scope:</code><code class="javascript string">'email'</code><code class="javascript plain">}); </code> <code class="javascript spaces"> </code><code class="javascript plain">}</code> <code class="javascript spaces"> </code><code class="javascript plain"></script></code>
<code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"login"</code> <code class="javascript plain">class=</code><code class="javascript string">"not_connected"</code><code class="javascript plain">></code> <code class="javascript spaces"> </code><code class="javascript plain"><p><button onClick=</code><code class="javascript string">"loginUser();"</code><code class="javascript plain">>Login</button></p></code> <code class="javascript spaces"> </code><code class="javascript plain"></div></code> <code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"logout"</code> <code class="javascript plain">class=</code><code class="javascript string">"not_connected"</code><code class="javascript plain">></code> <code class="javascript spaces"> </code><code class="javascript plain"><p><button onClick=</code><code class="javascript string">"FB.logout();"</code><code class="javascript plain">>Logout</button></p></code> <code class="javascript spaces"> </code><code class="javascript plain"></div></code> <code class="javascript plain"></body></code> <code class="javascript plain"></html></code> |
Hier wird zunächst das SDK geladen (Zeilen 14-18) und initialisiert (19-24), dabei muss eben die korrekte Facebook-App ID angegeben werden. Dann registriert sich die Anwendung für das Event "auth.statusChange", um die Anmeldung eines Benutzers mitzubekommen.
Wechselt, der Anwendungsstatus, so wird einfach die CSS Klasse des Body zwischen "connected" und "not_connected" geändert: Ein lustiger Trick, um CSS-basiert Login- und Logout-Knopf abwechselnd erscheinen zu lassen (28-33).
Die Anmeldung selbst erfolgt dann schlicht per "FB.login", hier wird angegeben, welche Rechte die Anwendung vom Nutzer erhalten möchte, in diesem Fall "email" (35-37). Das führt auf folgenden Dialog:
Und nach dem Anmelden dann wieder zurück auf den Anwendungs-Screen, der naturgemäß jetzt noch sehr schlicht mit einem Logout-Knopf ausgestattet ist.
3. Hallo, Facebook!
Eine erste "richtige" Integration mit Facebook wäre der Abruf des eigenen Profiles. Das geht ganz einfach: Wir ändern die Methode "handleStatusChange" so ab, dass, sobald ein angemeldeter Benutzer vorliegt, die Methode handleStatusChange aufgerufen wird:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <code class="javascript spaces"> </code><code class="javascript keyword">function</code> <code class="javascript plain">handleStatusChange(response) {</code> <code class="javascript spaces"> </code><code class="javascript plain">document.body.className = response.authResponse ? </code><code class="javascript string">'connected'</code> <code class="javascript plain">: </code><code class="javascript string">'not_connected'</code><code class="javascript plain">;</code>
<code class="javascript spaces"> </code><code class="javascript keyword">if</code> <code class="javascript plain">(response.authResponse) {</code> <code class="javascript spaces"> </code><code class="javascript plain">updateUserInfo(response); </code> <code class="javascript spaces"> </code><code class="javascript plain">}</code> <code class="javascript spaces"> </code><code class="javascript plain">}</code> <code class="javascript spaces"> </code><code class="javascript keyword">function</code> <code class="javascript plain">updateUserInfo(response) {</code> <code class="javascript spaces"> </code><code class="javascript plain">FB.api(</code><code class="javascript string">'/me'</code><code class="javascript plain">, </code><code class="javascript keyword">function</code><code class="javascript plain">(response) {</code> <code class="javascript spaces"> </code><code class="javascript plain">document.getElementById(</code><code class="javascript string">'user-info'</code><code class="javascript plain">).innerHTML = </code> <code class="javascript spaces"> </code><code class="javascript string">'<img src="https://graph.facebook.com/'</code> <code class="javascript plain">+ </code> <code class="javascript spaces"> </code><code class="javascript plain">response.id + </code> <code class="javascript spaces"> </code><code class="javascript string">'/picture"></code> <code class="javascript string">'</code> <code class="javascript plain">+ </code> <code class="javascript spaces"> </code><code class="javascript plain">response.name;</code> <code class="javascript spaces"> </code><code class="javascript plain">});</code> <code class="javascript spaces"> </code><code class="javascript plain">} </code> |
Hier wird die sehr allgemeine Methode FB.api() genutzt, in diesem Fall, um "/me" abzurufen, ein JSON-Dokument mit dem eigenen Profil Davon wird dann das Bild und der Name in die Seite eingefügt (hierzu noch ein div mit der id "user-info" einfügen!) und schon sieht die Anwendung etwas persönlicher aus:
Im nächsten Teil rund um die mobilen Facebook-Apps gehe ich auf die neuen "Sozialen Kanäle" ein: wie verschickt man Anfragen?
<code class="javascript plain"></code>
<html> <head> <title>Kopfrechnen</title> <style> body.connected #login { display: none; } body.connected #logout { display: block; } body.not_connected #login { display: block; } body.not_connected #logout { display: none; } </style> </head> <body> <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: 'XXXXXXXXXX', status: true, cookie: true, xfbml: true, oauth: true}); FB.Event.subscribe('auth.statusChange', handleStatusChange); }; function handleStatusChange(response) { document.body.className = response.authResponse ? 'connected' : 'not_connected'; if (response.authResponse) { console.log(response); } } function loginUser() { FB.login(function(response) { }, {scope:'email'}); } </script> <div id="login" class="not_connected"> <p><button onClick="loginUser();">Login</button></p> </div> <div id="logout" class="not_connected"> <p><button onClick="FB.logout();">Logout</button></p> </div> </body> </html>
<code class="javascript plain"></code>
Weitere Informationen
