Desenvolvendo um site no Facebook

Arthur Paredes
em APIs

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: https://www.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 (http://www.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:

  • Ter pelo menos 25 pessoas curtindo sua página (com esse número mínimo podemos atribuir uma URL personalizada. Ex.: www.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 (http://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 16×16 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 <body> 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.

Por enquanto é isso. No próximo artigo veremos como utilizar informações do perfil do usuário que visita sua página para torná-la mais atraente, sociável e permitir uma navegação totalmente personalizada e estratégica.

Até lá!

Mensagem do anunciante:

Quer expor APIs com segurança e impulsionar parcerias ? Conheça o API Management Suite da Sensedia

Arthur Paredes

é formado em Publicidade pela ESAMC e é Sócio-Diretor da Plus! Agência Digital. Possui amplo conhecimento nos produtos da suíte Adobe, webdesign além de desenvolver em Flash e Actionscript, PHP e MySQL. http://www.plus.com.vc

131 comentários Comente também

    1. Olá @VitorGGA,

      colega eu fiz uma aplicativo para o facebook. Porém quando entro no aplicativo pela primeira vez o aplicativo pede as permissões para acessar meus dados, porém a URL de retorno sai fora do facebook e vai para o meu site, queria fazer igual você fez nesse app que criou: http://apps.facebook.com/vitorgga/, depois que dou a permissão ele continua no facebook. Já olhei nas configurações do aplicativo mais não consegui fazer funcionar. Se pode me ajudar agradeço.

  1. Vale salientar que, ao contrario do que muita gente pensa, o Facebook apaga mesmo perfis empresariais que nao forem criados como “paginas”. Tivemos essa experiencia, eles nao avisam nada e tambem nao temos como recuperar os dados. Parabens pela postagem Arthur, completa e esclarecedora.

  2. Parabéns pelo post, será muito útil. Só uma dúvida/observação: como fazer para, no caso das pessoas que estão em locais que o acesso as redes sociais não é permitido, acessarem a página criada no facebook?

  3. Olá Howard, infelizmente se o domínio de uma rede social como http://www.facebook.com por exemplo estiver bloqueada na rede, não é possível acessar o site.

    Por isso é importante usar o Facebook de forma estratégica.

    Uma vantagem também da página é que a pessoa não precisa estar logada ou possuir uma conta no Facebook para visualizá-la.

  4. Parabéns Arthur
    Rodei muito pela Internet.
    Esse seu artigo foi a chave prá mim.
    Agora vou ter que acender a luz do quarto aberto. :)
    Vlw, aguardo a(s) continuações do artigo.

    1. Olá Sidney,

      No caso dessa página ele exige login pois o aplicativo está solicitando informações do perfil do usuário. Mas caso não seja necessário, a página é pública sim.

  5. Existe outro modo de evitar que gere a barra de rolagem.

    Segue abaixo.

    No css na tag body {} insira o tamanho do aplicativo Ex: height: 900px; e acrescente overflow:hidden;

    E acrescente esse codigo no final da página!

    E pronto, tua página sem scrollbar! =D

  6. Olá Galera!

    Nesses últimos dias recebi a proposta de reformular um site de uma empresa, estava de olho nas fanpages e fiz a proposta de criar o site dentro do facebook, entao fui garimpar na internet sobre, estou usando APPs como o PageModo e o StaticIframe, vcs acham melhor criar os próprios aplicativos ou utilizar de recursos prontos pensando na fácil manutenção do administrador da fanpage.

    excelente post, parabéns !

    abraços

  7. Parabéns amigo, estamos querendo fazer uma aplicação que utilize o Facebook, para discutir temas, e iremos contar com o seu apoio se possível.
    Um abraço,

    Pimenta

  8. alguém poderia dar uma ajuda !

    ao tentar incluir uma nova APP (botão “+ set up new app”) ele pede o número do cel !
    ja tentei inúmeras vezes e nada… existe alguma distinção quanto a operadora ou sei lá o que ????

    Abracis

    1. Fernando, isso tabmém aconteceu comigo.

      Você deve colocar o DDD da cidade mas, mesmo assim, não chega nada no celular.

      Tive que cadastrar meu cartão de crédito. Que nesse caso, não tem problema.

    2. Olá, eu também estava tendo problemas em fazer essa validação pelo celular porque eu não recebia o código. Minha operadora é Claro e eu recebi o código para validação depois de 2 dias do envio da solitação. Demorou, mas funcionou.

  9. Olá!
    Muito bom esse artigo.. porém fiz tudo conforme o passo a passo e aparece um erro 405 no Facebook.

    Se eu utilizar o endereço direto no navegador, a página funciona.

    Alguém poderia ajudar?

    Obrigado!

  10. Muito bom. Eu quero aproveitar e pedir uma sugestão para o aplicativo que desenvolvi.
    Eu fiz todo o processo sugerido e e está ok, o que eu preciso é que o cliente que instalar o aplicativo faça um login no meu site para que eu possa redirecionar o conteúdo web dele. Ou seja cada cliente que instalar o App na sua pagina terá que fazer login(codigo e senha do site) apenas a primeira vez e depois todos os visitantes da fan page dele verão o conteúdo que vir;a do site. O mesmo aplicativo tem que funcionar para todos os clientes .
    Alguma ideia
    Obrigado

  11. Olá. Sabe como testar se a fanpage está sendo curtida, para colocar um banner pedindo pra pessoa curtir??

    Já vi isso em várias fanpage mas não consegui ainda…

  12. Olá, estou com problemas na hora de confirmar minha conta com numero de telefone, possuo um numero claro portado da brasil telecom, alguém esta ou teve o mesmo problema e conseguir sanar o problema?

  13. Pessoal, o Facebook mudou totalmente a interface da criação de aplicativos, logo pode ser que algumas pessoas tenham dificuldades em se guiar pelo artigo.

    Estou providenciando uma atualização das telas do artigo para facilitar para vocês, ok?

    Obrigado a todos!

    1. Alguma dica para o pessoal que não consegue confirmar a conta. Comprei o chip de uma terceira operadora (CTBC, Claro, e TIM), e nada. Tem alguma ideia?

    2. Oi Davi, também tive dificuldades com a validação pelo celular, acabei usando a validação pelo cartão de crédito e funcionou sem problemas.

    1. Oi Guilherme, tem no artigo, a largura máxima é 520px.

      Sim, qualquer linguagem funciona no iframe, você apenas ‘puxa’ uma página comum de seu site dentro do box.

  14. dããã acabei de ver q vc escreveu a largura na imagem =D

    mas e o php? (pois estou pensando em como implementar ecommerce diretamente no iframe)

    vlww

    1. Não sou o Arthur, mas talvez ajude… Sim, funciona normalmente. Qualquer coisa que você conseguir rodar dentro do seu servidor, vai aparecer no iFrame.

  15. Parabens Arthur, muito bom o tuto!
    Gostaria de saber se vc sabe como desenvolver um app talvez para fazer com que um topico do grupo seja fixo(sempre permaneça em cima)
    Obrigado desde ja

  16. Parabens Arthur,

    adorei o artigo, mas gostaria de pedir uma ajuda. Alguem já conseguiu colocar algo diferente na página, um teste se o usuário já está curtindo a página?
    A minha idéia era colocar um banner na página com um recado “verificamos que você ainda não está curtindo nossa página. Clique em curtir no topo da pagina”.

    Alguma idéia??

    Obrigada

  17. quando utlizei o recurso para pegar pessoas do meu perfil no facebook e coloca-las como curtidores da minha pagina (https://www.facebook.com/pages/create.php?migrate), nao consegui mais visualizar a pagina do meu pefil direito.

    Quando acabo de me logar no facebook, vejo minha pagina da meneira como aparece na imagem abaixo.

    Nao consigo ver mais a pagina do perfil padrão do facebook.

    1. Olá José, não sei se ajudo muito, mas ao migrar seus amigos como curtidores voce transformou seu perfil em empresarial. Ao fazer isso não tem como reverter (até onde eu sei). E a página inicial são gráficos de como estão as páginas a qual sua “empresa” possui.
      Por isso este recurso é aconselhável apenas a empresas.

  18. Já tentei fazer alguns testes, mais desconheço totalmente essa linguagem da Internet, estou procurando algum que domine este processo de criação de fan page para que possa criar uma para minha loja virtual. Alguem aqui cria fan pages? Fico no aguardo.

  19. Olá. fiz a página da minha empresa e personalizei o endereço. Sei que existe como acessar a aba inicial sem que a pessoa esteja logada, mas não consigo fazer isso de jeito nenhum.
    Consegue me ajudar?
    Abraço

  20. Bom dia. Consegui criar a app, mas não consigo atrelar à página no Facebook. Não encontrei a opção “Adicionar à minha página”, como você apresentou no tutorial.
    Tem alguma sugestão para o meu caso?

    1. Sarah, depois de criada a app, na página de desenvolvedor, clique em Aplicativos, irão ser listados a esquerda todos os aplicativos que você já desenvolveu. Clique sobre o aplicativo que vc quer atrelar, logo em seguida no canto superior direito será exibido um botão Editar aplicativo, clique nele, serão exibidas todas as configurações feitas no aplicativo, no canto inferior esquerdo aparecerão alguns links, clique sobre View App Profile Page, vc será direcionada à página do aplicativo, ainda no canto inferior esquerdo agora vai aparecer o link Adicionar à minha página, pronto!

    2. Caro Eduardo, Acho que o facebook mudou as telas… Não estou encontrado a opção: View App Profile Page, você onde encontrar nesse novo leaite??? Obrigado
      Erivaldo

  21. Boa tarde Arthur,

    Quero te agradecer pelo post, pois foi através dele que consegui fazer meu app, é preciso ter mais pessoas como você na internet, que possuem boa vontade e compartilham o conhecimento.

    Só um detalhe, o Facebook fez uma atualização, pois a interface não é a mesma, demorei um pouco para encontrar os campos que você falava, mas de qualquer forma você me ajudou muito!

    Obrigada!

    Franciele

  22. Olá, não consigo encontrar a opção para publicar o app em determinada página.
    E quando sai um novo tutorial com a versão mais nova das telas, pois o face mudou.
    abraços !

  23. Error
    Secure Canvas URL must use SSL and begin with https.

    Então todos os apps tem que estar hospedados com certificação HTTPS ?
    Se não, não funciona ?

  24. Bom dia amigos(as)

    Parabéns pelo artigo! Segui o passo a passo, porém me deparei com um problema que não consigo concretizar a criação.

    Fiz todo procedimento, porém na hora de atrelar a APP junto a página ocorre que quando acesso o aplicativo ele aparece somente a página da APP sem meus menus da página do fanpage.

    Se alguém puder me ajudar fico no agrado de coração…
    Os links são:
    Página: http://www.facebook.com/pages/GSF-Tecnologia/327030877335672
    Aplicativo: http://apps.facebook.com/gsftecnologia/

  25. Alguém poderia postar algo aqui sobre a questão do conteúdo liberado somente apos o user curtir a página.
    Agradeço desde já,e parabéns pela postagem muito completa.

    1. Estou com o mesmo Problema… As telas estão difentes do tutorial, e não consigo atrelar a APP a pagina?
      Alguem pode ajudar?
      Obrigado

  26. óla tentei criar uma página no face,mais ñ deu certo.coloquei tds os dados quando fui prosseguir,aparece um aviso falando p eu colocar cidade e estado.obs:mais esses dados eu ja havia colocado.alguem pode me ajudar?

  27. Uma dúvida se voce pode me responder. A URL da Canvas e page, como faço para no lado do servidor (uso php) proteger esses endereços de acesso direto? (tipo direto do navegador) Obrigado

  28. Muito bom o artigo, porém acho que poderia ter uma nova versão, pois desde então o Facebook mudou bastante, desde o passo inicial para criar um aplicativo até a disposição do conteúdo do novo formato de fan page.

  29. Excelente mesmo, pela didática. Pelas respostas, vejo que está muito claro para todos. E fica óbvio que não basta vontade de fazer. Tem que saber fazer.
    Eu queria criar uma página no Facebook mas estou vendo que isso não é para mim.
    Depois de ler seu post, percebi que sou 150% leigo.

  30. Otimo post parabens… porem pergunto a vc. Ainda é possivel por em pratica todo esta sua orientação ou o APP do facebook foi modificado como citado logo acima pelo colega Andre??

  31. Boa tarde, gostaria que falasse mais sobre hospedar o site em outro servidor, e também sobre a URL Absoluta, e também se para cada quantidade páginas que tiverem o meu site, vou ter que criar a mesma quantidade de páginas no facebook? ou se ele já cria o processo sozinho, também poderia utilizar a mesma técnica para criar um site ou melhor aplicativo do tipo Market Place?

    Att.

  32. Obrigado e parabens, Arthur. Materia pertinente, otima explanação! (Ficam contudo algumas questões no ar que só um pouco de pratica resolverá..)

  33. Boa noite, estou iniciando com criação de páginas e testei a que o Wix dispõem para o facebook é possivel eu utilizar a app do face para já add a página que criei pelo Wix?

  34. Alguem conseguiu usar este tutorial no novo formato da APP do Facebook?
    Esta diferente e não consigo atrelar a APP a Pagina…
    Alguem pode me ajudar?
    Obrigado

  35. Acredito que essa monopolização da internet no facebook só tende a piorar para pequenas empresas. Por exemplo na criação de sites. Sabemos que ja existem mtas maneiras de criar um site gratuitamente, porém conseguir uma boa divulgação do mesmo e uma boa apresentação é outra coisa. Creio que o facebook por mais limitado que sejam por enquanto as opções, é uma questão de tempo ele atualizar e melhorar, facilitando mais ao usuario criar seu site. Ele se camufla de “gratuito” até que vc possa “melhorar” sua divulgação pagando pelo serviço, assim como é o google (que ainda possui um pouco de bom senso). Todos podem achar que isso é uma boa, pois não precisar pagar para criar sites, ou não pagar para utilizar softwares de gerenciamento do seu empreendimento será lucrativo, mas quem perde com isso não é apenas as empresas de webSites, mas são todas as pequenas empresas, pois o facebook não tomará apenas o emprego do webdesigner ou programador, mas de todas as outras “soluções” que o facebook trará. Creio que deveria haver um bom senso destas empresas gigantes como é o facebook. Quero deixar claro pra quem não entendeu, é que daqui a pouco o facebook tomará conta do seu emprego, indiferente do que vc trabalha, o facebook não possui limites. Parece ilusão pensar desta maneira mas é só vc estudar um pouco sobre como a tecnologia tem tomado o emprego das pessoas, antigamente não imaginavam que robôs fariam os serviços de humanos, ingenuos os que pensavam. Sei que devemos dar um jeito de nadar junto com a maré, nos atualizarmos, melhorar nosso curriculo, mas quem é que não pretende abrir e investir no seu empreendimento? Sei que todos deveremos buscar contornar com “nossas soluções”, mas vc acha que sua pequena empresa terá alguma chance contra um gigante? Eu acho que deveria ser proibido o facebook comprometer empregos ou prejudicar as pequenas empresas.

  36. Parabéns pelo post, se trata exatamente do que preciso, porém o que está me barrando é
    “Sua conta deve ser verificada antes que você possa fazer isto. Por favor, verifique sua conta adicionando seu celular ou cartão de crédito.”

    Coloquei o número do meu celular corretamente porém não recebi o código de confirmação. Não sei como proceder, você sabe como me ajudar?

    Desde já agradeço,

  37. Galera, ótimo post.

    Só uma pergunta de um iniciante, rsrsrs

    Qual é a diferença? Pois entrei em quase todos os links do post e não vi deferença nas páginas do pessoal, alguém poderia postar uma página modificada para eu poder visualizar?

    Muito obrigado!

  38. Até que enfim encontrei algo bom sobre app no FB, mas tenho uma dúvida:

    Tenho um perfil no FB. Como faço para criar uma fan page para minha empresa? Dentro do meu perfil clico em “cria página” ou faço logoff e crio uma página independente?

    Obrigado!

  39. Amigo, estou tentando colocar joguinhos online em minha fanpage, estou indo para o aplicativo de jogos mas não consigo importa-los para coloca-los nas abas de destaque, somente consigo importa-los para a página inicial, tem como me ajudar?
    Outra coisa tenho 02 páginas no face, uma de perfil e uma de fan page, como faço para importar somente os amigos para minha fan page, pois não quero importar as fotos e demais itens da página do perfil.

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Este projeto é mantido e patrocinado pelas empresas: