Open Graph-Meldungen im Web

In diesem Dokument werden die wichtigsten Schritte zur Veröffentlichung deiner ersten Meldung mit Open Graph beschrieben.

Bevor du beginnst, musst du ...:

Nach Abschluss dieses Leitfadens findest du hier Informationen zu möglichen nächsten Schritten.

eine Facebook-App-ID erstellen

Du verfügst möglicherweise bereits über eine Facebook-App-ID für dein Projekt. Du kannst über mehrere Plattformen hinweg, wie z. B. iOS, Android oder eine Website, dieselbe App-ID verwenden.

Wenn du noch keine Facebook-App-ID für dein Projekt hast, musst du zunächst eine erstellen:

Erstelle eine neue App-ID

 
Hierdurch wird ein Pop-up-Fenster geöffnet, in dem du zwei Informationen eingeben musst:

  • Einen Anzeigenamen. Hierbei handelt es sich um den App-Namen, der verwendet wird, wenn Meldungen auf Facebook und an einer Reihe anderer Orte veröffentlicht werden. Verwende Open Graph – Erste Schritte oder eine ähnliche Dokumentation.
  • Einen Namespace. Dieser ist für diesen Leitfaden nicht erforderlich, das Feld kannst du also leer lassen.
  • Eine Kategorie. Dieser Wert bestimmt die Art der App, die du erstellst. Für unser Beispiel wählen wir Kommunikation aus.

Sobald die App erstellt wurde, wird dir ein Dashboard angezeigt, das Nutzer- und API-Statistiken anzeigt. Klicke links auf diesem Bildschirm auf Einstellungen.

Fülle folgende Felder wie unten im Screenshot aus:

  • Kontakt-E-Mail. Deine Entwickler-E-Mai-Adresse.
  • App Domains. Die Domain, unter der deine App gehostet wird (ohne „http://“ oder „https://“).

In unserem Beispiel handelt es sich um eine einfache Webseite, wir müssen also „Web“ als Plattform hinzufügen. Klicke am unteren Rand der Seite auf Plattform hinzufügen und anschließend auf Webseite.

Gib den Pfad ein, unter dem du deine Datei speichern möchtest. Dieser ist unten angegeben.

Wenn du fertig bist, klicke unten auf Änderungen speichern.

Einrichten der App

Lege folgende Datei unter der zuvor in den Einstellungen festgelegten URI ab.

In der Datei musst du ein Element ändern: die App-ID. Suche in der Datei nach „fbAppId“ und ersetze den Wert durch die App-ID, die oben auf der Seite Einstellungen des App-Dashboards angezeigt wird.

<html>
<head>
<title>Open Graph Getting Started App - og.likes</title>
<style type="text/css">
div { padding: 10px; }
</style>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
  // You probably don't want to use globals, but this is just example code
  var fbAppId = 'replace me';
  var objectToLike = 'http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/';

  // This check is just here to make sure you set your app ID. You don't
  // need to use it in production. 
  if (fbAppId === 'replace me') {
    alert('Please set the fbAppId in the sample.');
  }

  /*
   * This is boilerplate code that is used to initialize
   * the Facebook JS SDK.  You would normally set your
   * App ID in this code.
   */

  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : fbAppId, // App ID
      status     : true,    // check login status
      cookie     : true,    // enable cookies to allow the
                            // server to access the session
      xfbml      : true,     // parse page for xfbml or html5
                            // social plugins like login button below
      version     : 'v2.7',  // Specify an API version
    });

    // Put additional init code here
  };

  // Load the SDK Asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  /*
   * This function makes a call to the og.likes API.  The
   * object argument is the object you like.  Other types
   * of APIs may take other arguments. (i.e. the book.reads
   * API takes a book= argument.)
   *
   * Because it's a sample, it also sets the privacy
   * parameter so that it will create a story that only you
   * can see.  Remove the privacy parameter and the story
   * will be visible to whatever the default privacy was when
   * you added the app.
   *
   * Also note that you can view any story with the id, as
   * demonstrated with the code below.
   *
   * APIs used in postLike():
   * Call the Graph API from JS:
   *   https://developers.facebook.com/docs/reference/javascript/FB.api
   * The Open Graph og.likes API:
   *   https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
   * Privacy argument:
   *   https://developers.facebook.com/docs/reference/api/privacy-parameter
   */

  function postLike() {
    FB.api(
       'https://graph.facebook.com/me/og.likes',
       'post',
       { object: objectToLike,
         privacy: {'value': 'SELF'} },
       function(response) {
         if (!response) {
           alert('Error occurred.');
         } else if (response.error) {
           document.getElementById('result').innerHTML =
             'Error: ' + response.error.message;
         } else {
           document.getElementById('result').innerHTML =
             '<a href=\"https://www.facebook.com/me/activity/' +
             response.id + '\">' +
             'Story created.  ID is ' +
             response.id + '</a>';
         }
       }
    );
  }
</script>

<!--
  Login Button

  https://developers.facebook.com/docs/reference/plugins/login

  This example needs the 'publish_actions' permission in
  order to publish an action.  The scope parameter below
  is what prompts the user for that permission.
-->

<div
  class="fb-login-button"
  data-show-faces="true"
  data-width="200"
  data-max-rows="1"
  data-scope="publish_actions">
</div>

<div>
This example creates a story on Facebook using the
<a href="https://developers.facebook.com/docs/reference/ogaction/og.likes">
<code>og.likes</code></a> API.  That story will just say
that you like an
<a href="http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/">
article on TechCrunch</a>.  The story should only
be visible to you.
</div>

