Desenvolvendo um site no Facebook

Começando com um pouco de teoria

O Facebook é, sem dúvida, a maior rede social do mundo. Sua ascensão é exponencial e muito à frente de seus concorrentes, com centenas de milhões de usuários em sua base. E seu grande trunfo foi desenvolver uma plataforma fácil e abrangente para que desenvolvedores pudessem utilizar as vantagens da socialização a seu favor.

Logo, é possível desenvolver um website completo dentro do Facebook, com menus, animações, hiperlinks, e mais ainda, com interações diretas com perfis, preferências do usuário, seus amigos, etc.

Antes de tudo é necessário entendermos a diferença entre ter um PERFIL e uma PÁGINA no Facebook. Ao contrário do nosso amigo Orkut que apenas permite a criação de perfis, independentemente de ser uma empresa ou uma pessoa, o Facebook saiu na frente por saber diferenciar estes dois tipos de perfis.

Um PERFIL refere-se a um indivíduo, uma pessoa que possui gostos, preferências, amigos, trabalhou em lugares, etc. Para ser amigo de um perfil, é necessário solicitar uma amizade e esperar que o mesmo lhe aceite.

Já uma PÁGINA refere-se a um ambiente público (qualquer pessoa pode visualizar sua página na internet, independente de estar logado no Facebook) onde é possível criar "abas" personalizadas, construindo um menu com páginas informativas através de "aplicações", as Facebook APPs.

Com muita frequência vemos muitas empresas ainda com o costume do Orkut, possuírem apenas perfis no Facebook. Isso traz muitas desvantagens, tais como:

- É necessário autorizar as pessoas que solicitam amizade com seu perfil empresarial;

- Não é possível construir um menu personalizado, nem inserir APPs no seu perfil;

- As informações do seu perfil terão características de uma pessoa, ou seja, imagine um perfil de empresa onde você tenha que preencher informações como: sobre mim, lugares onde trabalhei, estudei, gostos musicais, família, etc.

- Não é possível aproveitar os recursos de anúncios que o Facebook oferece muito menos acesso aos relatórios de visitas detalhados (e gratuitos);

- Perfis possuem um número limite de amigos;

- Algum dia o Facebook pode remover seu perfil empresarial sem aviso prévio.

Mas a boa notícia para quem já começou por este caminho do perfil é que, há pouco tempo, o Facebook liberou uma fantástica ferramenta que simplesmente transfere todos os amigos de um perfil automaticamente para "curtidores" de uma página.

Saiba mais em: facebook.com/pages/create.php?migrate

Um pouco mais de teoria (é importante)

Há alguns meses atrás, o Facebook disponibilizava como ferramenta de construção de "abas" uma linguagem própria chamada FBML (Facebook Markup Language). Mas era possível também desenvolver um APP (facebook.com/apps/directory.php) utilizando páginas hospedadas em seu próprio servidor, sendo apenas "puxadas" para dentro de um IFRAME.

Só que o FBML, por ser uma linguagem própria do Facebook, também possuía diversas limitações e regras, como por exemplo, a impossibilidade de você usar jQuery, fora uma leve curva de aprendizado. Então recentemente a linguagem foi extinta e agora só é possível desenvolver páginas personalizadas utilizando os Facebook APPs.

Então basicamente para construirmos nosso site no Facebook precisaremos:

- Criar uma página: facebook.com/pages/create.php

- Fazer um cadastro como desenvolvedor de APPs no link: facebook.com/developers

- Ter pelo menos 25 pessoas curtindo sua página (com esse número mínimo podemos atribuir uma URL personalizada. Ex.: facebook.com/minhapagina);

- Construir páginas HTML já fatiadas e hospedadas em um servidor próprio que serão "puxadas" através da URL absoluta;

- Estratégia e criatividade (não basta apenas dizer que tem uma página no Facebook pra fazer pinta de bacana, faça com estratégia).

Agora sim! Mãos à obra!

A parte mais trabalhosa de todo o processo de construção sem dúvida é produzir cada página que será a "aba" do seu menu. O restante será apenas configurar cada uma delas como um APP e em seguida atrelar à página desejada (uma mesma APP pode ser atrelada a diversas páginas ao mesmo tempo desde que você seja o administrador delas).

