27
Mär
2011
admin

Die Facebook Javascript SDK - Eine Einführung

Bisher habe ich mich in den Tutorials fast ausschließlich an PHP gehalten. Aber auch für Javascript bietet Facebook eine sehr umfangreiche SDK an. Damit ist so ziemlich alles möglich, was auch mit PHP machbar ist und einiges davon ist vielleicht sogar etwas einfacher zu realisieren, als mit PHP. Es ist außerdem ohne Weiteres möglich auch Javascript Frameworks zusammen mit der Facebook Javascript SDK zu nutzen. In den folgenden Beispielen werde ich deshalb jQuery als Framework einsetzen.

Als erstes müssen wir natürlich die Facebook Javascript SDK einbinden. Dafür gibt es zwei verschiedene Möglichkeiten, die ich bereits im Tutorial Die Bibliotheken für Facebook Anwendungen beschrieben habe, wesegen ich hier nicht weiter darauf eingehen werde.

Anschließend können wir auch schon loslegen. Das HTML-Grundgerüst für alle Beispiele sieht immer wie folgt aus und wird, aus Gründen der Übersicht, nicht extra in den einzelnen Beispielen angezeigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Die Facebook Javascript SDK</title>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
  </head>
  <body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/de_DE/all.js"></script>
    <script>
      FB.init({
        appId  : '143655195699763', // Anwendungs ID
        status : true, // Login Status prüfen
        cookie : true, // Cookies nutzen
        xfbml  : true  // XFBML parsen
      });
    </script>
    <!-- Hier werden unsere Beispiele eingefügt -->
  </body>
</html>

Wenn wir mit der Facebook API arbeiten, egal ob nun mit PHP oder Javascript, ist es unser Ziel, Daten von Facebook abzufragen oder dort zu veröffentlichen. In der Regel geht es uns dabei um die Daten des aktuellen Benutzers. Wie auch mit PHP der Benutzer als erstes unsere Anwendung autorisieren, Daten von ihm auslesen zu dürfen. Das können wir auf zwei verschiedene Arten erledigen. Entweder nutzen wir das soziale Plugin Login Button oder wir nutzen die FB.login Methode der SDK. Die Variante des Login Buttons ist denkbar einfach:

<fb:login-button></fb:login-button>

Der Login Button kann mit verschiedenen Attributen versehen werden, um Aussehen und Funktion zu beeinflussen.

Attribut Beschreibung
show-faces Gibt an, ob Bilder von Freunden unter dem Login Button angezeigt werden, die diese Anwendung ebenfalls benutzen. Mögliche Werte sind true oder false.
width Die Breite in Pixeln. Als Standard sind 200px eingestellt.
max-rows Die Anzahl der Zeilen für Benutzerbilder. Standard ist 1.
perms Eine kommaseparierte Liste von erweiterten Rechten.
size Legt die Größe des Buttons fest. Mögliche Werte sind icon, small, medium und large.
autologoutlink Legt fest, ob automatisch ein Logout Button gezeigt wird, sobald der Login erfolgte. Mögliche Werte sind true oder false. Funktioniert nicht, wenn eine eigene Beschriftung gewählt wurde. Die Logout Funktion ist zwar gegeben aber die Beschriftung ändert sich nicht.

Die Beschriftung des Buttons kann geändert werden, indem der gewünschte Text einfach zwischen Start- und End-Tag geschrieben wird:

<fb:login-button>Meine Beschriftung</fb:login-button>

Ein Klick auf den Login Button öffnet den bekannten Autorisierungsdialog. Testen kannst du das hier:
Mit AboutTheWeb verbinden

Die zweite Möglichkeit zum Login ist, wie schon erwähnt, die FB.login Methode. Diese Methode erwartet eine Callback Funktion, die wir dazu nutzen werden, auf den Login oder das Abbrechen des Loginvorgangs zu reagieren.

  

  

Wie man sieht, bietet diese Methode den Vorteil, selbst festzulegen, wie unser Login Button aussehen soll. Wir können einen simplen Button, wie in diesem Beispiel, oder auch ein Bild oder einen einfachen Textlink nehmen. Beim Klicken des Buttons wird die FB.login Methode aufgerufen und es öffnet sich der uns bekannte Dialog. Brechen wir den Vorgang ab, wird der else-Zweig ausgeführt. Das response Objekt hat folgende Struktur:

{
    status: 'connected',
    session: {
        access_token: '...',
        expires:'...',
        secret:'...',
        session_key:'...',
        sig:'...',
        uid:'...'
    }
}

Benötigen wir für unsere Anwendung erweiterte Berechtigungen, können wir die erforderlichen Rechte als Parameter übergeben.

  

  

Es ist nicht zwingend erforderlich alle Rechte in einem Schritt abzufragen. Man kann mit diesem Mechanismus durchaus im weiteren Verlauf der Anwendung, je nach Bedarf, weitere Berechtigungen abfragen. Das ganze könnte dann so aussehen:

Nach dem Einloggen, wollen wir dem Benutzer auch die Möglichkeit geben, sich wieder auszuloggen. Dafür benutzen wir die FB.logout Methode.

