Facebook ist mit über 400 Millionen Benutzern die wohl größte Community der Welt. Mit eigenen Facebook-Anwendungen kann man dort einiges reißen. Ich möchte euch heute ein Tutorial bietet, was nach und nach das Erstellen einer eigenen Anwendung erklärt. 

Was in diesem Tutorial erstellt werden soll ist relativ simpel: Ein Notizblock. Man kann Sachen speichern und später wieder abrufen. 

Registrierung

Als erstes ist natürlich ein Facebook Account erforderlich. Außerdem muss ein Developer-Account aufgesetzt sein. Dafür besucht ihr developers.facebook.com und klickt auf ‘Anwendung für deine Seite erstellen’. Dort gelangt ihr zum folgenden Formular: 

Basisangaben

Hier gebt ihr den Namen, die Url und die Sprache eurer Seite an. Eine kleine Empfehlung von mir: Legt eine extra Subdomain für die Url an. Ich hatte später ein paar Probleme mit der Hauptdomain, da ich Mod Rewrite verwende. Habt ihr alles eingetragenbekommt ihr folgendes zu sehen: 

API Authentifizierung

 Das kennt ihr zum Beispiel von den Google Webmaster Tools. Ihr ladet die Datei auf eurer Seite hoch und authentifiziert euch als Webmaster der Seite. Dann habt ihr es auch schon geschafft, denn nun bekommt ihr eure Keys: 

Facebook API Keys

Anwendung erstellen

Um nun eine Anwendung zu erstellen müsst ihr auf http://www.facebook.com/developers/ gehen und evtl. Zugriff gewähren. Wenn eure Anwendung dort noch nicht aufgelistet ist, klickt ihr auf ‘Neue Anwendung erstellen’ andernfalls auf den Namen der Anwendung. 

Facebook Developers

Ihr gelangt dann zur Übersicht eurer Anwendung. Dort steht ganz unten der Link ‘Kundenbibliothek herunterladen’. Da klickt ihr drauf und speichert die Daten des Ordners /facebook-plattform/phpauf eurem Webspace. Danach klickt ihr weiter oben auf Einstellungen Bearbeiten. Hier gebt ihr alle Angaben zur Seite ein. Wichtig ist, dass ihr den Reiter ‘Leinwand’ ausfüllt. Nach einem Fehler dort musste ich lange suchen! Gebt dort bei ‘Url der Leinwandseite’ den Namen eurer Anwendung ein. Die Canvas Callback Url muss zum Verzeichnis der Facebook-Dateien führen. Wichtig: Am Ende ein ‘/’. 

Eure Anwendung könnt ihr später über die Url der Leinwandseite aufrufen.

Initialisierung

Erstellt die Datei index.php. Darin kommt der nun folgende Code. 

Als erstes muss die Facebook-Klasse importiert werden: 

<?php
  require_once 'facebook.php';
?>

Danach muss das Facebook-Objekt erstellt werden. Hierfür braucht ihr die Keys, die ihr bei der Registrierung bekomen habt: 

<?php
  $appapikey = 'geheim';
  $appsecret = 'geheim';
  $facebook = new Facebook($appapikey, $appsecret);
?>

Login

Natürlich müsst ihr bei der Verwendung auf den User zugreifen. Dafür muss man das Login durchführen. Als Ergebnis bekommt man die Facebook User ID: 

<?php
  $user_id = $facebook->require_login();
?>

DataStore

Der DataStore ist eine Datenbank Facebook, die man über die API ansteuren kann. Dort gibt es Objekttypen, Objekte & Association. Einen Objekttypen ist eine Art Klasse, die ein Objekt beschreibt. In unserem Beispiel nehmen wir das Objekttyp Note. Den Objekttyp erstellt man so: 

<?php
  $facebook->api_client->data_createObjectType('note');
?>

Dieses Objekt kann nun bestimmte Eigenschaften haben. Da ich nur einen Text als Notiz speichere bekommt er die Eigenschaft text. Eigenschaften können folgende Typen sein: 

• 1: Zahlen
• 2: Text 255 Zeichen
• 3: Text bis zu 64kb

In unserem Fall habe ich mich für die 3 entschieden, woraus sich folgender Code ergibt: 

<?php
  $facebook->api_client->data_defineObjectProperty('note','text',3);
?>

Jetzt haben wir die Struktur unserer Datenbank erstellt. Dafür brauchen wir natürlich Daten! Also müssen wir erst einmal ein Objekt vom Typen note erzeugen: 

<?php
  $obj = $facebook->api_client->data_createObject('note',$test);
?>

Diesem Objekt weisen wir nun der oben erstellten $user_id zu: 

<?php
  $facebook->api_client->data_setAssociation('note', $user_id, $obj);
?>

Um ein gespeichertes Objekt über den User wieder zu bekommen müssen wir data_getAssociatedObjects ausführen: 

<?php
  $assocs = $facebook->api_client->data_getAssociatedObjects('note',$user_id);
?>

Als nächstes überprüfen wir, ob der Parameter text mit POST übergeben wurde. Ist das der Fall, speichern wir diesen in unser Objekt: 

<?php
  if($_POST['text']){
   $facebook->api_client->data_setObjectProperty($assocs[0]['id2'],'text',$_POST['text']);
  }
?>

Formular

Fehlt nur noch das Formular mit der Ausgabe. Da beim ersten Aufruf noch kein Text vorhanden ist, habe ich das ganze (unsauber) im Try-Catch gebaut: 

<html>
  <body>
    <h1>Notizblock</h1>
    <form method="POST">
      <textarea name="text" rows="20" cols="50">
        <?PHP
          try{
            echo $facebook->api_client->data_getObjectProperty($assocs[0]['id2'],'text');
          }
          catch(Exception $ex){
          }
        ?>
      </textarea><br />
      <input type="submit" value="Speichern" />
    </form>
  </body>
</html>

Zu guter letzt gibt es nochmal den Code des kompletten Notizblockes: 

<?php
  require_once 'facebook.php';

  $appapikey = 'geheim';
  $appsecret = 'geheim';
  $facebook = new Facebook($appapikey, $appsecret);

  $user_id = $facebook->require_login();

  //Diesen Block nach dem ersten Aufruf entfernen
  $facebook->api_client->data_createObjectType('note');
  $facebook->api_client->data_defineObjectProperty('note','text',3);

  $assocs = $facebook->api_client->data_getAssociatedObjects('note',$user_id);

  if(!$assocs or sizeof($assocs) == 0){
 
  $obj = $facebook->api_client->data_createObject('note',$test);
  $facebook->api_client->data_setAssociation('note', $user_id, $obj);
  }

  if($_POST['text']){
    $facebook->api_client->data_setObjectProperty($assocs[0]['id2'],'text',$_POST['text']);
  }
?>
<html>
  <body>
    <h1>Notizblock</h1>
    <form method="POST">
      <textarea name="text" rows="20" cols="50">
        <?PHP
      try{
            echo $facebook->api_client->data_getObjectProperty($assocs[0]['id2'],'text');
      }
      catch(Exception $ex){
      }
        ?>
      </textarea><br />
      <input type="submit" value="Speichern" />
    </form>
  </body>
</html>

Das Ergebniss könnt ihr euch hier ansehen: http://apps.facebook.com/stevieswebsite/

Hilfsmittel

Bei developers.facebook.com gibt es das Tool API Testkonsole. Hier könnt ihr alle Funktionen der API einsehen und testen.

Wenn euch dieses Tutorial gefallen habt, könnt ihr mich ja mal als Freund hinzufügen, dort bekommt ihr auch alle Neuigkeiten von SteviesWebsite.