Como criar Fan Page no Facebook
Postado por: Celso em
Segunda etapa de tutoriais para Facebook, o primeiro Como criar páginas no Facebook, e agora vamos focar em como criar Abas dentro do seu site, muito utiliizado para ações de uma marca, por ter contato direto com o público e devido sua facilidade em compartilhar esta notícia, este meio é muito utilizado.
Anteriormente para você criar uma aba você utilizava uma app chamada FBML, porém esta ferramenta foi descontinuada, hoje em dia para se criar uma aba utilizando iframe, você precisa basicamente criar uma app própria para o Facebook .
Com este acontecimento tivemos certos limites para se trabalhar dentro da Fan Page, o seu limite é de 520px de largura por 800px de altura. Este é o padrão para iframes dentro das páginas do Facebook, neste post vou mostrar como podemos trabalhar com altura maior do que 800px via Javascript.
Primeiramente vamos apreender como criamos nossa Fan Page.
Criando sua Fan Page:
1 – No campo de Pesquisa procure por Developer e clique no Grupo Facebook Developers, hoje pra mim o Developer Site estava com erro na Pagina não sei se esta rolando alguma alteração, porém antes era por ele que eu acessava meus Apps ou também podemos acessar pele endereço https://developers.facebook.com/apps
2 – Na tela abaixo clique no botão “+ Create New App”
3 – Nesta tela será onde você vai entrar com o Nome do seu Aplicativo, Local e aceitar os Temos do Facebook.
4 – Preencha como no exemplo abaixo e clique em Continuar:
5 – Nesta tela de Capcha preencha o campo com o texto que aparece na imagem e clique em Enviar.
6 – Na próxima tela você terá toda configuração do seu aplicativo:
Ao passa o cursor do mouse em cima do thumb da imagem você pode trocar este thumb para a imagem do seu app assim como pode alterar o ícone que ficará em sua aba.
7 – Clicando em algum link, irá abrir a modal abaixo lhe informando os formatos de imagens permitidas, tamanho das imagens em pixel e peso das imagens.
8 – Nesta tela atente-se aos principais pontos no qual devem ser preenchidos:
8.1. App Display Name – Nome do seu Aplicativo
8.2. Contact Email – Email para contato
8.3. Page Tab Name – Nome da Aba
8.4. Page Tab URL: preencher com a url a onde ficará hospedada sua pagina com a URL completa como por ex: ex: HTTP://www.meusite.com.br/aba/index.html.
8.5. Page Tab Edit URL, seguir exatamente como no item 4.
8.6. Site URL, preencher a URL somente até a pasta final onde esta hospedado a sua pagina e sempre com a “/” no final, como por ex: HTTP://www.meusite.com.br/aba/
8.7. Canva URL: seguir exatamente como no item 7.
Feito essas alterações salve.
9 – Na coluna a esquerda abaixo do menu de Configurações você vai encontrar o menu de Links Relacionados (Related links), clique em View App Profile Page.
10 – Nesta tela você estará na pagina do perfil do seu app, no canto direito você vai encontrar o link “Adicionar a minha pagina”.
11 – Uma modal será aberta onde você tera uma lista de Páginas no qual você adminstra, como no topico “Como criar Paginas no Facebook”, onde criamos a pagina Troll Face, basta clicar no link “Adicionar à página”.
Feito isto sua aba já esta disponível na sua página, vamos trabalhar agora com seu HTML e Javascript.
Montando seu HTML e Javascript
Vamos utilizar a biblioteca Javascript SDK do Facebook abaixo:
/* O Código para redimencionamento ficará aqui. */
Ao carregar o Javascript SDK você passa a ter acesso ao FB.Canvas.setSize e FB.Canvas.setAutoResize e seus métodos. Podemos trabalhar de diversas maneiras, com conteúdo fixo ou com conteúdo flexível.
Passando o tamanho fixo desejado:
FB.Canvas.setSize({ width: 520, height: 1500 });
Trabalhando com conteúdo dinamico
FB.Canvas.setAutoResize();
Por padrão é 100ms para fazer o redimencionamento, caso queria forçar o redimencionamento mais vezes o mesmo tem que ser feito por parâmetro.
FB.Canvas.setAutoResize(20);
Seu HTML ficaria assim:
<title>FanPage para Facebook com mais de 800px de altura</title>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setSize({ width: 520, height: 10500 });
</script>
body {background: url(bg-body.png) repeat; color:#FFF; font-family: 'Days One', sans-serif; font-size:30px; height:10000px; text-align:center;}
.end {margin-top:9800px; font-size:50px}
<p>Criando uma FanPage para </p>
<p>Facebook com height maior do que 800px</p>
<p class="end">Fim</p>
Com isto temos uma Fan Page criada onde você pode trabalhar da maneira que bem entender. Estive lendo algumas recomendações onde é citado que temos sempre que usar chamadas de arquivos como css, js, direito do server onde esta hospedada sua Fan Page e não utilizando links absolutos, bem a cada dia o Facebook muda algo e é ai que temos que ficar de olho.
Disponibilizo aqui o link da fan page sem utilizar este método Página com Scroll e outro utilizando o método acima Página sem Scroll
Link para a page dentro do Facebook:
Espero que tenham gostado.
Sobre Celso
Prazer sou Celso, trabalho com informática desde os 17 anos, e com web desde os meus 19 anos, porém em 2008 conheci o Pedro, foi quando pude me espealizar como Front-End. Sinceramente não saberia fazer outra coisa e faço isso com muita paixão. Atualmente trabalho na agência Gruda em mim.
Muito bom! Parabéns Celso!
Opa Felipinho, tenho que ficar bom em algo né, tenho que editar e colocar o link da page dentro do face pra galera ver como fica tb!
Mas vlw, tenho mais coisas pra postar sobre isto!
Sempre fiz a arte pra fan page e ficava dependendo da TI pra subir para o Face. Obrigado pelo tutorial, Celso!
Pedro, Obrigado pelo feedback =)
Agora vc já pode se virar um pouco sozinho tb!
abs
[...] Leia mais: Como criar Fan Page no Facebook » Pinceladas da Web – HTML5 … [...]
Dae Celso!
Show o Tuto! Me ajudou bastante, ja estava trabalhando nisso, porem alguns problemas persistiam.
Agora com tudo pronto, to com problema para redimensionar o site dentro da fanpage. Pode dar um help.
Obrigado
abs
Add no skype celsodesign
abs
Putz so agora me liguei que é vespera de feriado. hehe
Valeu pela força ae Celso
Mas ja me achei aqui.
obrigado
Valeu mesmo!!!!
ajudou muitissimo!!!
Mto bom. esse tutorial ajuda mta gente.
Uma fangape para uma marca. um negócio vale mto a pena. pq não tem custo.
eu tenho um site, criei e hospedo com a Inter.net Hosting. mto bom
já atualizei ele no twitter e no facebook. esta ferando mtas vistas no site!
Fala Celso, ainda não segui o seu tutorial mas pelas pesquisas que estava fazendo o seu é o mais completo e com certeza vou fazer passo a passo.
Obrigado por divulgar seus conhecimentos nós só crescemos desta forma uns ajudando aos outros.
Parabéns e Sucesso.
Gustavo Catellani
Parabens pelo tuto, estava fazendo agora….soh falta a parte que tem que add no arquivo html da fanpage o codigo:
FB.init({
appId : ‘ID DA SUA APP’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelURL : ‘URL DA PÁGINA DA SUA FAN PAGE’, // channel.html file
oauth : true // enable OAuth 2.0
});
ai sim fica tudo certo….vlw pelo tuto cara!
ate
ops postei com as tags e nao foi..o codigo é esse:
chamada javascript para o arquivo = http://connect.facebook.net/en_US/all.js”
E a função:
FB.init({
appId : ‘ID DA SUA APP’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelURL : ‘URL DA PÁGINA DA SUA FAN PAGE’, // channel.html file
oauth : true // enable OAuth 2.0
});
Escrevi um ebook sobre como criar fanpages no Facebook, tem várias dicas por lá.
Se puder dar uma olhada: http://www.facemarketing.com.br
Abs
Cara deu um problema. esse facebook developer é pago? pois quando terminei o passo 5 ele voltou para o nome do app e pediu q eu confimasse ou com o telefone ou com o cartão de crédito??o q aconteceu??
Chrystian,
Você precisa confirmar sua conta tornandoa uma conta de desenvolvedor, a única forma de fazer isso é com o cartão de crésito, ou com o código enviado via celular. Pode ficar despreocupado que não é cobrado nada em seu cartão de crédito.
Cara eu pedir para enviar para o celular mais ainda não chegou o código de verificação, e pelo cartão de crédito eles pedem tudo até condigo de segurança do cartão e tem lá um campo local da cobrança…ai é bronca
Nossa era tudo que eu precisava!! parabéns pelo excelente post!! :D
Celso,
para quem quiser uma solução mais simples e em português para personalizar a fan page tem uma opção gratuita, o Minha Fanpage (http://apps.facebook.com/minhafanpage). Se puder avaliar para os outros comentarem… obrigado
QUERO CRIAR AGORA UM FACEBOOK
Ola, estou tentando personalizar a fan page da minha banda,
consegui fazer alguma coisa, mas queria mudar a pagina inicial,
quando fosse acessado aparecesse a aba do blog,
a pagina é facebook/ultralevebanda
se puder me dar umas dicas, seria muito bom, abraços
Acesse sua página, vá em Editar Página, na Guia Gerenciar Permissões vá até Guia de destino padrão e escolha a aba que irá abrir por default.
Já fiz isso, mas a pagina continua abrindo no mural e não na guia que eu personalizei, como que eu faço pra resolver esse bug?
Ola, quando eu crio o aplicativo…preencho tudo certinho…
ao lado esquerdo não aparece a opção “View App Profile Page” não tem essa opção, o que seria? :/
Olá, eu gerencio a fan page de uma empresa, e gostaria de mudar a página inicial para landing page, já fui no gerenciador de permissões, mas quando coloco a lading page só aparece para quem não é meu fã, que é, aparece o mural como página inicial. Pode me ajudar?
Pessoal,
Parece que o facebook removeu o link View App Profile Page para novos apps
Utilize a url https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL
YOUR_APP_ID = o ID da sua app
YOUR_URL = A url canvas da sua app http://apps.facebook.com/nomeapp
Uma dúvida, como passar a aba para página principal? Como no exemplo http://www.facebook.com/playboy
Vá até Editar informações da sua página, escolha a aba Gerenciar permissões e em Guia de destino padrão escolha qual é a aba default.
Conseguir configurar, obrigado.
Gostei muito deste post, parabéns!!!
Criei um teste, mas ta com erro.
‘Incorrect Function’
Alguém sabe o que posso estar fazendo errado?
http://apps.facebook.com/imaginera_portfolio/