Tutorial como criar uma aba personalizada no Facebook

O objetivo deste tutorial é auxiliar na construção de uma aba personalizada no Facebook de forma simples e prática.

Para começar, vamos entender onde fica e para que serve uma aba personalizada do facebook.

A guia do facebook fica localizada na parte central do facebook e é ativada pelos links que ficam na coluna à direita, abaixo da imagem do perfil como mostra a figura abaixo:

Você pode criar uma guia personalizada para exibir uma mensagem de boas-vindas, propagandas de produtos, serviços e muitos outros tipos de conteúdos, basta utilizar a imaginação, por a “mão na massa” ou contratar uma empresa especializada.

Como faço para adicionar uma guia personalizada?

Existem vários aplicativos de terceiros que lhe auxiliam na montagem dessas abas além da própria alternativa do Facebook que apesar de ser um pouco mais complexa, lhe possibilita um maior grau de personalização.

Neste tutorial iremos utilizar o aplicativo Static HTML: iframe tabs.

Vamos aos passos:

1. Acesse a página do aplicativo Static HTML: iframe tabs através do link: http://www.facebook.com/apps/application.php?id=190322544333196

Na página do aplicativo clique no botão azul “Add Static HTML to a Page”.

2. Em seguida escolha a página onde deseja adicionar a nova aba.

3. Clique no botão azul “Adicionar Static HTML: iframe tabs”.

Logo em seguida você será redirecionado para a página escolhida. Confira se apareceu o item “Welcome” na lista abaixo da imagem do perfil.

4. Clicando no item “Welcome” você verá dois campos de texto:

Os campos aceitam HTML, CSS, JavaScript, tudo que é necessário para fazer uma página simples.

Porque dois campos?

No CAMPO 1 você adiciona o conteúdo que será visível para aqueles que são fans ou não da sua página.
O CAMPO 2 é para caso você queria, adicionar algum conteúdo exclusivo apenas para fãs visualizarem.

Desta forma você pode adicionar uma página de boas-vindas no CAMPO 1 e no CAMPO 2 uma página que será exibida logo após que os usuários curtirem a página.

5. Adicione o conteúdo que deseja no CAMPO 1. Abaixo segue um exemplo de código básico para inserir uma imagem.

Depois que adicionar o conteúdo clique no Botão “Save and view tab…”

Para visualizar como ficou a nova guia personalizada clique no link “View your tab as a non-fan”.

Conteúdo adicionado, agora vamos alterar o nome da Aba (Welcome).

6. Clique no Link “Editar informações” da sua página. Na lista a esquerda, clique no item “Aplicativos”.

Serão listados os aplicativos instalados em sua página. Procure o aplicativo Static HTML: iframe tabs na lista e clique no link “Editar configurações”:

Preencha o campo “Nome da guia personalizada” com o nome que desejar e clique em Salvar.

Agora vamos configurar para que nossa nova guia seja a primeira aba que o usuário veja quando acessar a página.

7. Em “Editar informações” clique no item “Gerenciar permissões”, segundo item da lista, logo depois altere “Guia de destino padrão” escolhendo a nova guia criada.

Extra: Para que servem as opções “No scrollbar” e “Enable FBML”?

Como os nomes já dizem, “No scrollbars” faz com que não apareça barra de rolagem na guia personalizada e “Enable FBML” possibilita que seja adicionado recursos extras do Facebook que utilizam o FBML.

O Static HTML: iframe tabs possibilita a criação de uma guia básica que possuem várias limitações de recursos, uma delas é não poder trocar o icone da estrelinha que aparece no item.

Para uma maior customização e utilização de recursos que vão deixar sua Fan Page mais interativa é necessário a utilização de outros métodos, um pouco mais complicados que necessitam de uma empresa especializada.

Estamos a disposição, qualquer dúvida é só deixar um comentário ou entrar em contato através da nossa página de contato: http://www.perfilvirtual.com.br/contato.

Tweet