Há muita informação sobre como editar o ícone de uma aba numa fanpage do Facebook, mas poucos tutoriais são sobre a nova versão da interface, por enquanto só utilizada por desenvolvedores. Além do fato de que depende muito da configuração do seu servidor para que tudo funcione corretamente. A Agência RS Web Interactive lista a seguir um possível erro que ocorre durante a personalização desse ícone da tab da Fanpage, saiba como solucionar.

ATENÇÃO: As diretrizes do Facebook em relação ao que é explicado neste post foram alteradas. Desde do dia 09/12/2011 o Facebook bloqueou os aplicativos feitos dessa forma, agora ele exige uma linguagem específica. Os desenvolvedores do Facebook alegam que há falha nas métricas quando o aplicativo é feito em outro ambiente e linguagem, por isso decidiram uniformizar. Todos que desenvolveram abas e aplicativos deverão seguir o novo parâmetro. A partir de 1º de Fevereiro de 2012 esses aplicativos feitos fora do ambiente e linguagem do Facebook serão excluídos automaticamente. Veja a nota completa aqui: http://developers.facebook.com/blog/post/611/

 

Quando você cria uma fanpage, uma das primeiras ações é criar uma aba nova e personalizar de forma que fique categorizado e com a identidade visual adequada a marca do seu cliente.

Para isso, foram desenvolvidos aplicativos (ou apps). Um dos mais utilizados é o Static HTML no qual você insere um código HTML, CSS ou JavaScript. Mas, o que fazer para personalizar o ícone que, geralmente, é uma estrela branca dentro de um quadradinho cinza?

 

 

Para você ter o direito de editar o ícone da aba ou tab, é necessário criar um aplicativo no Facebook. Há várias formas de criar esse app, mas vamos listar aqui a forma mais simples. Ou, pelo menos, seria a maneira tecnicamente mais simples, mas isso somente se o seu servidor estiver configurado com hospedagem Linux.

Caso contrário, é necessário algumas configurações no servidor e FTP para que seu app (sua nova aba) funcione corretamente.

 

Tutorial de Como Criar App no Facebook para Personalizar seu Ícone na Tab da Fanpage

 

Obs. 1: É importante ter em mente que, neste caso, criar um app é a mesma coisa que criar uma aba.

Obs. 2: Neste caso, a hospedagem é feita na Locaweb, com plataforma Windows.

 

1. Por favor, leia o 2º parágrafo deste post antes de continuar!
Entre no Facebook logado e vá até o rodapé. Clique em “Desenvolvedores”;

 

 

2. Entre em “Desenvolva aplicativos no Facebook”;

 

 

3. Vá no Menu superior e clique em “Aplicativos”;

 

 

4. O Facebook pedirá sua senha para continuar;

 

 

5. Em seguida, é necessário permitir o acesso a esse novo ambiente de desenvolvedores de app do Facebook;

 

 

6. Pronto. Depois do cadastro efetuado, você verá uma tela inicial de Desenvolvedores de Aplicativos par ao Facebook. Clique no botão no canto superior direito “Criar Novo Aplicativo”;

 

 

7. Abrirá um lightbox onde você decidirá o nome de exibição do aplicativo (da aba/tab) e a Política da Plataforma Facebook.

 

 

8. Em seguida, digite a senha de Verificação de Segurança;

 

 

9. Logo de início aparecerá a opção de editar a Imagem e o Ícone do aplicativo (aba/tab). Você pode inserir uma imagem diferente do ícone;

 

 

10. Depois de inserir o ícone desejado, vá até o final da página e clique na opção “Tab Página” para personalizar sua aba;

 

 

11. Você precisa preencher os três primeiros campos que são:

a) “Page Tab Name” – O nome que deseja nomear a aba/tab;
b) “Page Tab URL” – A URL onde está a página criada;
c) “Secure Page Tab URL” – A mesma página que colocou acima, mas em HTTPS.

 

E então, basta salvar as alterações.

 

 

ATENÇÃO: A dificuldade encontra-se nesse momento. A simplicidade dessas edições vai depender da configuração do seu servidor. Então, veja mais abaixo o que fazer para que tudo seja finalizado corretamente.

 

