Historias de Open Graph en la web

En este documento se describen los pasos principales para publicar tu primera historia con Open Graph.

Antes de empezar, tendrás que:

Si lo deseas, una vez que hayas completado esta guía, obtén más información sobre los pasos siguientes que puedes realizar.

Crear un identificador de la aplicación de Facebook.

Es posible que ya tengas un identificador de la aplicación de Facebook para tu proyecto. Puedes utilizar el mismo identificador de la aplicación en varias plataformas (por ejemplo, iOS, Android y un sitio web).

Si todavía no tienes un identificador de la aplicación de Facebook para tu proyecto, debes crear uno:

Crear un nuevo identificador de la aplicación

 
Se abrirá un cuadro emergente, que te pedirá que especifiques tres cosas:

  • Un nombre para mostrar: este es el nombre de aplicación que se utilizará cuando se publiquen historias en Facebook y en otros lugares. Utiliza la guía Primeros pasos con Open Graph u otra similar.
  • Un espacio de nombres: no es obligatorio en esta guía, así que déjalo en blanco.
  • Una categoría: determinará el tipo de aplicación que vas a crear. Por ahora, selecciona simplemente Comunicación.

Una vez que hayas creado tu aplicación, se abrirá un panel con estadísticas de usuario y la API. En la parte izquierda de esta pantalla, haz clic en Configuración.

Rellena los siguientes campos, tal y como se muestra en esta captura de pantalla:

  • “Correo electrónico de contacto”: tu dirección de correo electrónico de desarrollador.
  • “Dominios de aplicaciones”: dominio en el que se hospedará tu aplicación (sin los prefijos “http://” ni “https://”).

Este ejemplo representa una página web básica, por lo que tendrás que añadir internet como plataforma. Haz clic en Añadir plataforma en la parte inferior de la página y selecciona Sitio web.

Especifica la ruta en la que quieras que se almacene tu archivo, que se te proporcionará a continuación.

Cuando hayas terminado, haz clic en Guardar cambios en la parte inferior.

Configurar la aplicación

Coloca el siguiente archivo en el URI que has especificado en los ajustes anteriores.

En el archivo, tienes que cambiar un elemento, esto es, el identificador de la aplicación. Busca “fbAppId” en el archivo y sustituye su valor por el identificador de la aplicación que figura en la parte superior de la página Configuración del panel de aplicaciones.

<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 = "https://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>

Publicar una historia

Si cargas la aplicación, aparecerá lo siguiente:

Inicia sesión, autoriza a la aplicación para que publique en tu biografía y haz clic en el botón “Crear una historia...”. Aparecerá algo similar a lo siguiente:

Observa que el resultado aparece debajo del botón. Si haces clic en él, te llevará a la actividad que se ha creado en Facebook. El resultado debería ser similar a esto:

Debes tener en cuenta los siguientes aspectos sobre la actividad en Facebook:

Privacidad

El borde externo discontinuo de color azul claro indica que eres el único que puede ver la publicación. Las publicaciones visibles para amigos o el público en general no tendrán borde, aunque sí un icono en lugar del candado, con el fin de indicar con qué público se comparten. Puedes definir la privacidad de una publicación mediante el parámetro correspondiente, incluido en el código de demostración. Los desarrolladores no suelen incluir un parámetro de privacidad, sino que permiten que la privacidad predeterminada de la aplicación dicte el público con el que se comparte el contenido.

Acciones y objetos

La parte central de la historia es muy importante. Afirma que “A [sujeto] le gusta un artículo en [aplicación]”. El “le gusta” lo ha generado la API que has utilizado. og.likes crea historias relacionadas con los Me gusta. Si hubieses utilizado la API de book.reads, es probable que la historia hubiese afirmado algo parecido a “...está leyendo...” o “...ha leído...”. La API de Me gusta, a lo que denominamos acción, es precisamente el verbo de la historia.

La parte de la historia relativa a “artículo” es también muy importante. La página en cuestión tiene etiquetas que describen de qué tipo de contenido se trata y cómo debe mostrarse en Facebook. Si observas el código fuente de la página, verás que contiene una etiqueta que indica el tipo de contenido a Facebook:

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

Esta etiqueta permite saber a Facebook que se trata de un artículo y no, por ejemplo, de un libro.

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

Estas etiquetas se utilizan para describir objetos. Los objetos equivalen a los sustantivos que aparecen en la historia y están estrechamente relacionados con las acciones que utilizas. Por ejemplo, books.reads puede tomar un argumento book. fitness.runs requiere un objeto course. og.likes es especial, ya que acepta cualquier objeto.

Enviar tus acciones a revisión

Si tu aplicación va a crear historias, tus acciones deben pasar una revisión. Haz clic en Revisión de la aplicación en el lado izquierdo del panel de aplicaciones para que aparezca algo parecido a lo siguiente:

Haz clic en Iniciar una solicitud; aparecerá una pantalla como la siguiente:

En el paso 3, hemos hablado de que las historias se componen de acciones y objetos. En este caso, tu historia ha utilizado la acción like, que es lo que debe aprobarse. De manera opcional, también puedes someter tu aplicación a la aprobación del centro de aplicaciones de Facebook. Se trata de un espacio en el que las personas pueden encontrar aplicaciones interesantes, por lo que puede resultarte útil como herramienta para distribuir tu aplicación una vez que esté lista.

Para completar el proceso de solicitud, debes proporcionar un logotipo (una imagen de 75 × 75 píxeles) y un icono (una imagen de 16 × 16 píxeles) de la aplicación, instrucciones con capturas de pantalla sobre cómo probarla y un usuario de prueba creado automáticamente. El proceso de solicitud no debe impedirte probar tus propios cambios, ya que tú y la persona que añadas como desarrollador podéis publicar y probar en todo momento vuestras propias historias.

Si quieres obtener más información sobre el proceso de solicitud, consulta nuestro documento de introducción al proceso de solicitud de Open Graph. Este documento proporciona directrices sobre todo el proceso y los requisitos necesarios para que Facebook apruebe las historias que pueden crear las aplicaciones. Por ejemplo, debes proporcionar indicaciones concretas sobre cómo utilizar la acción like en tu aplicación. Normalmente, las revisiones se realizan en un plazo de tres días laborables.

Las acciones no se mostrarán en la lista de aprobación hasta que las hayas utilizado al menos una vez en la aplicación. Por lo tanto, cuando estés listo, deberás crear al menos una acción desde tu aplicación para poder solicitar la aprobación.

Siguientes pasos

Estos son los pasos que puedes realizar a continuación para seguir familiarizándote con Open Graph: