Verbesserungen der Facebook Dialoge

Vor wenigen Tagen hat Facebook einige Verbesserungen an den Dialogen zur Nutzerinteraktion bekannt gegeben (z.B. der Dialog einer Anwendung zum Anfordern erweiterter Rechte). Ein großer Vorteil der neuen Dialoge ist, dass man sich als Entwickler keine Gedanken darum machen muss, ob der Dialog in einer Canvas Anwendung, einer externen Webseite oder auf einem mobilen Endgerät angezeigt werden soll.

Es wird immer ein einheitlicher Request benötigt. Es gibt zurzeit fünf verschieden Dialoge, bzw. Dialog Typen:

feed - zum Veröffentlichen von Daten im Newsfeed
friend - um einen Dialog zur Freundschaftsanfrage anzuzeigen
oauth - der Dialog zur Abfrage erweiterter Rechte
apprequests - der Dialog zum Senden von Requests zu einem oder mehreren Freunden
pay - der Dialog zur Kaufen neuer Facebook Credits oder zum Bezahlen von Items

Die Basis URL für alle Dialoge lautet wie folgt:

http://www.facebook.com/dialog/TYP

Der Feed Dialog
Der Feed Dialog ist dazu gedacht Nachrichten in einem Newsfeed zu veröffentlichen (im Tutorial Daten veröffentlichen über die Graph API habe ich bereits beschrieben, wie das ohne einen extra Dialog via Graph API funktioniert). Um nun einen Dialog anzuzeigen, der einem Benutzer die Möglichkeit bietet, einen Post im Newsfeed zu veröffentlichen, wäre die Basis URL:

http://www.facebook.com/dialog/feed

Zusätzlich benötigen wir noch einige Parameter, die wir dem Request übergeben müssen, bzw. können.

Parameter	Erforderlich	Beschreibung
app_id	ja	Die ID der Facebook Anwendung, die mit diesem Dialog verknüpft ist.
redirect_uri	ja	Zu dieser URL wird der Benutzer nach dem Klicken eines Buttons weitergeleitet.
display	nein	Der Display Modus, wie der Dialog angezeigt werden soll (page, popup oder iframe). Standard ist page.
from	nein	Die Benutzer ID oder der Benutzername des Benutzers, der diese Nachricht postet. Wird dieser Parameter nicht angegeben, ist dies der aktuelle Benutzer. Diese ID kann die ID eines Benutzers oder die ID einer Seite sein, die der Benutzer administriert.
to	nein	Die Benutzer ID des Benutzers, in dessen Newsfeed der post geschrieben werden soll. Standardmäßig ist dies der selbe Wert wie bei "from".
message	nein	Der eigentliche Nachrichtentext. Sollte nur gesetzt werden, wenn der Benutzer den Nachrichtentext innerhalb der Anwendung bereits selbst definiert hat. Das Vorausfüllen könnte sonst ein Verstoß gegen die Facebook Richtlinien sein.
link	nein	Der Link, der diesem Post zugewiesen und innerhalb des Posts angezeigt wird.
picture	nein	Die URL des Bildes, welches diesem Post zugewiesen und innerhalb des Posts angezeigt wird.
source	nein	Die URL einer Media Datei (z.B. SWF oder Video Datei), welches diesem Post zugewiesen und innerhalb des Posts angezeigt wird. Wenn "post" und "source" angegeben werden, wird "source" benutzt.
name	nein	Der Name des Links.
caption	nein	Kurzbeschreibung. Erscheint unter dem Link.
description	nein	Beschreibung. Erscheint unter "caption".
properties	nein	Ein JSON Objekt (Schlüssel/Wert) mit den Schlüsseln "text" und "href". Erscheint unter der Beschreibung und hat pro Wert eine eigene Zeile.
actions	nein	Ein JSON Objekt (Schlüssel/Wert) mit den Schlüsseln "name" und "link". Erscheint unter dem Post.

Ein Beispiel:

$feed = "http://www.facebook.com/dialog/feed/?"
      . "app_id=125209680874919&"
      . "name=AboutTheWeb&"
      . "description=Facebook Anwendungen erstellen&"
      . "link=http://www.abouttheweb.de/&"
      . "picture=http://www.abouttheweb.de/wp-content/themes/abouttheweb/img/atw-meta-image.jpg&"
      . "redirect_uri=http://apps.facebook.com/atw-dialogs/redirect_uri.php";

print '<a href="' . $feed . '" target="_parent">Feed Dialog</a>';

Du kannst hier klicken, um den Dialog live zu sehen.

Der Friends Dialog
Der Friends Dialog kann dazu benutzt werden, um eine Freundschaftsanfrage zu stellen. Die Basis URL für den Friends Dialog lautet:

http://www.facebook.com/dialog/friends

