sexta-feira, 17 de maio de 2013

Como criar uma aba no Facebook e pegar os dados dos usuário no aplicativo

Extraído de: http://blog.hubspot.com/blog/tabid/6307/bid/26330/How-to-Create-Custom-Tabs-for-Facebook-Business-Pages.aspx

Passo 1: Faça login como Desenvolvedor

Faça login como desenvolvedor no Facebook em : https://developers.facebook.com/apps

Passo 2: Crie e nomeie seu novo aplicativo

Clique em "Criar um novo aplicativo" no canto superior esquerdo. Você precisa fornecer um "Display Name", que é como seu "app", ou guia, será chamado. Você também precisa criar um "namespace", que é basicamente apenas um ID único para o seu aplicativo.
create new facebook app

Passo 3: Escolha uma imagem e atualizar informações básicas para a App


Escolha uma imagem e um ícone para o seu guia personalizado. Lembre-se, isso vai exibir no topo da sua página do Facebook, então pense nisso como um call-to-action. Escolha uma imagem que vai receber seus visitantes ao clicar!

Atualize suas informações básicas com o nome de domínio e categoria. Você também pode fazer upload de uma imagem personalizada para o seu aplicativo, clicando em "ícone de edição."

basic info


Passo 4: Criar o conteúdo que será exibido dentro da aba do aplicativo


Agora crie uma página da web fora do Facebook. Isto é o que será exibido dentro de sua guia personalizado Facebook. Para garantir o conteúdo da página exibida corretamente no Facebook, certifique-se que a largura da sua página web esteja configurado para 100%, 520px ou 810px. Certifique-se de todas as imagens, vídeos, etc, que você incluir em sua página são menos do que qualquer 520px ou 810px, dependendo de quão grande você escolheu para fazer o conteúdo da sua guia.

facebook screenshot


Para se certificar de que todos podem ver o sua nova guia da página do Facebook, você também precisará fornecer uma URL segura. Esta deve ser a mesma URL que você forneceu para o separador de página, mas com "https://" em vez de "http://" na frente. Se o seu site não suporta https, o aplicativo ainda funciona para quem tem a navegação segura desativada em suas configurações do Facebook, mas você deve obter um certificado SSL. 

Salve as alterações que você fez para o app.


Passo 5: Diga Facebook o conteúdo que você deseja exibir no seu guia Personalizar


Volte para suas configurações de aplicativos em developers.facebook.com, desça até a opção "Selecionar como seu aplicativo se integra com Facebook" seção, e escolha "Page Tab",  nomeie do seu guia que você gostaria, então copie a URL da página que você criou no passo 4, e cole a URL em "Página Tab URL".


page tab


Para se certificar de que todos podem ver o sua nova guia da página do Facebook, você também precisará fornecer uma URL segura. Esta deve ser a mesma URL que você forneceu para o separador de página, mas com "https://" em vez de "http://" na frente. Se o seu site não suporta https, o aplicativo ainda funciona para quem tem navegação segura desativada em suas configurações do Facebook, mas você deve olhar para obter um certificado SSL.

Salve as alterações que você fez para o app.

Passo 6: Adicione o seu guia para sua página do Facebook 


Este passo pode ser um pouco complicado, então leia com atenção. Para instalar sua guia nova em sua página de negócios, você precisa visitar um link com vários parâmetros de URL personalizada. O link é: 

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL 

Você vai precisar de substituir os termos em negrito na URL acima. "YOUR_APP_ID" e "YOUR_URL" com algumas informações que o Facebook oferece para o seu aplicativo, o ID do seu aplicativo e a url do seu site.

facebook summary


Passo 7: Página que será renderizada na aba e channel file

Channel File

Crie um arquivo com o conteúdo abaixo que será utilizado na página da sua aba:

<?php

  $cache_expire = 60*60*24*365;
  header("Pragma: public");
  header("Cache-Control: maxage=".$cache_expire);
  header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>

Se não tiver trabalhando com php, pode criar um arquivo apenas com o script do facebook, o php acima serve apenas para controle de cache, ou pode fazer da forma que sua linguagem assim permitir.

Conteúdo da aba:

Na sua página que se hospedará externamente ao facebook, insira os códigos abaixo, subistituindo os devidos valores:

Antes de fechar a tag HEAD:

<meta property="og:title" content="TITULO" />
<meta property="og:url" content="<?=$url?>/" />
<meta property="og:type"        content="company" />
<meta property="og:site_name"   content="TITULO DO SITE" />
<meta property="og:description" content="DESCRICAO" />
<meta property="fb:app_id"      content="ID DO APLICATIVO" />
<meta property="og:image"       content="https://URL DA THUMB/thumb.jpg" />

Logo depois da abertura da tag BODY:

<!-- Facebook JS SDK -->
<div id="fb-root"></div>
<script>
 // Additional JS functions here
 window.fbAsyncInit = function() {
  FB.init({
    appId      : 'ID DO APLICATIVO', // App ID
    channelUrl : '//CHANNEL FILE', // Channel File ex: 'SEU SITE/channel.php'
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });

  // Additional init code here
  FB.getLoginStatus(function(response) {
   if (response.status === 'connected') {
    // connected
    //alert('usuario já autorizou a aplicacao');
    //console.log(JSON.stringify(response));

    FB.api('/me', function(response){
     //DADOS ESTARÃO TODOS NO RESPONSE
     // Ex:
     // NOME = response.name
    });

   } else if (response.status === 'not_authorized') {
    // not_authorized
    login();
   } else {
    // not_logged_in
    login();
   }
  });
 };

 function login() {
  FB.login(function(response) {
   if (response.authResponse) {
    // connected
    FB.api('/me', function(response) {
     location.reload();
    });
   } else {
    // cancelled
    //alert("Usuário Cancelou");
   }
  },{scope: 'email'});
 }

 function postToWall() {
  FB.login(function(response) {
    if (response.authResponse) {
   FB.ui({
    method: 'feed',
    name: 'NOME',
    link: 'LINK DO SEU APLICATIVO', // EX: https://www.facebook.com/SUA PAGINA/app_(ID DO APLICATIVO)';
    picture: 'URL DA FOTO DO POST',
    caption: 'LEGENDA',
    description: 'DESCRICAO/TEXTO DO POST'
   },
   function(response) {
     if (response && response.post_id) {
    //alert('Post was published.');
     } else {
    //alert('Post was not published.');
     }
   });
    } else {
   //alert('User cancelled login or did not fully authorize.');
    }
  }, {scope: 'publish_stream'});
  return false;
 }

 // Load the SDK Asynchronously
 (function(d){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
 }(document));

Considerações:

  • O que acontece na verdade depois de tudo isso é que sua página será executada dentro de um iframe do facebook, e graças a isso, é possível fazer tudo que uma página normal faz: upload, persistência em banco de dados, ajax, etc.
  • O SSL se faz ncessário, pois caso não exista, apenas usuários que desabilitaram esta opção nas configurações do facebook poderão ver o aplicativo, sendo que muitos não fazem ideia de onde isso fica, e nem o que faz.
  • A função de login, solicita além dos dados publicos (nome, lista de amigos, etc) o eemail da pessoa. Para mais permissões, consulte https://developers.facebook.com/docs/reference/login/#permissions