12. Deverá aparecer a seguinte mensagem: “Alterações salvas. Note que as alterações podem levar alguns minutos para propagar a todos os servidores.”

 

 

13. Agora vá até o lado esquerdo e clique no penúltimo link “View App Profile Page”, para você ir até a página do aplicativo que acabou de criar.

 

 

14. Já na página do App criado, clique no primeiro link do lado esquerdo “Adicionar à minha página”;

 

 

15. Abrirá um litbox listando todas suas fanpages. Escolha a página que deseja inserir o app cirado.

 

 

16. Vá até sua fanpage e observe que o aplicativo (aba/tab) foi inserido no Menu lateral da esquerda;

 

 

17. Clique na aba e pronto! Você terá sua nova tab com ícone personalizado.

 

 

Servidor x App do Facebook

 

A configuração do seu servidor interefe no funcionamento do aplicativo criado. Vale lembrar que criar app, neste caso, é a mesma coisa que criar uma nova aba/tab na sua fanpage. Também vale destacar que essa nova aba será uma página web, ou seja, você cria uma página, como se fosse uma nova categoria do seu site, mas cria no tamanho ideal para aparecer no Facebook (460×670 ou 520×480).

Quando você cria o app já define a URL da onde está vindo o aplicativo, conforme mostrado no tutorial acima a partir da etapa nº 10, essa URL do app nada mais é do que uma página do teu site. Essa página criada para aparecer na aba do Facebook não aparecerá no seu site que servirá apenas para hospedá-la.

Quando for criar um app no Facebook, é preciso muita atenção ao que se refere a ambiente livre e ambiente seguro (HTTP e HTTPS). Também fique atento ao servidor, se for plataforma Microsoft, a página deve estar em .asp.

 

Servidor LINUX

 

Se o seu servidor tiver hospedagem da plataforma Linux e for da Locaweb, a criação do app é mais simples. Quando chegar na etapa nº 11, deverá preencher da seguinte maneira:

 

 

Obs.: Geralmente, o Facebook lê perfeitamente o HTML de servidores configurados com hospedagem em Linux. Então, basta salvar com extensão .html. Na Page Tab com URL Segura, você deve inserir o HTTPS e “websiteseguro” como mostra no exemplo acima.

 

Servidor MICROSOFT

 

O Facebook mostra ERRO se você aplicar o mesmo exemplo acima em página de servidores com hospedagem Microsoft. E ainda mais: se teu site está hospedado na Locaweb, por exemplo, é necessário dizer o seu número de SSL quando for preencher a Page Tab com URL Segura.

 

Veja passo-a-passo como configurar:

 

1. Primeiro verifique seu número de SSL individual no servidor;

 

 

 

2. A página que for criar pode ser em HTML, mas se tratando da Microsoft, precisa tê-la em extensão .asp para que o Facebook leia corretamente o código da página. Basta duplicar o arquivo em .html e salvá-lo em .asp, pode ser feito na mesma pasta do seu FTP. Antes do “websiteseguro” coloque o seu número de SSL individual, conforme o exemplo a seguir:

 

 

Dicas:

 

• Não esqueça de conferir o código-fonte dessas URLs que serão suas abas da fanpage. É recomendável que esteja tudo em HTTP (imagem, bibliotecas .js, etc).
• A URL Segura pode variar de hospedagem para hospedagem. Nos exemplos acima trata-se da Locaweb. No UOL Host, por exemplo, é “USUARIO.sslblindado.com” (via Victor Hugo Odo).
• É importante ficar atento às suas configurações no Apache: “para interpretar tags de linguagem server side (ASP, PHP, JSP, etc), é necessário declarar a linguagem para que o servidor IIS ou Apache “entre em ação”. Isso é feito com a extensão do arquivo, no caso, .asp.” (via Victor Hugo Odo).
• Leia também “Facebook HTTPS / SSL – Veja como habilitar navegação segura do Facebook“.

Ps.: Agradecimento especial ao Rafael Hernandez que nos ajudou a realizar testes em servidores diversos.

Veja Também: