Facebook API – Teil 2

Im 2. Teil meiner Facebook API Artikelserie geht es nun darum wie man mit den SDKs arbeitet und wie man Daten von Facebook abfragen kann. Wir wollen nun mit der Javascript SDK nun die ersten Daten abfragen und darstellen.

Javascript SDK

Auch an dieser Stelle will ich noch einmal auf die Dokumentation der einzelnen Facebook SDKs verweisen. Wie dort zu lesen ist sind die 3 Hauptfunktionen der SDKs:

• FB.init
• FB.api
• FB.ui

An einem Beispiel zeige ich euch, wie man diese Methoden mit dem Javascript SDK einsetzt.

init

Der erste Schritt ist die Initialisierung des Javascript SDKs.

<script src="https://connect.facebook.net/de_DE/all.js"></script>
<script>
FB.init({
    appId :'XXXXXXX',
    frictionlessRequests : true,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
});
<script>

Bevor wir eine Funktion verwenden können müssen wir nun eine JavaScript Datei von Facebook einbinden. Das machen wir in der ersten Zeile. Und zwar verwenden wir hier nicht eine lokal gespeicherte Datei, sondern eine die wir und direkt von Facebook holen. Die all.js Datei gibt es für unterschiedliche Sprachen, will man also seine Dialoge auf Deutsch, so muss man sie die all.js aus dem de_DE Ordner holen. Braucht man englische Texte, dann ändert man der Ordner zum Beispiel in en_US.

Der Aufruf der Initialisierungsfunktion ist denkbar einfach. Der einzige Pflichtparameter ist appId. Hier muss man die mit XXXXX gekennzeichneten Platzhalter mit der App Id seiner eigenen App ersetzen. Diese findet man im Developerbereich von Facebook, wo man seine App erstellt. Zusätzlich zu der appId kann man noch diverse Einstellungen treffen. Diese sind eigentlich selbsterklärend.

FB.login

Der Login ist keine Hauptfunktion, jedoch benötigt man für alle folgenden Funktionen einen eingeloggten Facebook Benutzer. Standardmäßig ist kein Benutzer bei einer App angemeldet. D.h. die App kann keine Informationen von dem Benutzer abfragen, da die App nicht einmal weiß, wer gerade die Seite sieht. Um also das Anmelden bei Facebook zu ermöglichen genügt folgender Code:

function FacebookLogin()
{
    FB.login(function(response){
        if(response){
            alert('erfolgreich angemeldet');
        }
    },
    {scope: 'email'});
}

Der Aufruf von FB.login öffnet den Authentifizierungsdialog. Dort kann man bestätigen, dass die App Daten von meinem Facebook Profil abfragen darf. Das sind normalerweise nur die öffentlichen Daten wie Facebook Name, Profilbild usw. Je nach Profileinstellungen sind diese Informationen unterschiedlich. Will man aber zB. die e-Mail des Benutzers, so muss man explizit danach fragen. Wie das geht zeigt dieses Beispiel. In einer Callback Funktion wird noch eine Meldung ausgegeben, wenn der Login erfolgreich war.

Die obige Funktion kann man nun über einen Button aufrufen:

<a href="#" onclick='FacebookLogin();'>Login</a>

api

Mit der api Funktion kann man Benutzerdaten abfragen. Natürlich nur, wenn der sicher der Benutzer zuvor an der App registriert hat und seine Informationen preis gibt. Ein einfaches Beispiel:

FB.api('/me', function(response) {
    console.log(response);
    v_name = response.first_name;
    n_name = response.last_name;
    fb_id = response.id;
});

Hier werden alle zugänglichen Funktionen des angemeldeten Benutzers abgefragt. Welche das sind kann man über das response Objekt der Callback Funktion herausfinden. Diese gebe ich über console.log aus, diese Ausgabe kann man zum Beispiel mit dem Firefox Plugin Firebug anzeigen. Informationen die sicher dabei sind speichere ich mir in diesem Beispiel in globale Variablen ab. Das sind Vorname, Nachname und Facebook ID des Benutzers.

In der Dokumentation ist zu lesen, was man alles noch über die api Funktion abfragen kann.

ui

Die ui Funktion fasst alles zusammen, wo der Benutzer etwas gefragt wird. Hier wird immer eine Dialogbox von Facebook angezeigt bei der der Benutzer eingaben machen muss. Ein Beispiel dafür ist die Send Dialogbox, über die man Nachrichten an seine Freunde schicken kann:

FB.ui({
    method: 'send',
    name: 'Testnachricht an Benutzer',
    link: 'https://domain.com?inviter='+fb_id,
    description: v_name+' '+n_name+' hat dir diese Nachricht geschickt.',
});

Mit dem Parameter method gibt man an welche Dialogbox man anzeigen will. Je nach Typ kann man nun unterschiedliche weitere Parameter angeben. Für den Send Dialog sind zum Beispiel folgende Parameter erlaubt:

• Name
  Das ist der Name der Nachricht.
• Link
  Man kann der Nachricht einen Link hinzufügen um so Freunde über eine coole Webseite zu informieren
• Description
  Das ist jener Text der unter dem Link steht. Die Beschreibung ist nicht zu verwechseln mit der Nachricht. Diese kann nur der Benutzer im Dialog eingeben und kann nicht vorbelegt werden.

In diesem Beispiel verwende ich die zuvor abgefragten Informationen über den Benutzer. So kann ich gleich eine individuelle Nachricht mit dem Benutzername erstellen. Das +fb_id nach dem Link ermöglicht der Applikation, welche hier verlinkt wird festzustellen, wer diesen Link geteilt hat.

Im nächsten Teil schauen wir und serverseitige Funktionen des Facebook SDKs an.

Teil 1 | Teil 2 | Teil 3 | Teil 4