Actualités Open Graph sur le web

Ce document décrit les étapes clés pour publier votre première actualité avec Open Graph.

Avant de démarrer, vous devez :

Lorsque vous aurez fini de consulter ce guide, vous pourrez également découvrir les éventuelles étapes suivantes.

créer un ID d’app Facebook ;

Vous avez peut-être déjà un ID d’app Facebook pour votre projet. Vous pouvez utiliser le même ID d’app sur plusieurs plates-formes, telles qu’iOS, Android et un site web.

Si vous n’avez pas encore d’ID d’app Facebook pour votre projet, vous devez d’abord en créer un :

Créer un nouvel ID d’app

 
Cette action crée une fenêtre contextuelle qui vous invite à saisir les éléments suivants :

  • Un nom d’affichage : il s’agit du nom de l’app utilisé lorsque des actualités sont publiées sur Facebook et dans d’autres endroits. Utilisez Démarrage avec Open Graph ou un nom similaire.
  • Un espace de noms : laissez ce champ vide, puisqu’il n’est pas requis dans ce guide.
  • Une catégorie : celle-ci détermine le type d’app que vous créez. Pour le moment, sélectionnez simplement Communication.

Lorsque vous avez créé votre app, vous disposez d’un tableau de bord qui affiche Utilisateur et Statistiques de l’API. Cliquez sur Paramètres sur la gauche de cet écran.

Remplissez les champs suivants, comme le montre la capture d’écran ci-dessous :

  • Adresse e-mail : votre adresse e-mail en tant que développeur.
  • Domaines de l’app : le domaine sur lequel votre app sera hébergée (sans le préfixe http:// ou https://).

Cet exemple est une page web basique, vous devez donc ajouter le web en tant que plate-forme. Cliquez sur Ajouter une plateforme au bas de la page et sélectionnez Site web.

Saisissez un chemin d’accès à l’emplacement où vous souhaitez stocker votre fichier, comme le montre l’exemple ci-dessous.

Lorsque vous avez fini, cliquez sur Enregistrer les modifications au bas de la page.

Configurer l’app

Placez le fichier suivant à l’URI que vous avez indiqué dans les paramètres ci-dessus.

Dans le fichier, vous devez changer un élément : l’ID d’app. Recherchez « fbAppId » dans le fichier et remplacez sa valeur par l’ID d’app qui figure en haut de la page Paramètres dans l’Espace App.

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

Publier une actualité

Si vous chargez l’app, vous devez voir ce qui suit :

Connectez-vous, autorisez l’app à publier dans votre journal et cliquez sur le bouton Créer une actualité… Vous devriez voir une fenêtre comme celle-ci :

Vous remarquerez que le résultat figure en dessous du bouton. Si vous cliquez dessus, il vous redirige vers l’activité créée sur Facebook. Le résultat devrait ressembler à ceci :

Notez les éléments suivants concernant l’activité sur Facebook :

Confidentialité

La bordure en pointillés bleu clair indique que la publication n’est visible que par vous. Une publication visible par les amis et le public n’a pas de bordure, mais une icône qui indique le partage à la place du cadenas. Vous pouvez régler la confidentialité d’une publication à l’aide du paramètre de confidentialité inclus dans le code de démonstration. Généralement, les développeurs n’ajoutent pas de paramètre de confidentialité, mais laissent plutôt la confidentialité par défaut de l’app déterminer le partage.

Actions et objets

La partie centrale de l’actualité est très importante. Elle indique que le « [sujet] aime un article sur [app] ». L’élément « aime » a été généré par l’API que vous avez utilisée. og.likes crée des actualités de mention J’aime. Si vous aviez plutôt utilisé l’API book.reads, l’actualité aurait probablement indiqué « …est en train de lire… » ou « …a lu… ». L’API de mention J’aime, que nous appelons une action, est à peu près l’équivalent d’un verbe.

La partie « article » de l’actualité est également très importante. La page en question possède des balises qui décrivent de quoi il s’agit et la façon dont elle doit s’afficher sur Facebook. Si vous examinez la source de la page, vous verrez qu’elle contient une balise qui renseigne Facebook sur le type de contenu dont il s’agit :

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

C’est ainsi que Facebook sait qu’il s’agit d’un article, mais pas d’un livre par exemple.

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

Nous utilisons ces balises pour décrire des objets. Les objets sont à peu près l’équivalent de noms. Ils sont étroitement liés aux actions que vous utilisez. Par exemple, books.reads peut accepter un argument book. fitness.runs nécessite un objet course. og.likes est spécial car il peut accepter n’importe quel objet.

Demander la certification de vos actions

Si votre app est conçue pour créer des actualités, vos actions nécessitent une certification. Cliquez sur Examen des apps sur le côté gauche de l’Espace App. Vous devriez voir une fenêtre qui ressemble à ceci :

Cliquez sur Démarrer une demande pour afficher un écran similaire à celui-ci :

À l’étape 3, nous avons expliqué que les actualités sont constituées d’actions et d’objets. Dans ce cas, votre actualité a utilisé l’action like et c’est cette dernière qui requiert une approbation. (L’approbation de l’Espace Apps est également à votre disposition si vous souhaitez soumettre votre app à l’Espace Apps de Facebook. Celui-ci permet aux personnes de trouver des apps intéressantes, et vous devez en tenir compte pour accroître la distribution de votre app lorsque vous êtes prêt.)

Pour terminer le processus de demande de certification, vous devez fournir un logo de l’app (une image de 75 x 75 px), une icône de l’app (une image de 16 x 16 px), les instructions sur la manière de la tester étayées par des captures d’écran, ainsi qu’un utilisateur test créé automatiquement. Le processus de demande de certification ne doit pas vous empêcher de tester vos propres changements, puisque vous et toute autre personne ajoutée en tant que développeur pouvez toujours publier et tester vos propres actualités.

Pour en savoir plus sur le processus de demande de certification, consultez notre document intitulé Comprendre le processus de soumission Open Graph. Il propose des directives générales sur ce que Facebook recherche lors de l’approbation des actualités que les apps peuvent créer. Par exemple, il offre des directives spécifiques sur la manière d’utiliser l’action like dans votre app. Les certifications sont généralement traitées sous trois jours ouvrables.

Une action ne s’affiche dans la liste des éléments à approuver que lorsque vous l’avez utilisée une fois depuis votre app. Par conséquent, lorsque vous êtes prêt à ajouter votre propre action, vous devez créer au moins une action depuis votre app avant de pouvoir demander son approbation.