segunda-feira, 25 de julho de 2011

[Web]Criando a sua página-aplicativo no Facebook

Ha uma nova (não sei o quão nova) onda de páginas personalizadas no facebook, e há uns dias eu venho pesquisando como cria-las, e o mais mais "personalizável" foi através da criação de aplicativos, que na verdade serão as páginas, carregadas como aplicativos, tudo que tem a fazer é criar um novo aplicativo, através do Facebook Developers, que pode ser acessado clicando no link no rodapé do facebook ou neste link:

Facebook Developers

E clicar em "+ Create New App" no canto superior direito:


Então você colocará o nome do seu aplicativo, seu locale (a lingua utilizada no mesmo), e terá de concordar com os termos do facebook.

Sendo feito esse processo, você será direcionado para a página de Informações Básicas do seu aplicativo, onde poderá configurar as informações do seu aplicativo (dãh), como essa abaixo:


Configurando as informações do mesmo, poderemos ir direto a aba "On Facebook" do nosso aplicativo, que já será diretamente direcionado para a aba interna "Canvas Settings", como abaixo:


É relativamente fácil botar a sua página no ar, tendo onde hospeda-la, assim que fizer o upload da mesma, só precisará colocar o link da pasta ftp onde se encontra sua "página-aplicativo", que carregará o index, que não poderá ser .html, precisa ser de uma extensão com linguagem server side, como .asp, .php, .java, entre outros. Tem alguns pré-requisitos, para sua página se "adequar" a pagina do facebook, por ex.: sua página não poderá ter o comprimento (width) maior que 520px e para a altura(height) ser maior que 820px, você precisará adicionar um código javascript à sua página, no <body>, antes de qualquer código, que disponibilizo abaixo também:


<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '112852762145067', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
 FB.Canvas.setSize({ width: 520, height: altura desejada });
}
</script>
...


Tendo a sua aplicação configurada, só precisará adicioná-la a uma página sua, e testar.

Qualquer dúvida,

Só me mandar um e-mail.