Dieser Dialog erwartet folgende Parameter:

Parameter	Erforderlich	Beschreibung
app_id	ja	Die ID der Facebook Anwendung, die mit diesem Dialog verknüpft ist.
redirect_uri	ja	Zu dieser URL wird der Benutzer nach dem Klicken eines Buttons weitergeleitet.
display	nein	Der Display Modus, wie der Dialog angezeigt werden soll (page, popup oder iframe). Standard ist page.
id	ja	Die Benutzer ID oder der Benutzername des Benutzers, der die Freundschaftsanfrage erhalten soll.

Ein Beispiel:

$friend = "http://www.facebook.com/dialog/friends/?"
        . "id=brent&"
        . "app_id=125209680874919&"
        . "redirect_uri=http://apps.facebook.com/atw-dialogs/redirect_uri.php";

print '<a href="' . $friend . '" target="_parent">Friend Dialog</a>';

Du kannst hier klicken, um den Dialog live zu sehen.

Der OAuth Dialog
Der OAuth Dialog ist dazu gedacht erweiterte Rechte bei einem Benutzer zu erfragen (wie das mit der Graph API geht, kannst Du im Tutorial Erweiterte Berechtigungen anfordern nachlesen).

Die Basis URL für den OAuth Dialog lautet:

http://www.facebook.com/dialog/oauth

Folgende Parameter können, bzw. müssen übergeben werden:

Parameter	Erforderlich	Beschreibung
app_id	ja	Die ID der Facebook Anwendung, die mit diesem Dialog verknüpft ist.
redirect_uri	ja	Zu dieser URL wird der Benutzer nach dem Klicken eines Buttons weitergeleitet.
display	nein	Der Display Modus, wie der Dialog angezeigt werden soll (page, popup oder iframe). Standard ist page.
scope	nein	Eine Kommaseparierte Liste von Berechtigungen. Eine vollständige Liste findest Du hier.
state	nein	Ein String der den Anwendungsstatus zwischen Request und Callback aufrecht erhält. Dieser Wert wird in der Antwort in der redirect_uri enthalten sein.
response_type	nein	Die erwartete Anwort. Entweder token (Access Token), code oder code_and_token.

Die Antwort enthält folgende Daten:

Parameter	Beschreibung
state	Siehe Parameter bei der Anfrage.
access_token	Ein gültiger OAuth 2.0 Access Token (nur, wenn bei der Anfrage nach token oder code_and_token verlangt wurde).
expires_in	Gültigkeit des Access Tokens in Sekunden.
code	Ein gültiger OAuth 2.0 Authorisierungscode (nur, wenn bei der Anfrage nach code oder code_and_token verlangt wurde).
error	Ein Error Code String (vollständige Liste).
error_description	Eine menschenlesbare Fehlerbeschreibung.

Ein Beispiel:

$oauth = "http://www.facebook.com/dialog/oauth/?"
       . "scope=email,user_birthday&"
       . "client_id=125209680874919&"
       . "redirect_uri=http://apps.facebook.com/atw-dialogs/redirect_uri.php&"
       . "response_type=token";

print '<a href="' . $oauth . '" target="_parent">Oauth Dialog</a>';

Ein Beispiel mit JavaScript
Zum Schluss noch ein Beispiel, um einen Post im Newsfeed zu veröffentlichen mittels der JavaScript SDK:

<html>
  <body>
    <script src="http://connect.facebook.net/de_DE/all.js"></script>
    <div id="fb-root"></div>
    <script>
      FB.init({appId: '125209680874919', xfbml: true, cookie: true});

      FB.ui({
          method: 'feed',
          name: 'AboutTheWeb',
          description: 'Facebook Anwendungen erstellen',
          link: 'http://www.abouttheweb.de/',
          picture: 'http://www.abouttheweb.de/wp-content/themes/abouttheweb/img/atw-meta-image.jpg'
          });
     </script>
  </body>
</html>

Bemerkungen
Wenn man aus einer IFrame Anwendung heraus automatisch zu einem Dialog weiterleiten möchte, kann es passieren, dass man folgendes zu sehen bekommt:

Das liegt daran, dass die Anwendung in einem IFrame läuft. Deswegen habe ich das Attribut target der Links auf _parent gesetzt.

Außerdem war es mir nicht möglich beim OAuth Dialog auf die redirect_uri zu gelangen, wenn man die Erteilung der Rechte verweigert. In diesem Fall wurde ich jedes Mal auf meine Profilseite weitergeleitet.

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/dialogs/

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

Trackback-URL für diesen Beitrag

http://abouttheweb.de/trackback/617

Verbesserungen der Facebook Dialoge

Trackback-URL für diesen Beitrag

Ähnliche Artikel

Florian

Fußbereich

AboutTheWeb