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.
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.
Florian
Mi, 02/02/2011 - 12:53Hallo!
Vielen Dank für diese tolle Anleitung. Hat mir sehr geholfen.