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:

Una vez que hayas completado esta guía, puedes obtener más información sobre posibles siguientes pasos.

Crea 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, primero debes crear uno:

Crear un 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 Primeros pasos con Open Graph o algo por el estilo.
  • Un espacio de nombres: no es obligatorio para esta guía, por lo 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 API. En esta pantalla, haz clic en Configuración en la parte izquierda.

Completa los siguientes campos, tal y como se muestra en la captura de pantalla a continuación:

  • Correo electrónico de contacto: dirección de correo electrónico de tu desarrollador.
  • Dominios de la aplicación: 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 agregar la web como plataforma. Haz clic en Agregar 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 la URI que especificaste en la configuración anterior.

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 = "//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, debería 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...". Debería 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 creó en Facebook. Debe tener el siguiente aspecto:

Debes tener en cuenta algunas cosas acerca de 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 bloqueo, con el fin de indicar el tamaño del público entre el que se comparten. Puedes definir la privacidad de una publicación mediante el parámetro correspondiente, incluido con 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 tamaño del público entre el que se comparte algo.

Acciones y objetos

La parte central de la historia es muy importante. Afirma que "A [sujeto] le gusta un artículo de [aplicación]". El "le gusta" lo generó la API que utilizaste. og.likes crea historias relacionadas con Me gusta. Si hubieses utilizado la API book.reads, es probable que la historia hubiese afirmado algo parecido a "está leyendo..." o "leyó...". La API de Me gusta, a la que denominamos acción, viene a ser lo mismo que un verbo.

La parte de la historia relativa a "artículo" es también muy importante. La página en cuestión tiene etiquetas que describen qué es 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 a Facebook el tipo de contenido del que se trata:

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

Esta etiqueta permite a Facebook saber 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 más o menos a los nombres. Los objetos 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 en cuanto puede aceptar cualquier objeto.

Someter 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 tercer paso hablamos de que las historias se componen de acciones y objetos. En este caso, tu historia utilizó la acción like, que es lo que debe aprobarse. (Si quieres, puedes someter tu aplicación a la aprobación del centro de aplicaciones de Facebook. El centro de aplicaciones es un espacio en el que los usuarios pueden encontrar aplicaciones interesantes, por lo que deberías tenerlo en cuenta como herramienta para distribuir tu aplicación una vez que esté lista).

Para completar el proceso de solicitud, debes proporcionar un logotipo (imagen de 75 × 75 píxeles) y un icono (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 agregues como desarrollador pueden publicar y probar en todo momento sus propias historias.

Si quieres obtener más información sobre el proceso de solicitud, consulta nuestro documento Introducción al proceso de solicitud de Open Graph. Este documento proporciona directrices sobre lo que busca Facebook a la hora de aprobar 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 muestran en la lista de aprobación hasta que no las hayas utilizado al menos una vez en tu aplicación. Por lo tanto, cuando estés listo, deberás crear al menos una acción desde tu aplicación para poder someterla a aprobación.

Próximos pasos

A continuación figuran los pasos que puedes dar en lo sucesivo para seguir familiarizándote con Open Graph: