RSS Feed
InoReader
Mario Andretti: "o que eu teria feito diferente"
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.
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.
iMasters
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
2011 24h-Rennen Nürburgring Nordschleife Highlights
Start
Dörr Motorsport Porsche 911 GT3 Cup Onboard Start
Leaders in traffic
Audi R8 LMS Battle Stippler vs. Scheider
Audi R8 LMS Big Crash
BMW 318 IS flips over barriers
Leading BMW M3 GT crashes at Karussell
Porsche 911 GT3 Hybrid slows
Leading Lots of Sparks from the Audi R8 LMS
Pit Entry Crash
Massive Crash BMW Z4 GT3 flips over barriers
BMW M3 GT Onboard
Finish! Manthey Team back on top!
Romain Dumas/Timo Bernhard/Marc Lieb/Lucas Luhr
Porsche 997 GT3 R SP9 GT3
156 laps
2nd #1 BMW MOTORSPORT
Jörg Müller/Üwe Alzen/Augusto Farfus/Pedro Lamy
BMW M3 E92 GTR E1-XP2
156 laps
3rd #14 AUDI SPORT TEAM PHOENIX
Marcel Fässler/Andrea Piccini/Frank Stippler/Marc Basseng
Audi R8 LMS SP9 GT3
155 laps
4th #15 AUDI SPORT TEAM PHOENIX
Frank Stippler/Marc Hennerici/Christopher Haase/Markus Winkelhock
Audi R8 LMS SP9 GT3
154 laps
5th #16 AUDI SPORT TEAM ABT SPORTSLINE
Mattias Ëkström/Timo Scheider/Marco Werner/Christian Abt
Audi R8 LMS SP9 GT3
154 laps
6th #22 BLACK FALCON
Kenneth Heyer/Thomas Jäger/Jeroen Bleekemolen/Jan Seyffarth
Mercedes SLS AMG GT3 SP9 GT3
153 laps
7th #32 HEICO MOTORSPORT
Christopher Brück/Lance David Arnold/Alex Margaritis/Christiaan Frankenhout
Mercedes SLS AMG GT3 SP9 GT3
153 laps
8th #2 HANKOOK TEAM FARNBACHER
Dominik Farnbacher/Allan Simonsen/Marco Seefried/Jaime Melo
Ferrari F458 Italia SP8
152 laps
9th #26 MSC ADENAU E.V.
Klaus Abbelen/Sabine Schmitz/Niklas Kentenich/Tim Bergmeister
Porsche 997 GT3 R SP9 GT3
152 laps
10th #12 WOCHENSPIEGEL TEAM MANTHEY
Georg Weiss/Oliver Kainz/Michael Jacobs/Jöchen Krumbach
Porsche 997 GT3 MR SP7
151 laps
Assinar:
Postagens (Atom)