O primeiro passo é montar o layout de cada página respeitando as medidas e limites de onde elas serão inseridas no Facebook, conforme modelo abaixo:

Basicamente o layout do Facebook disponibiliza uma área com largura limitada (a altura é livre) com um IFRAME que irá exibir dentro de si cada página do menu.

Recomendo que ao criar suas páginas em seu próprio servidor, separe cada uma em uma pasta com seu respectivo nome. Ex.: /home, /contato. Mais na frente veremos por quê. Não tenha restrições, pode usar jQuery, linguagem de programação, Flash, o que bem entender. Tudo o que rodar dentro de um IFRAME funcionará sem problemas.

Criando um APP

Monte um HTML com o CSS, tudo prontinho no seu servidor já publicado on-line. Agora vamos à nossa área de desenvolvedor (facebook.com/developers) para criar um novo APP:

Clique no botão "+ Set Up New App":

Dê um nome para seu APP (página) e leia os termos do Facebook antes de continuar:

Depois de validar o captcha, iniciaremos a configurar nossa APP.

Nesta primeira orelha de configurações você preenche as informações gerais de sua APP como descrição, idioma, e-mails de contato, etc. Você também pode usar um ícone personalizado no formato 16x16 pixels, em GIF ou PNG. Se não quiser preencher tudo, podemos seguir para a próxima orelha.

Nesta segunda orelha de configurações saberemos qual nosso "Application ID" (guarde este número, pois usaremos mais à frente). No campo "Site URL" coloque a URL principal do seu site. ex.: http://www.meusite.com.br. Caso use subdomínios, preencha o campo "Site Domain":

Agora é a etapa mais importante, vamos configurar a integração da sua APP com a página do Facebook. Em "Canvas Page", você definirá um nome único para sua URL de APP que também poderá será acessada diretamente, sem precisar da página do Facebook. Ex.: http://apps.facebook.com/minha_pagina

Em "Canvas URL" você deverá preencher com a URL completa da página hospedada em seu servidor. Lembra que recomendei colocar cada página em uma pasta? O motivo é que a URL não poderá citar um nome de arquivo como por exemplo: http://meusite.com.br/home.php, mas sim uma pasta. Para evitar que o Facebook exiba um alerta sobre mudança de protocolo seguro, coloque também a URL segura da página de seu servidor. Ex.: https://meusiteseguro.com.br/home.php

Em "Tamanho do IFrame" é importante definir a opção "Auto-resize" para que o IFRAME da página não tenha uma barra de rolagem. Mais à frente veremos a solução deste problema.

Mais abaixo, em "Page Tabs", você definirá o nome da "aba" que ficará no menu e repetir as URLs do seu servidor inseridas no passo anterior em "Link da guia" e "Secure Tab URL":

As demais orelhas de configuração são opcionais e mais avançadas, logo clicaremos em "Salvar Alterações" e seguiremos para o último passo que será atrelar a APP a uma página que você seja administrador. Clique em "Application Profile Page":

Estamos na página independente da APP. É aqui que faremos o processo final de atrelar a APP à página no Facebook. Clique em "Adicionar à minha página". Serão listadas as páginas que você administra. Basta clicar no botão de cada página que você queira inserir a APP como aba e pronto!
O procedimento é burocrático, mas necessário, e você deverá repetir todo o processo para cada nova aba de seu menu. Qualquer alteração feita nas páginas, no seu próprio servidor será refletido automaticamente na página do Facebook.

 Houston, we have a problem!

O Facebook por padrão estipula uma altura fixa para o IFRAME que "puxará" suas páginas. Logo, você vai perceber que uma barra de rolagem será gerada devido ao excedente de altura. Por sorte ele também oferece a solução com uma função própria em Javascript que ajusta automaticamente a altura do IFRAME conforme a altura do conteúdo da sua "aba". Insira o código abaixo logo após o de cada página:

<div id="fb-root">div>
<script type="text/javascript">
     window.fbAsyncInit = function() {
        FB.init({
            appId  : ID_DA_SUA_APLICAÇÃO (Application ID),
            status : true,
            cookie : true,
            xfbml  : true 
        });
        FB.Canvas.setAutoResize(); //set size according to iframe content size
    };
    (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
<</script>

Não se esqueça de inserir seu "Application ID" que você anotou anteriormente no parâmetro appId.

iMasters