Notizie Open Graph sul Web

Questo documento spiega i passi fondamentali da seguire per pubblicare la tua prima notizia con Open Graph.

Prima di iniziare, devi:

Una volta completata la guida, scopri di più sui possibili passaggi successivi.

Crea un ID app Facebook

Forse hai già un ID app Facebook per il tuo progetto. Puoi usare lo stesso ID app su più piattaforme, ad es. iOS, Android e sito Web.

Se non hai ancora un ID app per il progetto, creane uno:

Crea un nuovo ID app

 
Verrà aperta una casella pop-up in cui dovrai inserire due elementi:

  • Il nome visualizzato. Si tratta del nome dell'app usato per la pubblicazione delle notizie su Facebook e per altre operazioni. Usa Guida introduttiva per Open Graph o simili.
  • Lo spazio dei nomi. Non è necessario per questa guida, lascialo vuoto.
  • La categoria. Determina il tipo di app che stai creando. Per il momento, seleziona Comunicazione.

Una volta creata l'app, ti verrà fornita una dashboard con statistiche API e utente. Da questa schermata, clicca su Impostazioni a sinistra.

Completa i seguenti campi, come mostrato nel seguente screenshot:

  • E-mail di contatto. L'indirizzo e-mail dello sviluppatore.
  • Domini dell'app. Il dominio che ospita la tua app (senza il prefisso http:// o https://).

Questo esempio riguarda una pagina Web di base, pertanto aggiungi la piattaforma Web. Clicca su Aggiungi piattaforma in fondo alla pagina e seleziona Sito Web.

Inserisci un percorso in cui memorizzare il file che verrà creato in seguito.

Una volta terminato, clicca su Salva modifiche in fondo.

Configurazione dell'app

Posiziona il seguente file nell'URI specificato nelle impostazioni descritte in precedenza.

Dovrai modificare un elemento nel file, l'ID app. Cerca "fbAppId" e sostituisci il valore con l'ID app presente in alto nella pagina Impostazioni della Dashboard gestione 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>

Pubblicazione di una notizia

Caricando l'app, dovresti visualizzare:

Effettua l'accesso, autorizza l'app a pubblicare sul tuo diario e clicca sul pulsante "Create a story...". Dovresti visualizzare un risultato simile a questo:

Noterai che il risultato è visualizzato sotto il pulsante. Se clicchi su di esso, verrà eseguito un reindirizzamento all'attività creata su Facebook. Dovresti visualizzare un risultato simile a questo:

Nota alcuni particolari relativi all'attività su Facebook:

Privacy

Il bordo esterno a righe celesti indica che il post è visibile solo a te. Quelli visibili agli amici o pubblici non mostrano il bordo, ma un'icona che sostituisce il lucchetto per indicare il tipo di condivisione. Puoi configurare la privacy dei post con il parametro privacy, incluso nel codice di esempio. Generalmente, gli sviluppatori non includono il parametro privacy, ma accettano l'impostazione predefinita dell'app per determinare la portata della condivisione.

Azioni e oggetti

La parte centrale della notizia è estremamente importante. Riporta che "A [soggetto] piace un articolo su [app]". Il "Mi piace" è stato determinato dall'API che hai usato. og.likes crea notizie relative ai "Mi piace". Se avessi usato l'API book.reads, probabilmente la notizia avrebbe riportato "..sta leggendo..." o "...ha letto...". L'API relativa ai "Mi piace", che definiamo Azione, è simile a un verbo.

Anche la parte "articolo" della notizia è estremamente importante. La pagina in questione dispone di tag che descrivono cos'è e come mostrarla su Facebook. Osservando il sorgente della pagina, puoi trovare un tag che spiega a Facebook i contenuti inclusi:

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

In questo modo Facebook sa che si tratta di un articolo e non, ad esempio, di un libro.

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

Usiamo questi tag per descrivere gli Oggetti. Gli oggetti equivalgono a nomi e sono legati alle azioni che usi. Ad esempio, books.reads può ricevere un argomento book. fitness.runs richiede un oggetto course. og.likes è un elemento speciale, poiché accetta qualsiasi oggetto.

Invio delle azioni per l'analisi

Se la tua app crea notizie, le tue azioni dovranno essere sottoposte a un'analisi. Cliccando su Analisi dell'app, a sinistra nella Dashboard gestione app, dovresti visualizzare:

Cliccando su Avvia una richiesta, dovresti visualizzare questa schermata:

Nel passaggio 3 abbiamo spiegato che le notizie sono composte da azioni e oggetti. In questo caso, la tua notizia ha usato l'azione like, che deve essere approvata (se desideri inserire la tua app nell'App Center di Facebook, è disponibile anche questa richiesta di approvazione. Nell'App Center gli utenti possono trovare le app più interessanti, prendilo in considerazione per la distribuzione della tua app quando sarà pronta).

Per completare il processo di invio, fornisci un logo (un'immagine 75 x 75 px) e un'icona (un'immagine 16 x 16 px) per l'app, istruzioni su come eseguire i test accompagnate da screenshot e un utente test creato automaticamente. Il processo di invio non ti impedirà di testare le tue modifiche, tu ed eventuali sviluppatori aggiunti sarete sempre in grado di pubblicare e testare le notizie.

Per maggiori informazioni sul processo di invio, consulta il documento Informazioni sul processo di invio Open Graph. Il documento contiene una panoramica sugli elementi analizzati da Facebook per approvare le notizie create dalla tua app. Ad esempio, fornisci linee guida precise su come usare l'azione like nell'app. Generalmente, le analisi vengono completate entro tre giorni lavorativi.

Affinché le azioni figurino nella lista di elementi da approvare, è necessario averle usate almeno una volta nell'app. Pertanto se desideri aggiungere un'azione, creane almeno una nella tua app prima dell'invio per l'approvazione.