em
facebook-pages

Como criar Fan Page no Facebook

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

Como criar Fan Page no Facebook

2 – Na tela abaixo clique no botão “+ Create New App”

Como criar Fan Page no Facebook

3 – Nesta tela será onde você vai entrar com o Nome do seu Aplicativo, Local e aceitar os Temos do Facebook.

Como criar Fan Page no Facebook

4 – Preencha como no exemplo abaixo e clique em Continuar:

Como criar Fan Page no Facebook

5 – Nesta tela de Capcha preencha o campo com o texto que aparece na imagem e clique em Enviar.

Como criar Fan Page no Facebook

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.

Como criar Fan Page no Facebook

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.

Como criar Fan Page no Facebook

8 – Nesta tela atente-se aos principais pontos no qual devem ser preenchidos:

Como criar Fan Page no Facebook

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:





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}

Criando uma FanPage para

Facebook com height maior do que 800px

Fim

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:

Com Scroll
Sem Scroll

Espero que tenham gostado.

Comentários

  1. Muito bom! Parabéns Celso!

    por Felipe — Responder
    1. 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!

      por Celso — Responder
  2. Sempre fiz a arte pra fan page e ficava dependendo da TI pra subir para o Face. Obrigado pelo tutorial, Celso!

    por Pedro Responder
    1. Pedro, Obrigado pelo feedback =)

      Agora vc já pode se virar um pouco sozinho tb!

      abs

      por Celso — Responder
  3. Pingback: Como criar Fan Page no Facebook » Pinceladas da Web – HTML5 … : Link Mundial

  4. 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

    por Roberto — Responder
    1. Add no skype celsodesign

      abs

      por Celso — Responder
      1. Putz so agora me liguei que é vespera de feriado. hehe
        Valeu pela força ae Celso
        Mas ja me achei aqui.

        obrigado

        por Roberto —
  5. Valeu mesmo!!!!
    ajudou muitissimo!!!

    por Gisele — Responder
  6. 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!

    por ana rodrigues — Responder
  7. 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

    por Gustavo Catellani Responder
  8. 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

    por Diego — Responder
  9. 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
    });

    por Diego — Responder
  10. 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

    por Felipe Spina Responder
  11. 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??

    por Chrystian — Responder
    1. 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.

      por Pedro Rogério Responder
      1. 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

        por Chrystian —
  12. Nossa era tudo que eu precisava!! parabéns pelo excelente post!! :D

    por Caio Ribeiro Pereira Responder
  13. 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

    por Marcel Responder
  14. QUERO CRIAR AGORA UM FACEBOOK

    por LILIAN — Responder
  15. 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

    por ph — Responder
    1. 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.

      por Pedro Rogério Responder
      1. 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?

        por phh —
  16. 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? :/

    por Fernando Responder
  17. 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?

    por Franciele — Responder
  18. 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

    por Ronni Responder
  19. Uma dúvida, como passar a aba para página principal? Como no exemplo http://www.facebook.com/playboy

    por Ronni Responder
    1. 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.

      por Pedro Rogério Responder
      1. Conseguir configurar, obrigado.

        por Ronni
  20. Gostei muito deste post, parabéns!!!

    por Duda Polibiano Responder
  21. Criei um teste, mas ta com erro.
    ‘Incorrect Function’
    Alguém sabe o que posso estar fazendo errado?
    http://apps.facebook.com/imaginera_portfolio/

    por Wallace Erick Responder
  22. API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application.

    por Wallace Erick Responder
    1. Estou com o mesmo problema, alguém encontrou a solução?

      por João — Responder
  23. Olá, estou com uma dúvida… Na parte dos Links Relacionados (Related links), não acho esse nome View App Profile Page. Só See App Timeline View, clico e não aparece a opção “adicionar a minha página”. É no face novo com a linha do tempo, não sei se interfere em algo.
    Aguardo resposta. Obrigada!

    por Larissa — Responder
  24. Criei a minha fan page mas não esta aparecendo o menu lateral esquerdo nem o campo de pesquisa. Como posso fazer para exibi-las. Obrigado

    por fabio Responder
  25. fan page

    por hevelyn vevezinha marinho Responder
  26. Estou com o mesmo problema do Fabio;
    As pessoas não estão conseguindo visualizar a Fan Page (www.facebook.com/RedeBrasilTV) no campo de pesquisa.

    Alguém sabe como resolver isso?
    Aguardo Resposta.

    por Joice Responder
  27. Não consigo criar a Fan Page da minha empresa

    Você não possui os requisitos mínimos para entrar no Facebook.

    por Keeper Eventos Responder
  28. Você não possui os requisitos mínimos para entrar no Facebook.

    essa é a mensagem de erro….. Que requisitos são esses? Alguém sabe me informar….

    por Keeper Eventos Responder
  29. Boa noite!
    Valeu pelas dicas deste site com relação a Fan Page. Foram orientações úteis para o desenvolvimento inicial de nossa FP.

    Obrigado.

    Webmaster
    Itemol

    por Instituto Teológico Monte das Oliveiras Responder
  30. Qual o custo mensal para ter uma fan page?

    por Daniela — Responder
    1. É grátis!

      por Ronni — Responder

Deixe uma resposta

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

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>