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

Tutorial como criar uma aba personalizada no Facebook

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Tutorial como criar uma aba personalizada no Facebook

TUTORIAL COMO CRIAR UMA ABA PERSONALIZADA NO FACEBOOK

www.perfilvirtual.com.br

Page 2: Tutorial como criar uma aba personalizada no Facebook

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.

Page 3: Tutorial como criar uma aba personalizada no Facebook

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.

Page 4: Tutorial como criar uma aba personalizada no Facebook

COMO ADICIONAR UMA GUIA PERSONALIZADA?

Page 5: Tutorial como criar uma aba personalizada no Facebook

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.

Page 6: Tutorial como criar uma aba personalizada no Facebook

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

Page 7: Tutorial como criar uma aba personalizada no Facebook

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

Page 8: Tutorial como criar uma aba personalizada no Facebook

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

Page 9: Tutorial como criar uma aba personalizada no Facebook

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

Page 10: Tutorial como criar uma aba personalizada no Facebook

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.

Page 11: Tutorial como criar uma aba personalizada no Facebook

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.

Porque dois campos?

Page 12: Tutorial como criar uma aba personalizada no Facebook

5. Adicione o conteúdo que deseja no CAMPO 1.

Abaixo segue um exemplo de código básico para inserir uma imagem.

Page 13: Tutorial como criar uma aba personalizada no Facebook

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

Page 14: Tutorial como criar uma aba personalizada no Facebook

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”:

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

Page 15: Tutorial como criar uma aba personalizada no Facebook

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

Page 16: Tutorial como criar uma aba personalizada no Facebook

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.

Page 17: Tutorial como criar uma aba personalizada no Facebook

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

Page 18: Tutorial como criar uma aba personalizada no Facebook

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 ícone da estrelinha que aparece no item.

Page 19: Tutorial como criar uma aba personalizada no Facebook

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.