Como criar uma guia de boas-vindas personalizada para sua página em 3 passos

33 Flares Twitter 1 Facebook 18 Google+ 14 LinkedIn 0 Email -- Filament.io 33 Flares ×

Um dos grandes diferenciais de ter uma página no Facebook é a capacidade de personalização do espaço. Com uma página de boas-vindas personalizada, você deixa o espaço da sua empresa ou projeto no Facebook com a sua cara, sua identidade.

Vejam o exemplo de uma página com uma área personalizada para os fãs:

welcomepage

E agora como criar uma em 3 passos para a sua página.

1. Procure pelo aplicativo Static HTML: iFrame tabs. Na página do aplicativo, clique em Adicionar a minha página;

staticshtml

2. Repare que o aplicativo já está menu esquerdo da sua página. A configuração padrão do aplicativo configura a página personalizada com o nome de Welcome, mas você pode alterar isso. Clique em Editar informações, no topo da sua página, embaixo do nome e ao lado da categoria. Já na página das suas informações, clique em Aplicativos e depois em Editar configurações. Agora é só escolher o nome que deseja.

editarinformacoes

3. Para configurar e personalizar sua página de boas-vindas volte para a sua página e clique na página Welcome (ou o nome que você usou para a página personalizada). A imagem a seguir aparecerá:

staticshtml2

Agora basta inserir o código HTML que configura a sua página. Repare que o aplicativo ainda permite que você coloque um conteúdo exclusivo para as pessoas que já curtem a página na opção [Optional] Fans-only content.

Para configurar para que essa página seja a de boas-vindas clique em Editar informações e escolha a opção Gerenciar permissões, depois clique em Guia padrão de abertura e marque a opção desejada, criada pelo aplicativo Static HTML: iFrame Tabs.

editarinformacoes2

Pronto! Sua página já tem uma guia de boas-vindas personalizada.

Espero ter ajudado.

Fonte: All Facebook

