Como funciona?
- Na verdade você irá criar um ‘APP’ simples em html ou iframe e o Facebook irá entendê-lo como um APP. Você poderá incluir qualquer HTML ou iframe com qualquer tipo de conteúdo dentro da LandingPage dos Facebooks App. Após a criação do APP, você apenas apontará que aquele APP será uma Tab de seu APP.
Como criar um APP para Facebook com PageTabs que aceitam ícones personalizados e Html ou iFrame?
Requisitos
- Ter um perfil cadastravo no Facebook Develop;
- Ser administrador da FanPage;
- Possuir conta em servidor com SSL.
Como funciona?
- Na verdade você irá criar um ‘APP’ simples em html ou iframe e o Facebook irá entendê-lo como um APP. Você poderá incluir qualquer HTML ou iframe com qualquer tipo de conteúdo dentro da LandingPage dos Facebooks App. Após a criação do APP, você apenas apontará que aquele APP será uma Tab de seu APP.
Passo-a-passo
- Acesse developers.facebook.com;
- Inscreva-se e aceite as condições do programa de desenvolvedores;
- Clique em Criar Novo Aplicativo;
- Preencha os campos:
AppName – Nome do Aplicativo;
Espaço para o nome do aplicativo – Será usado no apps.facebook.com/NOMEAPLICATIVO;
Web Hosting – Marque se você não tiver SSL (Não recomendo pois a configuração deste web hosting é confusa e falta documentação – O ideal é contratar um plano na Locaweb/Hostmídia/UolHost que aceite SSL);
- Você irá para a página de configuração do App. Lembre-se que estamos criando um App somente como LandingPage para exibir Html personalizado e ter ícone personalizado. Muita coisa poder ser feita a partir destas configurações, mas não usaremos neste tutorial.
- Preencha os campos:
Informações básicas
– Display Name: Como seu nome irá aparecer como APP;
– Namespace: Será usado no apps.facebook.com/NOMEAPLICATIVO;
– Contact Email: Email do administrador;
– App Domains: Utilizado para conferência de segurança do Facebook;
– Hosting URL: O Heroku apareceria aqui se estivesse marcado;
Selecione o modo como o seu aplicativo se integra com Facebook
– Site URL: Domínio principal de seu site;
– Canvas URL: Pasta onde estão hospedados seus arquivos que irão ser exibidos ao clicar na Tab da FanPage;
– Segure Canvas URL: Apontamento do domínio do servidor seguro (Para quem utiliza Locaweb, será https://MEUSITE.websiteseguro.com);
PageTab
– Page Tab Name: O nome da Tab dentro da FanPage;
– Page Tab URL: Pasta onde estão hospedados seus arquivos que irão ser exibidos ao clicar na Tab da FanPage;
– Secure Page Tab URL: Apontamento do domínio do servidor seguro (Para quem utiliza Locaweb, será https://MEUSITE.websiteseguro.com);
- Escolha o tipo de Layout que deseja, suba os ícones da guia e Salve alteraçoes. Os outros campos (Mobile, Native iOS e Native Android) não usaremos para este App. Se tudo estiver Ok, você verá a imagem:
- Abra uma nova aba do seu navegador e entre com:
https://www.facebook.com/dialog/pagetab?app_id=IDDOSEUAPLICATIVO&next=URLNATIVADOSEUAPPNOSERVIDORCOMUM
Localize a ID de seu aplicativo no campo APP ID/API KEY
- Selecione a FanPage que seu perfil administrador receberá o App com a Tab e clique em Adicionar aba. Após isso você será redirecionado para a página de seu APP.
- Volte para sua FanPage e confira o funcionamento:
Quais são as possibilidade de desenvolviemento e Layout?
Tudo o que for permitido em html e css você pode desenvolver neste espaço pois o Facebook irá interpretar seu APP como um “iframe” ou “require”. Lembre-se de estudar as bibliotecas que a central de desenvolvimento oferece; Trabalhar com os dados cadastrados no Facebook pode ser muito mais interessante do que parece, principalmente na hora de se interagir em um App comercial ou Game.
Obrigado pela leitura!
Ricardo Fernandes
email@ricardofernandes.art.br