Landing Page com ícone e nome personalizado na sua Fan Page do Facebook

Atualização: As recentes novidades do Facebook no painel mudaram um pouco tutorial. Clique aqui e saiba como fazer o mesmo no novo painel.

Alguns dias atrás publicamos aqui 7 dicas para construir uma aba personalizada na sua fan page, mas muitos leitores perguntaram como seria possível fazer uma aba com ícone personalizado e nome personalizado.
Existe uma forma de fazer, mas ela ficou um pouco mais complicada agora que o Facebook está exigindo que o conteúdo também esteja disponível em um link HTTPS (conexão segura).
Como o HTTPS se tornou padrão e nem todos tem esta disponibilidade, encontrei uma aplicação que permite que você use o servidor deles para gerar este HTTPS. O tutorial também serve para quem tiver site com a conexão HTTPS ativada.

#1 Criando aplicação para a Aba

Para começar você vai precisar criar uma aplicação para Facebook.

Acesse página dos desenvolvedores ( https://www.facebook.com/developers/apps.php )
Clique em “+ Criar nova aplicativo“;
Selecione o nome do aplicativo (Qualquer nome serve);
Selecione “Concordo” e clique “Create App”;
Preencha o código de verificação;

#2 Aplicativo criado, agora tem que configurar

Ao criar a aplicação você vai entrar na página de configuração deste aplicativo, configure de acordo com tutorial:

Clique em “Change your icon” e selecione a imagem que será usada; (Obs.: Máximo permitido é arquivo 16×16 de 5mb)
Clique em “Altere o seu logotipo” e selecione a imagem que será usada para página da aplicação, esta etapa não é realmente necessária; (Obs.: Máximo permitido é 75×75 de 5mb);
As outras informações não há necessidade de preencher, mas fica a seu critério;
No menu a esquerda, clique em “Facebook Integration“;

#3 Configurando o servidor de onde a aba vai puxar o conteúdo

Caso você tenha acesso a uma página HTTPS, você pode utilizar o endereço neste passo. Caso não tenha servidor com HTTPS habilitado, basta preencher como explicado na continuação deste tutorial.
Para quem for usar servidor próprio, são destas URL preenchidas que o Facebook vai puxar o conteúdo para aba, ou seja, você pode colocar a sua URL e configurar como for melhor.

Preencha esta tela com as seguintes informações:

Canvas URL: http://{Application_ID}.iframehost.com/
Secure Canvas URL: https://{Application_ID}.iframehost.com/
Tab URL: http://{Application_ID}.iframehost.com/tab
Secure Tab URL: https://{Application_ID}.iframehost.com/tab

OBS.: Substitua {Application_ID} pelo ID da Aplicação que se encontro no topo da página.

Preencha as outras informações apenas se você quiser, não há necessidade

#4 Aplicação pronta, e agora?

Você vai ser direcionada para página com mais informações sobre aplicação, você vai precisar adicionar ela a sua página agora.

Clique e abra em uma nova aba o link “Application Profile Page”, no menu da direita;
Na página que abriu, a da aplicação, clique em “Adicionar à minha página“;
Escolha a página que a aba deve ser adicionada;
Navegue até a sua página;

#5 Aba criada, agora temos que personalizar ela

Na sua fan page você vai notar que surgiu uma nova aba, com o nome que você tinha escolhido para a aplicação.

Acesse a nova aba criada em sua Fan Page;
Adicione o “App Secret” que se encontra lá na página do aplicativo, como mostrado no passo #4;
Clique novamente sobre a aba criada;
Autorize a aplicação, como na imagem a baixo;
Configure a seu gosto, adicionado texto, imagens, html, enfim;