FB.logout(function(response) {
  console.log('Benutzer ist ausgeloggt');
});

Die FB.logout Methode loggt den Benutzer aus der Seite und aus Facebook aus. Natürlich funktioniert das nur, wenn der Benutzer sich mit der Seite, per FB.login, zuvor verbunden hat.

Das erste, was wir machen würden, wenn eine Seite geladen wird, ist, zu prüfen, ob der aktuelle Benutzer sich bereits mit unserer Anwendung verbunden hat, um anschließend darauf zu reagieren. Dazu nutzen wir die Methode FB.getLoginStatus.

      FB.getLoginStatus(function(response) {
        if (response.session) {
          console.log('User ist eingeloggt.');
        } else {
          console.log('User ist nicht eingeloggt.');
        }
      });

Ein weiterer wichtiger Punkt, den ich kurz vorstellen möchte, ist das Event Handling. Facebook bietet uns damit die Möglichkeit, auf Ereignisse zu reagieren. Folgende Ereignisse werden unterstützt:

  • auth.login -- wird ausgelöst, wenn sich der Benutzer einloggt
  • auth.logout -- wird ausgelöst, wenn sich der Benutzer ausloggt
  • auth.sessionChange -- wird ausgelöst, wenn sich sie Session ändert
  • auth.statusChange -- wird ausgelöst, wenn sich der Status ändert
  • xfbml.render -- wird ausgelöst, wenn ein Aufruf von FB.XFBML.parse() fertiggestellt wurde
  • edge.create -- wird ausgelöst, wenn der Benutzer etwas "liked" (fb:like)
  • edge.remove -- wird ausgelöst, wenn der Benutzer etwas nicht mehr "liked" (fb:like)
  • comment.create -- wird ausgelöst, wenn der Benutzer etwas kommentiert (fb:comments)
  • comment.remove -- wird ausgelöst, wenn der Benutzer einen Kommentar entfernt (fb:comments)
  • fb.log -- wird ausgelöst bei log message

Auf all diese Ereignisse können wir reagieren. Dazu müssen wir als erstes angeben, welches Ereignis wir verfolgen möchten.

FB.Event.subscribe('auth.statusChange', function(response) {
  // mach irgendwas
});

Wollen wir das Ereignis nicht weiter verfolgen, teilen wir das auf folgende Art mit.

FB.Event.unsubscribe('auth.statusChange', function(response) {
  // mach irgendwas
});

Mit diesem Wissen können wir nun problemlos einen eigenen Login Button bauen, der uns, je nach Status, die Möglichkeit zum Ein- oder Ausloggen bietet.

    

    

Aussehen könnte das so:

Im nächsten Teil des Facebook Javascript SDK Tutorials, werde ich zeigen, wie man per Javascript auf die Facebook API zugreift und Daten ausliest, bzw. veröffentlicht.

Hinweis
Du kannst alle Codebeispiele von AboutTheWeb über ein SVN Repository auschecken. Dieses Beispiel findest du unter folgender Adresse:
http://svn.abouttheweb.de/atwtutorials/trunk/jssdk-basics/

Alternativ kannst Du alle Codebeispiele über das AboutTheWeb github Repository auschecken.

Trackback-URL für diesen Beitrag

http://www.abouttheweb.de/trackback/650

Ähnliche Artikel

Bild des Benutzers Bruiser
Bruiser
Mi, 04/13/2011 - 10:15

Hi Michael,

erstmal Kompliment, einen feinen Blog mit eine paar wirklich gut geschriebenen Artikeln hast Du hier! Zu dem Artikel oben: Es öffnen sich beim Klick auf den letzten Button zwei Dialogfenster. Ich nehme an, das ist nicht so gewollt ;)

Desweiteren habe ich noch eine Frage an Dich. Wir wollen eine kleine Yii- oder Zend-basierte Anwendung entwickeln die insbesondere direkt innerhalb von Facebook läuft. Würdest Du dafür eher für die Verwendung der php-sdk oder der javascript-sdk plädieren? Und warum würdest Du welche sdk empfehlen? Vielen Dank!

Nochmals Kompliment für die gute Arbeit.
Gruss Bruiser

Bild des Benutzers admin
admin
Do, 04/14/2011 - 13:09

Hallo Bruiser,

vielen Dank für Dein Lob.

Ob man PHP oder JS nimmt, hängt letztendlich davon ab, was man genau machen will. Aber es hindert einen ja keiner daran, auch beides gleichzeitig zu nutzen und dann, der Anforderung entsprechend, das eine oder das andere zu nutzen.

Bild des Benutzers martin
martin
Di, 06/28/2011 - 09:58

Spitzen Tutorial! Facebook selbst hat es meiner Meinung nach ein wenig versäumt, seine SDKs an einfachen Beispielen besser greifbar zu machen... dir gelingt das hier super!

hat mir stundenlanges googlen erspart ;)

Bild des Benutzers cyrex
cyrex
Fr, 09/30/2011 - 14:27

Hi!
Super Tut, danke Dir! Sehr verständlich! I like!

LG
cy

X
Laden