Facebook, Configurando App como Page Tab

Posted on janeiro 19, 2013. Filed under: Facebook, PHP | Tags:, , |

Usando a aplicação como um Page Tab

Introdução

O Facebook permite que você insira uma aba de uma aplicação dentro de uma fan page. É uma opção ideal para você associar aplicativos promocionais dentro de sua fan page.

Antes é necessário que você já tenha uma aplicação do facebook criada. Para saber mais como criar aplicações para facebook, acesse o link, Criando aplicativos para Facebook usando SDK do PHP.

O próximo passo é configurar a seção chamada Page Tab dentro das configurações da sua App:

ScreenShot040

Principais campos:

  • Page Tab Name: Nome que será exibido na fan page para referenciar a app!
  • Page Tab URL: URL da sua app que será aberto quando o usuário clicar no link da aba na fan page!
  • Secure Page Tab URL: URL da sua app que será aberto quando o usuário clicar no link da aba na fan page (Usado para usuários que acessam o facebook por conexão segura https)!
  • Imagem da guia da página: Imagem da aba que será exibida na fan page!
  • Page Tab Width: Largura máxima da exibição da “aba” da sua app dentro da fan page. A sua app será aberta dentro de uma tag iframe na fan page. Portanto tenha cuidado para não exceder no layout da sua página o limite configurado nesse campo!

PS: (Lembre-se que para configurar um Page Tab é necessário configurar o endereço https (SSL), pois usuários do facebook que usam conexões seguras irão ser direcionados para o link https).

Associando o Pag Tab à uma Fan Page

Para associar a Pag Tab que configuramos anteriormente à uma Fan Page, acesse o endereço abaixo:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

Substiuíndo:

  • YOUR_APP_ID: Pelo App ID da sua aplicação !
  • YOUR_URL: A URL configurada na Page Tab de sua app!

Irá abrir uma página onde você poderá escolher em qual fan page deseja que a app seja incluída. Semelhante à essa:

ScreenShot032

Escolha a fan page desejada e clique no botão Adicionar aba da Página.

Finalizando

Visualizando a sua aba inserida na fan page:

ScreenShot041

Ao clicar no link, você será enviado para dentro da sua app. Ela será aberta em um iframe dentro da fan page.

ScreenShot042

PS: Veja que o botão curtir acima do iframe onde sua app foi aberta, é referente ao curtir da sua fan page e não da sua app.

É muito comum alguns aplicativos promocionais obrigarem os usuários à curtir a fan page antes de poder participar da promoção. Quando você clica no botão Curtir, o próprio mecanismo do facebook irá fazer um refresh na página de sua aplicação, facilitando o desenvolvimento dessa função.

Para saber mais como verificar se o usuário curtiu ou não sua fan page, acesse meu post Facebook, Verificando se usuário curtiu fan page !

Observações

  • Não é possível inserir mais de uma Page Tab à uma app. Portanto, para cada Page Tab que deseje incluir na sua fan page, você terá que criar uma nova aplicação.

Make a Comment

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

13 Respostas to “Facebook, Configurando App como Page Tab”

RSS Feed for Pasqua Tecnologia Comments RSS Feed

Olá, tudo bem? estou com um problema, quando eu associo meu app com a pagina a tela fica “branca” e nada funciona ele só consegue pegar as permissões quando o usuário entra na url do meu projeto o que eu posso fazer? abraçs

Olá Danilo,

Caso não esteja visualizando o resultado esperado da sua aplicação, provavelmente esta com erro na programação.
Ou é um erro do php, ou um erro de alguma ação inválida realizada no facebook.

Para identificar erros no php, habilite a diretiva display_errors. Insira o comando abaixo no início do seu script php:

<?php
ini_set('display_errors', 'on');

Para capturar erros originados nos facebook, é preciso capturar a Exception FacebookApiException. Exemplo:

try {
    // coloque o código do facebook aqui
} catch (FacebookApiException $e) {
   var_dump($e);
}

Boa sorte!

Olá, estou tentando criar um app no facebook,
mas nao consigo associalo a uma pagina

este link descrito nao funciona
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

como posso associar meu app a uma pagina?

Olá Bruno,

Você substitui corretamente os campo YOUR_APP_ID pelo ID da sua aplicação, e o campo YOUR_URL pela URL onde sua aplicação esta hospedada ?

Boa sorte!

Estou tendo problemas com o https. Quando entro na aba, aparece o erro:

This webpage is not available
The webpage at https://www.meudominio.com.br/testes/facebook-app/teste1/ might be temporarily down or it may have moved permanently to a new web address.
Error 501 (net::ERR_INSECURE_RESPONSE): Unknown error.

Opa, consegui resolver o problema. Ao invés de colocar https://www.meudominio.com utilizei: https://meudominio.websiteseguro.com/testes/facebook-app/teste1/

Legal que funcionou Henrique!
Boa Sorte!

Uma outra dúvida. Criei um app e fiz as configurações para criar a tab em uma fan page. O problema é: Como faço para quando a pessoa entrar na aba (aplicativo) ele já pediu a autorização para isso? Quando eu entro (caso não tenha dado autorização pela url externa http://www.meusite.com.br/app.php) ele não aparece absolutamente nada, e não pede permissão para acessar o aplicativo. Sabe como resolver este problema?

Obrigado e parabéns pelo blog (:

Olá Henrique,

Provavelmente o problema ocorre devido a tela que solicita permissões ultrapassa as dimensões da Tab! Um alternativa é criar a solicitação de permissões através de javascript. Isso irá resolver o caso pois a solicitação através de javascript é aberta em um popup.
Lembre-se que o sdk de javascript interage com o sdk de php. Você não precisa transferir toda a lógica do sdk do php para javascript. (Apenas a parte de login/solicitar permissões).

Para ajudar, veja o artigo abaixo:
Facebook App: Trabalhando com Login através do sdk para javascript

Boa sorte!

Oi criei o app, e depois coloquei a aba na página seguido o passo a passo.
Mas ela só aparece quando eu ou outro administrador da página acessa, se for outra pessoa não consegue ver a aba.
Sabe o que isso?

Olá Artur,

Provavelmente a opção SandBox Mode esta habilitada no seu aplicativo. Veja o artigo abaixo que explica sobre essa opção:
Dicas para testar aplicativos para facebook durante o desenvolvimento

Boa sorte!

Olá, estou com dificuldades porque não sou desenvolvedora mas estou tentando seguir seu passo a passo mas empaquei no passo que diz “Descompacte o arquivo zip e copie a pasta src para o diretório raiz da sua aplicação.”. Descompactei, localizei a pasta e não sei onde colar porque, segundo minhas pesquisas, como tenho Windows, dizem que não tem diretório raiz. Então onde colo essa pasta “src”?

Obrigada.

Olá Giuliana,

Quando citei “diretório raiz” significa o diretório onde seus arquivos php estão localizados em relação a configuração do servidor web que esta usando. Exemplo: diretório www ou htdocs, varia de acordo com a instalação (XAMPP ou WAMP).

Caso queira avançar nos aplicativos, aconselho se aprofundar mais na programação da linguagem PHP e com um pouco de experiência, participar do curso de Criação de aplicativos para facebook:
http://www.temporealeventos.com.br/?area=267-Criando-Aplicativos-para-Facebook-Usando-SDK-de-PHP-e-Javascript

Boa sorte!


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: