Histórias do Open Graph na Web

Este documento descreve as etapas principais para publicar sua primeira história com Open Graph.

Antes de começar, você precisará do seguinte:

Depois de concluir este guia, você também poderá saber mais sobre possíveis próximas etapas.

Criar um número de identificação do aplicativo do Facebook

Você já pode ter um número de identificação do aplicativo do Facebook para seu projeto. Você pode usar o mesmo número de identificação do aplicativo em várias plataformas, por exemplo, iOS, Android e um site.

Se você ainda não tiver um número de identificação do aplicativo do Facebook para seu projeto, crie um:

Criar um novo número de identificação do aplicativo

 
Isso criará uma caixa pop-up que solicitará a inserção de duas coisas:

  • Um nome de exibição. Esse é o nome do aplicativo usado quando as histórias são publicadas no Facebook e em outros lugares. Use Introdução ao Open Graph ou algo semelhante.
  • Um namespace. Não é necessário para este guia, então pode deixar em branco.
  • Uma categoria. Isso determinará o tipo de aplicativo que você está criando. Por enquanto, basta selecionar Comunicação.

Depois de criar seu aplicativo, você verá um painel que mostra as estatísticas de Usuário e de API. Clique em Configurações à esquerda dessa tela.

Preencha os seguintes campos, conforme mostrado na captura de tela abaixo:

  • Email de contato. Seu endereço de email de desenvolvedor.
  • Domínios do aplicativo. O domínio em que seu aplicativo será hospedado (sem o prefixo http:// ou https://).

Esse exemplo é uma página da Web básica; portanto, você precisará adicionar a Web como plataforma. Clique em Adicionar plataforma na parte inferior da página e selecione Site.

Insira um caminho para armazenar seu arquivo, que será dado a você abaixo.

Depois de concluído, clique em Salvar Alterações na parte inferior.

Configurar o aplicativo

Coloque o arquivo a seguir no URI que você especificou nas configurações acima.

Você deve alterar um item no arquivo, que é o número de identificação do aplicativo. Procure 'fbAppId' no arquivo e substitua seu valor com o número de identificação do aplicativo listada no início da página Configurações no Painel de Aplicativos.

<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 uma história

Ao carregar o aplicativo, você deve ver o seguinte:

Entre, autorize o aplicativo a publicar na sua Linha do Tempo e clique no botão “Criar uma publicação...”. Você deve ver algo assim:

Observe que o resultado está listado abaixo do botão. Se você clicar nele, será levado para a atividade que foi criada no Facebook. Ele deve ficar assim:

Observe alguns pontos em relação à atividade no Facebook:

Privacidade

A borda tracejada em azul claro indica que a publicação só pode ser vista por você. Uma publicação visível para amigos ou pública não terá uma borda, mas terá um ícone para substituir o cadeado e indicar a abrangência do compartilhamento. Você pode definir a privacidade de uma publicação com o parâmetro privacy incluído no código de demonstração. Os desenvolvedores normalmente não incluem um parâmetro privacy e deixam a privacidade padrão do aplicativo definir a abrangência do compartilhamento.

Ações e objetos

A parte central da história é muito importante. Ela diz que “[sujeito] curtiu um artigo em [aplicativo]”. As 'curtidas' foram geradas pela API que você usou. og.likes cria histórias de curtidas. Se você usou a API book.reads, a história provavelmente diria algo como "... está lendo..." ou "... leu...". A API de curtida, que chamamos de Ação, é mais ou menos o mesmo que um verbo.

A parte do “artigo” da história é muito importante. A página mencionada tem marcações que descrevem o que ela é e como deve ser exibida no Facebook. Se você olhar a origem da página, verá que ela contém uma marcação que mostra ao Facebook o tipo de conteúdo que ela tem:

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

É assim que o Facebook sabe que é um artigo em vez de, por exemplo, um livro.

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

Essas marcações são o que usamos para descrever Objetos. Objetos são mais ou menos equivalentes a substantivos. Os objetos estão ligados às ações que você usa. Por exemplo, books.reads pode receber um argumento book. fitness.runs requer um objeto course. og.likes é especial no sentido de que pode aceitar qualquer objeto.

Enviar suas ações para análise

Se o aplicativo criará histórias, suas ações exigirão análise. Clique em Análise do Aplicativo à esquerda do Painel de Aplicativos para ver algo assim:

Clique em Iniciar um envio para ver uma tela com esta aparência:

Na Etapa 3, falamos sobre como as publicações são feitas de ações e objetos. Neste caso, sua história usou a ação like e é isso que precisa de aprovação. A aprovação da Central de Aplicativos estará disponível se você quiser enviar seu aplicativo para a Central de Aplicativos do Facebook. A Central de Aplicativos é onde as pessoas encontram aplicativos interessantes e é algo que você deve levar em conta para impulsionar a distribuição de seu aplicativo quando ele estiver pronto.

Para concluir o processo de envio, você precisa fornecer um logotipo para o aplicativo (uma imagem de 75 x 75 pixels) e um ícone para o aplicativo (uma imagem de 16 x 16 pixels), instruções para testá-lo com capturas de tela e um usuário de teste criado automaticamente. O processo de envio não deve impedir sua capacidade de testar suas próprias alterações, já que você e outros desenvolvedores de seu aplicativo podem sempre publicar e testar suas próprias histórias.

Se quiser saber mais sobre o processo de envio, veja nosso documento Como compreender o processo de envio de Open Graph. Ele oferece instruções gerais sobre o que o Facebook quer ver para aprovar as histórias que os aplicativos podem criar. Como um pequeno exemplo, forneça orientações específicas sobre como usar a ação like em seu aplicativo. Normalmente, concluímos as análises em três dias úteis.

As ações não aparecerão na lista para aprovação enquanto você não as usar pela primeira vez no aplicativo. Quando estiver pronto para adicionar, você precisará criar pelo menos uma ação em seu aplicativo antes de enviá-lo para aprovação.