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

1. TUTORIAL COMO CRIAR UMA ABA PERSONALIZADA NO FACEBOOK www.perfilvirtual.com.br

2. 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 imagem.

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

4. COMO ADICIONAR UMA GUIA PERSONALIZADA?

5. 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: iframetabs.

6. 1. Acesse a página do aplicativo Static HTML: iframetabs através do link: http://www.facebook.com/apps/application.php?id=190322544333196 Na página do aplicativo clique no botão azul “AddStatic HTML to a Page”.

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

8. 3. Clique no botão azul “Adicionar Static HTML: iframetabs”.

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

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

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

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

13. Depois que adicionar o conteúdo clique no Botão “Saveandviewtab…” Para visualizar como ficou a nova guia personalizada clique no link “Viewyourtab as a non-fan”.

14. 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: iframetabs na lista e clique no link “Editar configurações”:

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

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

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

18. 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: iframetabs possibilita a criação de uma guia básica que possuem várias limitações de recursos, uma delas é não poder trocar o ícone da estrelinha que aparece no item.

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

20. SEJA QUAL FOR SEU PERFIL NÓS TEMOS A SOLUÇÃO. www.perfilvirtual.com.br www.perfilvirtual.com.br/blog twitter.com/perfil_virtual facebook.com/perfilvirtual slideshare.net/perfilvirtual contato: contato@perfilvirtual.com.br