<div>
<input
  type="button"
  value="Create a story with an og.likes action"
  onclick="postLike();">
</div>

<div id="result"></div>

</body>
</html>

Veröffentlichen einer Meldung

Wenn du die App lädst, sollte Folgendes angezeigt werden:

Melde dich an, autorisiere die App zum Posten in deiner Chronik und klicke auf den Button „Eine Meldung erstellen“. Anschließend sollte ein Bildschirm wie der Folgende angezeigt werden:

Beachte, dass das Ergebnis unterhalb des Buttons aufgeführt ist. Wenn du darauf klickst, wirst du zur Aktivität umgeleitet, die auf Facebook erstellt wurde. Hierdurch sollte ein Bildschirm wie der Folgende angezeigt werden:

Bezüglich der Aktivität auf Facebook sind einige Dinge zu beachten:

Privatsphäre

Die hellblaue gestrichelte Umrandung gibt an, dass der Beitrag nur für dich sichtbar ist. Ein Beitrag, der für Freunde oder die Öffentlichkeit sichtbar ist, verfügt nicht über eine Umrandung. Er verfügt jedoch über ein Symbol, das das Schloss ersetzt und angibt, in welchem Ausmaß der Beitrag geteilt wird. Du kannst die Privatsphäre eines Beitrags mit dem „privacy“-Parameter (im Beispielcode enthalten) festlegen. Entwickler verwenden für gewöhnlich keinen „privacy“-Parameter, sondern überlassen es der standardmäßigen Privatsphäre der App, festzulegen, in welchem Ausmaß etwas geteilt wird.

Handlungen und Objekte

Der Hauptteil der Meldung ist sehr wichtig. Hier steht „[Person] gefällt ein Artikel in [App]“. Das „gefällt“ wurde durch die von dir verwendete API generiert. og.likes erstellt „Gefällt mir”-Meldungen. Hättest du hier stattdessen die book.reads-API verwendet, würde die Meldung „... liest gerade ...“ oder „... liest ...“ lauten. Die Like API, die wir als Handlung bezeichnen, ähnelt grob einem Verb.

Auch der „Artikel“-Teil der Meldung ist sehr wichtig. Die entsprechende Seite verfügt über Tags, die beschreiben, worum es sich bei der Seite handelt und wie sie auf Facebook angezeigt werden sollte. Wenn du dir die Quelle für die Seite ansiehst, erkennst du, dass sie ein Tag enthält, das Facebook mitteilt, um welche Art von Inhalt es sich handelt:

<meta property="og:type" content="article" />

So weiß Facebook, dass es sich um einen Artikel und beispielsweise nicht etwa um ein Buch handelt.

<meta property="og:type" content="book" />

Diese Tags nutzen wir, um Objekte zu beschreiben. Objekte ähneln grob Nomen. Sie sind eng mit den von dir verwendeten Handlungen verbunden. Beispiel: books.reads kann ein book-Argument akzeptieren. fitness.runs erfordert ein course-Objekt. og.likes hat eine Sonderstellung, da es jedes Objekt akzeptieren kann.

Einreichen deiner Handlungen zur Überprüfung

Wenn deine App Meldungen erstellt, erfordern die von dir genutzten Handlungen eine Überprüfung. Klicke links im App-Dashboard auf App Review. Daraufhin sollte ein Bildschirm wie der Folgende angezeigt werden:

Klicke auf Einreichen, um folgenden Bildschirm zu öffnen:

In Schritt 3 haben wir behandelt, dass Meldungen aus Handlungen und Objekten bestehen. In diesem Fall verwendet deine Meldung die like-Handlung. Diese müssen wir zur Genehmigung einreichen. (Die Genehmigung durch das App Center ist einzuholen, wenn du deine App im App Center von Facebook einreichen möchtest. Im App Center finden Nutzer interessante Apps – wenn du die Verbreitung deiner App steigern möchtest, solltest du in Betracht ziehen, sie im App Center zu präsentieren.)

Um den Überprüfungsprozess abzuschließen, musst du ein App-Logo (Bild mit 75 x 75 Pixel), ein App-Symbol (Bild mit 16 x 16 Pixel) sowie Anweisungen zum Testen deiner App samt Screenshots und einem automatisch erstellten Testnutzer bereitstellen. Das Einreichungsverfahren sollte die Möglichkeit, deine eigenen Änderungen zu testen, nicht blockieren, da du und andere Personen, die du als Entwickler hinzufügst, immer eigene Meldungen posten und testen können.

Weitere Informationen zum Einreichungsverfahren findest du im Dokument Verstehen des Open Graph-Einreichungsverfahrens. Dieses Dokument enthält umfassende Informationen dazu, welche Punkte Facebook beim Genehmigen von durch Apps erstellten Meldungen beachtet. Hierbei ist beispielsweise die Erforderlichkeit spezifischer Anweisungen zur Verwendung der like-Handlung in deiner App zu erwähnen. Wir schließen Überprüfungen für gewöhnlich innerhalb von drei Werktagen ab.

Handlungen werden erst in der Genehmigungsliste angezeigt, wenn du sie mindestens einmal in deiner App verwendet hast. Wenn du also bereit bist, deine eigenen Handlungen hinzuzufügen, musst du mindestens eine Handlung aus deiner App erstellen, bevor du sie zur Genehmigung einreichen kannst.