Facebook App erstellen

Quickstart - Beispiel App

Du brauchst:

Allgemein:

• Einen Facebook Account
• Du mußt der Gruppe Facebook Developer beitreten
• Handy Nummer oder Kreditkartennummer muß registriert sein (geht beim ersten anlegen einer App

App in Facebook anlegen

Facebook Developer ist im Prinzip selbst eine FB Anwendung, die es dir ermöglicht deine Anwendung auf dem FB Server zu registrieren. Deine Anwendung selbst läuft dann auf deinem eigenen Webspace. Die Facebook API stellt dir Funktionen zur Verfügung mit denen du z.B. auf die Daten von den Usern o.ä. zugreifen kannst. Die App authentifiziert sich gegenüber dem FB Server über eine App ID und ein App Secret. Diese Daten werden beim Anlegen der App automatisch erstellt.

Für die App brauchst du noch

• Ein Icon (Standard 16x16 Pixel)
• Ein Logo (Standard 75x75 Pixel)
• Eine "Privacy URL" auf der die Datenschutzbestimmungen zu findens sind.
• Eine Kontaktseite oder eine Kontakt E-Mail Adresse

App Daten

Um die App anzulegen gehtst du auf den Karteireiter Anwendungen und dann auf neue Anwendung. Nun kann man die App Daten eingeben.

About: Hier kann man die Basisdaten angeben und findet die ID und den Secret Key. Dies sind die essentiellen Daten. Zusätzlich lassen sich hier z.B. Rollen angeben z.B. Testpersonen oder Administratoren die Zugriff auf die technischen Details der App bekommen. Im Reiter Advanced lassen sich technische Details regeln z.B. ob eine oAuth Authentifizierung möglich ist, ob eine alte API benutzt wird. Welche Werbepartner für die App Werbung benutzt werden oder sogar eine IP White- und Blacklist.

Unter On Facebook legt man das Erscheinungsbild der App auf Facebook fest. Wichtig ist hier vor allem die Angabe

Canvas Page - hier gibt man die URL an unter der die App auf Facebook zu erreichen ist. Die URL beginnt immer mit http://apps.facebook.com/ und nach dem Slash gibt man seinen Wunschnamen ein also z.B. http://apps.facebook.com/meineapp. Nur Kleinbuchstaben sind erlaubt.

Canvas URL - Dies ist der Link über den die reale Anwendung Ihre Daten abliefert. Also z.B. http://www.meinServer.de/meineApp/index.php

Damit kann man die App schon nutzen. Ruft man den Canvas Page Link auf erscheint die Ausgabe der Seite im Facebook iFrame und zwar unabhängig davon ob man in FB angemeldet ist oder nicht.

Weitere Daten der App

Unter Web kann man eine URL angeben unter der die App auf Deinem Server zu finden ist. Z.B. fbapp.meinServer.de/index.php

Facebook API und Facebook SDK

Das Facebook SDK stellt einige vorgefertigte Funktionen zur Verfügung. Man kann es sich auf der Developer Seite für verschiedene Plattformen (PHP, Android, ...) herunterladen. Wir benutzen hier das PHP SDK.

Grundprogrammierung

Wir beginnen mit dem Beispiel Code aus dem SDK in der Art:

require '../src/facebook.php';

// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
  'appId'  => '117743971608120',
  'secret' => '943716006e74d9b9283d4d5d8ab93204',
));

// Get User ID
$user = $facebook->getUser();

// We may or may not have this data based on whether the user is logged in.
//
// If we have a $user id here, it means we know the user is logged into
// Facebook, but we don't know if the access token is valid. An access
// token is invalid if the user logged out of Facebook.

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

// Login or logout url will be needed depending on current user state.
if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

// This call will always work since we are fetching public data.
$naitik = $facebook->api('/naitik');

?>

appId und secret ersetzen wir mit den uns zugewiesenen Daten. Sonst gibt es keine gültige Verbindung.

App authentifizieren - App zulassen

Wenn ein Benutzer eine App nutzen will muß er der App Rechte auf den Zugriff gewisser Daten gewähren. Facebook nutzt den OAuth Mechanismus. Den passenden Dialog dazu liefert facebook unter der URL:

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE

Dann erscheint der bekannte FB Dialog bei dem man der App (in diesem Fall Standard-) Rechte gewährt. Braucht man mehr Rechte sieht es ungefähr so aus:

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream

Wenn der User die Rechte nicht gewährt wird er via HTTP 302 auf die Seite zurückgeleitet die in der redirect_uri angegeben wurde (s.o.). Dabei wird ein error Parameter mitgegeben:

http://YOUR_CANVAS_PAGE?error_reason=user_denied&error=access_denied&error_description=The+user+denied+your+request.

Wenn der User Akzeptiert wird er ebenfalls auf die redirect_uri geleitet. Dann bekommt er den Parameter signed_request mit einigen Userdaten zurück.