93 thoughts on “Como criar uma guia de boas-vindas personalizada para sua página em 3 passos

  1. Pingback: Como criar uma guia de boas-vindas personalizada para sua págine … | Midia Social

  2. Pingback: Como criar uma guia de boas-vindas personalizada para sua págine … | ZiiPe

  3. Ótimo post, guilherme. segui os passos e deu tudo certo. deixa só eu tirar uma dúvida: Como faço para ter outras aba como essa, mas com conteúdo diferente? quantas abas são possíveis criar? obrigada!

    • Obrigado, Heloiza. Infelizmente esse aplicativo só permite a criação de uma aba. Coloquei esse no post por ser o mais simples, mas existem outros. Procure no próprio Facebook por Static ou iFrame.

      • Entendi, Guilherme. Bom, vou dar uma olhada nestes que você me indicou. Antes, eu estava usando o FBML e no próprio aplicativo eu conseguiu gerar mais abas, mas agora não consigo mais. Esta opção sumiu! Preciso criar mais duas abas para a página da minha empresa e não estou conseguindo.

        • Heloisa, o FBML foi retirado do Facebook. Por isso não é mais possível criar uma aba com esse aplicativo. Em breve faremos um tutorial caprichado sobre como criar uma aba personalizada, e como fazer para criar mais de uma.

  4. Olá..muito bom, mas como faço para q o icone da aba seja personalizado e não o icone do aplicativo(EStrela com um fundo escuro) ? Obrigado!

  5. Wellington, esse aplicativo não permite que você personalize o ícone. Em breve faremos um tutorial bem detalhado sobre como criar uma guia personalizada para a sua página e deixar do jeito que você quiser.

  6. fala Guilherme, tudo bem?

    Primeiramente parabéns pelo blog, simplesmente o melhor sobre Facebook.

    Eu estou com uma duvida, tenho uma fan page no Facebook e não consigo de maneira nenhuma colocar a aba personalizada como principal.

    Já fui em gerenciar permissões, já alterei a aba que gostaria de exibir como principal e nada acontece.

    A pagina tem todas as áreas de informação preenchida e tem 690 pessoas curtindo.

    o que pode estar acontecendo?

    Desde ja agradeço,

    • Pedro, algumas páginas com certas categorias não permitem essa escolha. Tivemos o mesmo problema com a página do TSF no facebook.
      Sugiro que você tente trocar a categoria da página e aí observe se a opção surge.
      Mas já aviso, na página do TSF isso não funcionou e preferimos fazer outra (porque ainda tínhamos poucos fãs).

  7. olá guilherme….parabéns pelo blog….

    Cara a questão da guia bem vindo na minha página do face, foi muito útil, porém não to conseguindo colocar uma foto…..ja exportei no fireworks com código html e css, mais nenhum dos dois funcionou…a foto não aparece na página ..aparece apenas o espaço onde seria a foto e aquele "x" no canto superior esquerdo ….será que voc6e poderia dar uma luz com relação a isso?

    desde já agradeço!!

  8. consegui, mas como priorizar a aba de bem vindo quando alguém entrar na minha página? quando a pessoa entrar quero que a primeira coisa que ela veja é as boas vindas e não o mural…

    • Ana no último quadro do tutorial acima, explica como fazer isso que você está querendo…. editar informações // gerenciar permissões // guia padrão de abertura // escolha o que melhor lhe convier.

  9. Galera do TSF, parabéns pelo blog. Ele é excelente. Muito didático.
    Vcs poderiam me ajudar em um detalhe? quais são as medidas ideais em pixel para configurar uma página do facebook personalizada? qual seria a largura máxima para a página de welcome e qual a largura para o avatar?
    Desde já muito obrigado.

    • Aldo, o tamanho máximo para a imagem de perfil é de 540 px (altura) x 180 px (largura). Porém lembre que a altura não pode ser 3x maior que a largura.
      Uma guia de boas vindas tem o limite de 520 pX de largura. não há limite para o comprimento.

      • Vivian, muito obrigado pela rápida resposta.
        Mais uma vez parabéns a toda equipe do TSF por este blog muito instrutivo.

  10. ESSA PÁG. DE BEM VINDO NÃO DÁ P/ ADD NO PERFIL? eU TENTEI, MAS NÃO CONSEGUI… ACHO Q É SÓ EM FUN PAGE NÉ?
    aGUARDO RESPOSTA,
    OBRIGADA!

  11. Olá guilherme! ótimo post! Só queria tirar uma dúvida, se eu quiser adicionar uma imagem na minah página de bem vindo, como eu faço? tem q ser em html? tem algum post q ensine trabalhar em hmtl? valeu!

    • tem que ser em html. Tem tutoriais sobre como programar em html na internet, é exatamente como programar um site. Abs

  12. Olá. Gostei muito do tópico, mas surgiu uma dúvida, como faço para inserir as imagens? Tipo, no html vc coloca o endereço da imagem no seu pc ou na web, tentei os dois mas não funcionou. e agora?

    • Olá, suellen

      gostaria de saber como vc conseguiu colocar as imagens na fan page testei varias formas e nenhuma deu certo…rsrs

      aguardo resposta

  13. Olá Guilherme!
    Já sou uma leitora fiel ao blog de vcs!!! ótimo conteúdo :-)
    agora, minha dúvida! Criei a aba de boas vindas para fan e non-fan.
    se o usuário for non-fan, a landing page será a welcome (como configurei) . no entanto, se já é fan, a landing é o mural … e eu gostaria que continuasse sendo a welcome "fan".
    É isso mesmo? o face do entrega a pagina welcome para os non-fan?

  14. Olá guilherme, tudo bem? consegui fazer o passo a passo direitinho, porém no meu facebook não aparece essa opção "guia padrão de abertura", e eu gostaria de configurar a página criada com html para ser a de boas vindas. saberia me falar pq não encontro essa opção? Obrigada, yve

    • Yve, o Guilherme anda ocupado então eu respondo. =P
      Algumas categorias de páginas não dão a opção de escolher a guia de abertura. Você não está fazendo nada de errado.

      Você pode trocar a categoria da página no Editar Página e tentar novamente. Mas já aviso, às vezes não tem jeito. Tivemos esse problema com a nossa página do TSF no Facebook. =/

      • Obrigada pela ajuda, Vivian. Você sabe me falar se a partir do momento que vc altera a categoria da página, essa opção aparece imediatamente? obrigada, yve

  15. Me sinto um idiota não conseguindo fazer a imagem do html aparecer, já tentei várias formas e nada. Algum caminho de html mais simples e funcional?

  16. Olá!
    Tudo corre bem nesta explicação menos no último passo:

    A opção "Guia padrão de abertura" não existe na minha página!! Como é que posso resolver isto?

    Muito obrigado!

  17. fiz tudo desde a criação das imagens para inserir a instalação do html na pagina! Agora na parte de configuração o aplicativo não aparece em meus aplicativos! o que devo fazer??? Estou perdido! Quero Coloca-la como vi em outras paginas! o CONTEÚDO da pagina só é visto depois de curtir a pagina! e Antes de Curtir aparece uma tela pedindo pra curtir e depois de curtida aparece a outra tela! Como já disse já criei tudo e já instalei na minha pagina agora preciso de configura-lo mas como se não aparece junto aos meus aplicativos! Será que AUTOMATICAMENTE ela já faz isso por mim pois já que coloquei os CÓDIGOS nos lugares corretos!

  18. O Post é de abril/2011. segui o tutorial certinho mas na página inicial não aparece as páginas que criei, mesmo configurando nas propriedades para aparecer como principal. não sei se tem a ver com a nova versão do facebook. porém notem que em muitas outras páginas existem ícones diferentes para esta página principal, então deve haver outros apps para esta finalidade que funcione. se souber de algum atualizem o artigo. abç.

  19. Ola, EU SEGUI O PASSO A PASSO CERTINHO.
    MAS QDO ABRO A TELA DE BEM VINDO..APARECE SO O HTML.
    A IMAGEM NAO.
    JA TESTEI NO SITE QUE VC PASSOU TODAS AS IMAGENS QUE TENTO DA ERRO. DE IMAGSHACK, DROPBOX, PICASA..JA USEI VARIOS SITES DE UPLOAD.MAS QDO COLOCO O LINK E APERTO ENTER NO NAVEGADOR ELA ABRE NORMAL.
    PR FAVOR DE UMA OLHADA. http://www.facebook.com/pages/Eu-Amo-e-Respeito-a
    OBRIGADA DESDE JA

  20. Vlw cara deu tudo certo mas eu fiquei com uma dúvida : como eu faço para personalizar as palavras ou colocar fotos no welcome, porque quando eu escrevo so aparece aquelas letrinhas, queria saber como personalizar

  21. Deu tudo certo aqui.
    Só que depois que a pessoa clica em Curtir, continua na mesma página de boas-vindas.
    Teria como redirecionar ela para o Mural não?

  22. Guilherme, eu tenho o meu perfil pessoal, e a Fan Page da minha empresa.
    Quando eu tendo adicionar o aplicativo para a minha Fan Page, o Facebook alerta que eu preciso usar o meu perfil pessoal.
    Como utilizar na Fan Page, se pedem para eu usar o meu perfil social?

    Desculpa a minha ignorância.

    Obrigado se puder me ajudar.

  23. oi, na minha página, Gerenciar permissões, depois não existe esta opção "Guia padrão de abertura". Porque e como faço?

  24. Olá guilherme eu criei uma guia personalizada aonde criamos os aplicativos e ela ta mostrando na pagina mais o problema que só eu vejo vc saberia me explicar o pq ?

  25. Não aparece o guia de abertura padrão, já inseri o código HTML, já salvei e não aparece dentro de gerenciar permissões.

  26. Guilherme, boa tarde.
    Parabéns pelo seu post, bem claro e instrutivo.
    Verifiquei que este tutotial foi escrito no ano passado, e a configuração nas páginas do Facebook
    terem sofrido alterações.
    Mas eu não encontrei esta parte que falas "Para configurar para que essa página seja a de boas-vindas clique em Editar informações e escolha a opção Gerenciar permissões, depois clique em Guia padrão de abertura e marque a opção desejada, criada pelo aplicativo Static HTML: iFrame Tabs."
    Podes me ajudar?
    Agradeço.
    Abs.
    Lucia Costa

  27. Olá! Sobre Como criar uma guia de boas-vindas personalizada para sua página em 3 passos. Mexi na minha Fãn page e não encontrei os caminhos que você citou, estamos falando do mesmo facebook? O meu é aquele do Mark Zuckerberg
    .

  28. Olá, Guilherme!! Parabéns pelo blog. Realmente muito prático!! Como essa sua postagem ocorreu em 2011, acho que algumas atualizações ocorreram pois não aparece na minha página a opção 'Welcome", assim como não aparece nada pra eu configurar. Será que fiz algo errado? O aplicativo aparece no meu perfil mas não na fanpage que administro.

    Poderia me dar uma dica de como concluir essa etapa?

    Abs,

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>