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

woobox-painel-configuracoes-apps-personalizado-facebook

Painel de configurações do WooBox

  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

 

configuracoes-aba-personalizada-facebook

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.

PUBLICADO POR

Dennis Altermann

Fundador-Editor aqui no blog Midiatismo, trabalhando com marketing digital na DuPont Pioneer do Brasil. Entusiasta e estudioso nas áreas de comunicação, cultura, comportamento e tecnologias digitais.

Novidades e atualizações, direto em seu e-mail

  • Thiago

    Bom dia Dennis Altermann

    Você saberia me explicar porque sempre que eu clico em https://developers.facebook.com/apps sou direcionado para a minha página principal da minha Fan Page e nunca para a página dos desenvolvedores?

    • Para acessar o painel de desenvolvedor você precisa ter um perfil no Facebook, não pode ser login da fan page.

      • Thiago

        Ata agora entendi. Por isso nunca conseguia criar um aplicativo para aplicar no meu blog na parte de comentários. Valeu ai Dennis Altermann por esclarecer a minha duvida, já estava achando que o problema era a minha Fan Page, pelo visto não era. Abraço e parabéns pelo ótimo trabalho que esta fazendo aqui. Fui

  • Tiago Siqueira

    Boa Noite, Se eu não for mais administrador da fanpage, as abas que foram criadas por mim são deletadas?

  • Mônica

    Olá, poderia explicar melhor o campo da criação do aplicativo?

    “Escolha o nome do seu aplicativo e o endereço dele.” Qual endereço? O da página no Face, a url do aplicativo, ou a url do site da empresa?

    Eu gostaria de ter uma aba com o site da empresa, mas não funcionou, a página fica em branco, então fiquei em dúvida se o problema não estaria na configuração do aplicativo na criação…

    Agradeço se responder, pq vejo tutoriais por aí, o pessoal interage, pergunta, mas fica a “ver navios” sem resposta! rsrs

    Grata

    • Quando você clica em criar o aplicativo, uma tela pedindo nome do aplicativo e o endereço que ele vai ter aparece. O Nome na verdade é opcional, ele vai pedir apenas o nome que você vai usar e qual categoria ele se encaixa.

  • Carlos Eduardo S. Van Ondheusd

    Oi, Dennis.. fiz tudo certinho e tal, mas na página do Facebook Developers está escrito assim:

    “This app is in Sandbox Mode(Only visible to Admins, Developers and Testers)”

    O que acontece: ele fica visível apenas para os administradores da página, mas o público em geral não tem acesso. Como mudar isso?

    • Olá Carlos, tudo bem? Então, normalmente isso não deveria acontecer, mas de alguma forma você colocou o seu app em modo de testes. Vá nas configurações do seu app, em algum lugar deve ter a opção “Desabilitar Modo Sandbox” ou algo semelhante.

      • Carlos Eduardo S. Van Ondheusd

        Ok, obrigado! Vou tentar!

  • Tiago De Faveri Giusti

    Oi, Dennis!

    Bem legal a dica, útil pra mim, mas de algum modo criei o aplicativo, e vinculei a tab, mas para mim mostra normal e tal, para para qualquer outro usuário do Facebook não. Tem algum delay disso ou deveria ficar disponível na hora?

    Tente acessar por exemplo a minha URL: http://statictab.com/2sxhs9d

    Obrigado!

    • Tiago, deveria ficar disponível na hora. Você tem que dar uma olhada se nas configurações não tem nada marcado para estar visível apenas para administradores, pois eu acho que existe essa funcionalidade.

  • Matheus Bardeli

    Acho que faltou uma observação no post Dennis. O Facebook só aceita páginas com certificado digital (https), a certificação SSL. Creio que por isso alguns não estão conseguindo exibir o conteúdo de suas abas. Por isso muita gente opta por usar apenas uma imagem, sem o conteúdo html.

    • Não tenho certeza disso. Na verdade você precisa de um servidor com HTTPS ativado e a maioria dos serviços de abas HTML oferecem isso, mesmo que o endereço que você vá usar não seja. Por exemplo, está aba que usamos na fan page do Midiatismo:

      https://www.facebook.com/Midiatismo/app_208195102528120

      • Matheus Bardeli

        Que estranho Dennis. Vocês utilizaram qual app para possibilitar a exibição de imagens em http? Mas você pode até ver que os botões que remetem para links fora do Facebook sem a certificação não funcionam como o “Posts”, “E-mail” e até o “Menu”. Apenas Twitter e Google que abrem.

        • Eu uso o WooBox. Realmente os links externos sem HTTPS não funcionam.

          • Evandro Alkimim

            Estou tendo o mesmo problema, como vocês solucionaram isso?

            Cheguei a mandar um email para o WOOBOX, mas o pessoal não respondeu. Há outra ferramenta que faça o mesmo que o Woobox nesse sentido (e funcione?)

            Eu utilizava a exibição de URL’s externar dentro da TAB.

          • Parece que o WooBox realmente desabilitou o uso de conteúdo em HTTP normal dentro das abas, portanto, você pode apenas criar o código inteiro do HTML para dentro da página ou conseguir um domínio com HTTPS (que geralmente custa caro, então depende da necessidade de cada um). Uma possibilidade é fazer com que a aba redireciona para o site que você quer quando acessado – isso é possível no WooBox, mesmo sem HTTPS no site.

          • Evandro Alkimim

            Sim, eu enviei um email pra eles e fui respondido da seguinte maneira:
            “Hi Evandro,

            Chrome, Firefox, and other browser vendors recently made an update to their browsers that’s causing these display issues. With Firefox 23 and Chrome 30, they no longer display “mixed security content” by default. Link

            Since Facebook uses HTTPS by default now, that means any content you host in our tab will have to use HTTPS as well to display properly. For images you can use http://imgur.com as a free hosting solution just by changing the links to HTTPS. If you’re hosting things from your own site, you may need to get an SSL certificate if you don’t already have one and change the URL to HTTPS.

            This has always affected non-secure content in tabs, but with more users updating to the latest version, this issue is becoming more common.

            Here are a couple of links to help you resolve the issue:
            http://blog.woobox.com/2013/09/when-good-html-fangates-go-bad/
            http://help.woobox.com/customer/portal/articles/1270944-html-fangate-not-displaying-in-firefox-23-0

            Thank you for using Woobox! Please let me know if I can help with anything else.
            Sam

            https://www.woobox.com
            http://help.woobox.com

          • Essa resposta eles estão publicando em vários lugares, achei a mesma em alguns FAQs e fóruns por ai. Infelizmente é isso mesmo.

  • Aline Domene

    Para mim nem aparece a opção “html fangates”… será que não é mais free?

    • Eu não tenho certeza se essa opção existe, vou ter que dar uma conferida depois.

  • Rayane

    Olá ^^ Eu gostaria de criar uma fangate na qual os fãs insiram o e-mail e eles podem baixar um pdf por exemplo. Já vi diversos tutorias, mas eu não entendo de HTML e preciso saber de algum site que seja free para poder cadastrar esses e-mails. Precisa de hospedagem o pdf? É visível que estou perdida né? Por favor me ajudem ^^

    • O Facebook não hospeda nenhum arquivo (nem pdf e nem HTML), portanto você deve ter esse material todo hospedado em algum lugar. Hoje em dia não é mais possível fazer “fan gates”, você poderá apenas criar uma aba onde a pessoa pode ter acesso a esse material colocando o email dela, mas para isso precisará usar algum serviço já existente ou desenvolver algo conforme a necessidade.

  • zerivan

    Este erro :Form-gate is turned off. Visitors do not complete an input form to access your content.