Ein kleines Beispiel zur Authentifizierung (Vgl. Beispiel oben):

<?php 

     $app_id = "YOUR_APP_ID";

     $canvas_page = "YOUR_CANVAS_PAGE_URL";

     $auth_url = "http://www.facebook.com/dialog/oauth?client_id=" 
            . $app_id . "&redirect_uri=" . urlencode($canvas_page);

     $signed_request = $_REQUEST["signed_request"];

     list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

     $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

     if (empty($data["user_id"])) {
            echo("<script> top.location.href='" . $auth_url . "'</script>");
     } else {
            echo ("Welcome User: " . $data["user_id"]);
     } 
 ?>

Facebook Canvas - Wie erscheint meine App

http://developers.facebook.com/docs/guides/canvas/

In Facebook wird die Ausgabe deiner App auf eine Canvas geschrieben. Das kann man sich wie eine leere Leinwand vorstellen.

Angenommen man hat eine Web App die unter http://www.example.com/canvas erreichbar ist. Das ist die Canvas URL, die man auch angeben muß wenn man eine Facebook App anlegt (so). Nach dem Anlegen der App ist sie unter der FB URL http://apps.facebook.com/your_app erreichbar. Im Beispiel nehmen wir your_app als Canvas Page name. Wenn der Benutzer http://apps.facebook.com/your_app im Browser eingibt, sieht er die Inhalte von http://www.example.com/canvas als iFrame in Facebook.com.

Der Canvas hat eine maximale Breite von 760px. Ab einer gewissen Höhe werden per Default Scrollbars eingeblendet. Man kann die Scrollbars in den Settings seiner Apps abstellen und die Höhe der FB Seite mit der Funktion

setSize()

einstellen.

Social Channels - Wo taucht meine App auf

Facebook bietet mehrere Stellen an auf der eine App in Erscheinung treten kann. FB nennt diese verschiedenen Formen die Social Channels

Automatic Channels

Wenn jemand eine App benutzt hat dann generiert FB ein Bookmark, das z.B. auf der Liste der Benutzten Apps steht, damit der User die App wieder finden kann. Außerdem kann auf der Pinwand ein Eintrag erscheinen, daß man begonnen hat die App zu nutzen. Auch auf dem App Dashboard http://www.facebook.com/?sk=apps oder dem Games Dashboard kann man die App finden.

Feed / Pinnwand Einträge

Eine App kann den User fragen ob er einen Eintrag auf der Pinnwand machen möchte (Teilen) Dazu braucht sie keine besonderen Rechte, im Gegensatz dazu braucht sie eine besondere Genehmigung wenn Sie ohne Bestätigung des Users auf die Pinnwand posten möchte.

In php sieht das folgender maßen aus:

<?php 

         $app_id = "YOUR_APP_ID";

         $canvas_page = "YOUR_CANVAS_PAGE_URL";

         $message = "Apps on Facebook.com are cool!";

         $feed_url = "http://www.facebook.com/dialog/feed?app_id=" 
                . $app_id . "&redirect_uri=" . urlencode($canvas_page)
                . "&message=" . $message;

         if (empty($_REQUEST["post_id"])) {
            echo("<script> top.location.href='" . $feed_url . "'</script>");
         } else {
            echo ("Feed Post Id: " . $_REQUEST["post_id"]);
         }
?>

Requests / Anfragen

Das ist die typische Anfrage mit der die Pinnwände zugespammt werden: "Hanna Haifisch hat dir ein Fischbrötchen geschickt. Möchtest du es annehmen?" Es könnte aber auch eine Anfrage sein wenn eine bestimmte Information verfügbar ist wie z.B. eine Erinnerung an eine Veranstaltung o.ä.

So sieht es in php aus:

<?php 

         $app_id = "YOUR_APP_ID";

         $canvas_page = "YOUR_CANVAS_PAGE_URL";

         $message = "Would you like to join me in this great app?";

         $requests_url = "http://www.facebook.com/dialog/apprequests?app_id=" 
                . $app_id . "&redirect_uri=" . urlencode($canvas_page)
                . "&message=" . $message;

         if (empty($_REQUEST["request_ids"])) {
            echo("<script> top.location.href='" . $requests_url . "'</script>");
         } else {
            echo "Request Ids: ";
            print_r($_REQUEST["request_ids"]);
         }
?>

Custom Tabs

Die Social Channels sind ein schneller Weg um Apps und Informationen zu teilen. Im Gegensatz dazu bieten die Custom Tabs eine Möglichkeit eine Seite mit Brandings eigenen Funktionen o.ä. aufzuwerten.

Tabs erscheinen als Icons in der linken Sidebar des Benutzers, genau wie der Anwendungstab. Allerdings nicht wenn man sich auf der Pinwand befindet. Wann genau wäre noch herauszufinden ;-). Vielleicht kann man das auch nur als Seite machen.

Die Breite sollte 520px nicht überschreiten weil man auf beiden Seiten Sidebars hat.