Aos desenvolvedores front-ends, que trabalham em agências que possuem a área de Marketing Digital, saiba que vocês podem ser muito úteis para esses profissionais.
Nesse post resolvi escrever sobre criação de um app simples e deixá-lo como Aba Personalizada dentro de uma Página do Facebook, gerando insights (dados estatísticos) para a equipe de Marketing Digital, pois assim fica mais fácil para criar estratégias e mensurar os resultados gerados pela própria rede social.
Em outras palavras, vamos pegar o conteúdo hospedado por você em um servidor e “embedar” dentro de uma Página do Facebook, como se fosse um iframe, porém, seguindo as recomendações da maior rede social até o momento.
Iniciando a estrutura:
-
Necessário ter um servidor com url segura, ou seja, que tenha url https://
-
Imagem 75×75 pixels (icone de aplicativo)
-
Imagem 16×16 pixels (favicon de aplicativo)
-
Imagem 111×74 pixels (icone de aba na page)
Dicas:
-
O Layout não deve ultrapassar o tamanho de 800 x 800 pixels, evitando barra de rolagem dentro da Page.
-
Criar uma pasta no servidor e o arquivo inicial como index
Exemplo: https://urldosite.com.br/app/index.html
-
Desenvolva o html, css e js normalmente e faça upload em uma pasta específica no servidor.
-
Após efetuar o upload de todos os arquivos, vamos precisar de 2 urls.
Exemplo:
A: https://urldosite.com.br/app/
B: https://urlsegura.com.br/app
Obs: Para saber o endereço da url segura, é necessário ver com sua hospedagem.
Passo 1:
-
Entre no link https://developers.facebook.com/apps ou buscar, no fim do sidebar direito, o link Mais » Desenvolvedores, depois clicar no link do topo: Aplicativos
-
Clique no link “Criar um novo Aplicativo”
-
Para criar apps do Facebook é necessário que sua conta seja validada com um número de celular ou cartão de crédito, caso já tenha sido, basta continuar.
-
Digite o nome do seu app e clique em “Continuar”
-
App Criado.
Passo 2:
-
Selecione a Categoria: Aplicativos para Páginas
-
Inserindo Imagens do seu app
A: Imagem que será exibida em ambiente de Aplicativos no Facebook
B: Imagem de ícone que será exibida minimizada na Aba da Pagina no Facebook.
- Clique em App on Facebook e preencha os campos com as url absoluta e a url segura, conforme a imagem abaixo:
- Clique em Page Tab (legenda da imagem abaixo)
A: Nome que vai aparecer na Aba da Página no Facebook
B: url do projeto
C: url segura do projeto
D: Link para inserir a imagem que aparecerá na Aba da Página no Facebook (lembrando que o tamanho é de: 111 x 74 pixels)
E/F: Definição de largura de conteúdo do Aplicativo dentro da Página no Facebook
- Clique em “Salvar Alterações”
Criando a Aba na Página.
1.Pronto! Seu app já foi criado. Agora vou ensinar a mágica de criar a Aba dentro da sua Página no Facebook, trazendo esse conteúdo, para isso, é necessário ser Administrador da Página no Facebook.
A: Ao Criar o app ele terá um ID único conforme a imagem abaixo:
2: Copie e cole a url abaixo em seu navegador com o ID do seu app.
Exemplo: https://www.facebook.com/add.php?api_key=APP-ID&pages=1&
- Em seguida, abrirá uma janela mostrando todas as página que você for administrador, basta selecionar a página escolhida e clicar em “Adicionar”, conforme a imagem abaixo
**IMPORTANTE:
**
No seu html, é necessário inserir um código simples, para que os profissionais de Marketing Digital possam acessar esses dados estatísticos gerados pelo próprio Facebook.
Inserindo o código abaixo no seu html, basta colocar o ID do aplicativo, o mesmo que usamos na url para criar a Aba no Facebook.
Insira o html abaixo entre a tag HEAD
ou
User_ID = ID do seu Perfil, caso não saiba qual é o seu , veja o exemplo:
https://graph.facebook.com/deividmarquess
ID= 100000470381955
Bem, espero ter ajudado a todos, qualquer dúvida basta deixar uma mensagem por aqui.
Na minha Page, existem alguns apps Promocinais que eu já criei: https://www.facebook.com/deividmarques.com.br
Em caso de dúvidas, confira as documentações do Facebook
- Central de ajuda:
https://www.facebook.com/help/?ref=pf
- Documentação Developers (APP):
https://developers.facebook.com/docs/
3.Blog dos desenvolvedores:
