terça-feira, 3 de setembro de 2013

Criando uma aba personalizada no Facebook com o aplicativo WooBox + HTML

Uma dúvida muita comum que recebemos por email e por comentários no blog é sobre a criação de abas personalizas nas fan pages do Facebook. As perguntas são as mais diversas, mais geralmente envolvem como construir uma aba interessante para os seus fãs. É importante salientar que é possível fazer praticamente qualquer coisa dentro da aba, já que ela é apenas uma janela para uma página. Vale ressaltar que está opção está disponível apenas para fan pages, caso você tenha um perfil, sugerimos que você faça a conversão para fan page para usar esta funcionalidade.

Resolvi então fazer este simples tutorial para mostrar como é simples criar uma aba personalizada na sua fan page do Facebook usando apenas o aplicativo WooBox e um pouco de conhecimento em HTML. É importante lembrar que você não pode obrigar as pessoas a cair automaticamente nesta aba (como eram antigamente as chamadas fan gates), mas você pode sim criar conteúdo que seja visível apenas para fás da sua página e também pode compartilhar o link que leve as pessoas diretamente para esta página (muito útil para usar com anúncios e email marketing).

Antes de começar a usar este aplicativo, você deve criar uma conta no WooBox acessando woobox.com/login. Não há custos para usar esta aplicação, mas ele oferece diversos aplicativos pagos, caso você tenha interesse. Para usar as abas em HTML uma conta gratuita é o suficiente.

Primeiro passo, a primeira aba personalizada

Ao criar a sua conta, você será direcionado para a tela do painel de administração de aplicações. Como você pode ver na imagem abaixo, existem diversas aplicativos gratuitos que você pode usar em sua página, como Twitter, Youtube, etc. Neste momento vamos escolher a opção “HTML Fangates“.
1- Nesta página você pode ver todas as abas HTML que você já criou. Você pode clicar em “Add a new HTML Fangate Tab” para adicionar uma nova aba.

2- Agora você vai ver uma caixa de texto que é onde você poderá adicionar qualquer conteúdo HTML, imagem ou URL. Você pode usar qualquer conteúdo HTML, como no caso da nossa fan page, onde adicionamos uma lista de botões para as categorias do blog. Você pode adicionar uma imagem que deve ter no máximo 800px de largura. E no caso da URL, ele irá abrir um iFrame onde a URL que você colocou aparece dentro, está opção acaba sendo muito interessante porque você pode criar dentro do site da sua empresa qualquer sistema web que irá funcionar através desta janela na fan page.

3- Abaixo da caixa de texto há três opções para você utilizar: Conteúdo para quem não é fã da página; Conteúdo para amigo de fãs; E conteúdo relativo a um formulário (a pessoa só irá ver se responder sim em uma pesquisa, por exemplo). Se você deixar todas as opções marcadas em off, qualquer um poderá ver o conteúdo daquela aba;

4- Para construir o conteúdo da sua aba, é interessante você ter conhecimento em HTML e CSS, caso não tenha, sugiro procurar tutoriais ou ajuda de profissionais para lidar com isso. Você também tem a opção de utilizar uma imagem;

5- Após esta etapa, salve as configurações e vá até a sua fan page. Você deve ter notado com um novo aplicativo surgiu entre os que você já tinha, provavelmente com o nome de Welcome. Clique nele para visualizar a sua aba. Agora precisamos apenas persnonalizá-la.

6- Obs: Recomendamos você guardar o HTML criado em um arquivo separado, como forma de backup.



Segundo passo, personalizar a sua aba

Após criar a sua aba personalizada, você deve ter notado que ela tem um ícone e nome padrão. Caso você queira personalizar, siga as instruções:

1- Abra a aba que você deseja personalizar;

2- Acima do seu conteúdo deve aparecer a opção “Admin Options” (não se preocupe, ela aparece apenas para você);

3- Clique em “Settings“;

4- Nesta tela você pode alterar informações da sua fan page, adicionar ícone da aba, alterar o nome e imagem da aba;

5- Para altera o ícone, clique no link que diz: “Instructions for using your own tab icon.“;

6- Ele irá abrir um novo link que lhe ensina a adicionar um ícone personalizado;

7- Você deve entrar no painel de desenvolvedor do Facebook (https://developers.facebook.com/apps)e criar uma nova aplicação;

8- Escolha o nome do seu aplicativo e o endereço dele. Você vai ter agora uma aplicação, que contém dois números, o App ID e App Secret (por segurança, não mostre estes números para ninguém);

9- Posicione o mouse em cima do ícone e clique em “Editar“;

10- Nesta nova tela, na parte de baixo, você vai ver que há campos para você adicionar ícones e banners. Adicione todas as imagens que lhe pede para o eu app estar completo.

11- Clique em “Salvar alterações“

12- Agora entre neste link para terminar de configurar a sua aba personalizada;

13- Nesta página você deve adicionar o seu App ID e App Secret da aplicação que acabou de configurar;

14- Ele vai pedir para você adicionar a sua página. Prossiga e selecione a página na qual você quer adicionar a aba personalizada;

15- Agora a sua aba deve estar em sua página com o ícone personalizado. Provavelmente você terá que adicionar novamente o código HTML ou URL;

16- Pronto!

Compartilhe a sua aba

Agora que você tem uma aba personalizada, você deve compartilhar ela. Para que as pessoas vejam, sugiro que coloque em destaque na sua fan page, compartilhe nas redes sociais, email marketing e até investindo em Google AdWords.

FONTE: CorpTV