27
Apr
2011
admin

Die Facebook Javascript SDK - Zugriff auf die Graph API und FQL

Im Tutorial Die Facebook Javascript SDK - Eine Einführung habe ich gezeigt, wie man mit JavaScript einen Login/Logout realisiert und wie man auf bestimmte Events reagieren kann. Die Facebook JavaScript SDK kann aber noch viel mehr. Zugriffe auf die Facebook Graph API oder auch auf FQL sind mit JavaScript ebenso einfach zu realisieren, wie mit PHP.

Das HTML-Grundgerüst bleibt auch bei diesen Beispielen immer gleich:

<!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>

Fangen wir damit an ein paar öffentliche Informationen auszulesen. Die Facebook JavaScript SDK bietet uns dafür die Methode FB.api an.

  FB.api('/cocacola', function(response) {
    alert(response['name']);
  });

Als ersten Parameter übergeben wir hier das Objekt, welches wir auslesen wollen. Als zweiten Parameter übergeben wir eine Callback Funktion, die im response Parameter die abgefragten Daten enthält.

Genau das gleiche können wir natürlich für alle Objekte des Graphen machen. Bei einigen Objekten, wie z.B. dem Userobjekt, benötigen wir allerdings die Berechtigung, auf die Daten zuzugreifen.

<fb:login-button autologoutlink="true"></fb:login-button>
<div id="me"></div>

<script>

var div = document.getElementById('me'),

showMe = function(response) {
  if (!response.session) {
    div.innerHTML = '<em>Not Connected</em>';
  } else {
    FB.api('/me', function(response) {
      var html = '<table>';
      for (var key in response) {
        html += (
          '<tr>' +
            '<th>' + key + '</th>' +
            '<td>' + response[key] + '</td>' +
          '</tr>'
        );
      }
      html += '</table>';
      div.innerHTML = html;
    });
  }
};

FB.getLoginStatus(function(response) {
  showMe(response);
  FB.Event.subscribe('auth.sessionChange', showMe);
});
</script>

Erklärung
Zuerst prüfen wir mit der Methode getLoginStatus, ob der Benutzer die Anwendung bereits autorisiert hat. Mit dem Resultat als Parameter rufen wir die Funktion showMe auf. Existiert eine Session, werden die Daten des Userobjektes auf den Bildschirm geschrieben. Außerdem überwachen wir das Event auth.sessionChange. So können wir auf Änderungen der Session, also das An- und Abmelden, reagieren.

Wie eingangs erwähnt, kann man nicht nur die Graph API, sondern auch FQL mit der Facebook JavaScript SDK ansprechen. Hier ein Beispiel, welches das Benutzerbild und den Namen des aktuellen Benutzers auf den Bildschirm schreibt:

<fb:login-button autologoutlink="true"></fb:login-button>
<div id="account-info"></div>

<script>
  showMe = function(response) {
    if (!response.session) {
      document.getElementById('account-info').innerHTML = '<em>Not Connected</em>';
    } else {
      FB.api(
        {
          method: 'fql.query',
          query: 'SELECT name, pic_square FROM user WHERE uid=me()'
        },
        function(response) {
          document.getElementById('account-info').innerHTML = (
            '<img src="' + response[0].pic_square + '"> ' + response[0].name
          );
        }
      );
    }
  };

  FB.getLoginStatus(function(response) {
    showMe(response); 
    FB.Event.subscribe('auth.sessionChange', showMe); 
  });
</script>

Neben dem Abfragen von Daten, bietet uns die Facebook JavaScript SDK natürlich auch die Möglichkeit Daten zu veröffentlichen. Dazu benötigen wir natürlich die Berechtigung, an die Pinnwand des Benutzers zu schreiben. Das alles könnte man wie folgt realisieren:

<fb:login-button autologoutlink="true" perms="publish_stream"></fb:login-button>
<a href="" id="publish">An meine Pinnwand posten</a>

<script>
  $("#publish").click( function () {
    var body = 'AboutTheWeb - Die Facebook JavaScript SDK';
    FB.api('/me/feed', 'post', { message: body }, function(response) {
      if (!response || response.error) {
        alert('Fehler');
      } else {
        alert('Post ID: ' + response.id);
      }
    });

    return false;
  })
</script>
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-api/

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

Trackback-URL für diesen Beitrag

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

Ähnliche Artikel

Bild des Benutzers Sebastian
Sebastian
Do, 05/19/2011 - 09:02

Vielen Dank für den Code und den Artikel. Ich baue gerade eine Art javascript und php Framework zum Arbeiten mit der Facebook API auf und werde bald einige unserer Apps Open-Source setzen. Der Einsteiger in die Facebook Entwicklung soll sich ja nicht mit Kinderkrankheiten rumschlagen sondern lieber gleich mit einem einfachen Funktionsaufruf ans Ziel.
Viele Grüße,
Sebastian

PS: Habe deinen Blog erst heute morgen entdeckt und bin direkt Fan geworden... :-)

Bild des Benutzers admin
admin
Do, 05/19/2011 - 09:05

Hallo Sebastian,
das mit dem Framework hört sich sehr interessant an. Ich bin gespannt, was daraus wird.
Gruß
Michael

Bild des Benutzers cyrex
cyrex
Fr, 09/30/2011 - 15:06

Wieder einmal ein super Tut, ein besseres habe ich bisher auch nicht gefunden. Danke Dir! Die Rettung. ;)

LG
Cy

Bild des Benutzers Nadine
Nadine
Mi, 12/21/2011 - 18:35

Hallo zusammen.

Ich habe da eine Frage und hoffe, dass mir jemand da weiterhelfen kann: Wie kann ich mir alle Veranstaltungen (events) in einem bestimmten Ort ausgeben lassen und diese auf meine Homepage veröffentlichen. Ihr könnt mir auch direkt eine Email schreiben: nadine_von_malek@hotmail.de

X
Laden