13
Dez
2010
admin

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://www.abouttheweb.de/trackback/617

Ähnliche Artikel

Bild des Benutzers Florian
Florian
Mi, 02/02/2011 - 12:53

Hallo!

Vielen Dank für diese tolle Anleitung. Hat mir sehr geholfen.

X
Laden