Tableless

Busca Menu

O Front-end auxiliando o Marketing Digital

Seja o primeiro a comentar por

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:

1. Necessário ter um servidor com url segura, ou seja, que tenha url https://
2. Imagem 75×75 pixels (icone de aplicativo)
3. Imagem 16×16 pixels (favicon de aplicativo)
4. Imagem 111×74 pixels (icone de aba na page)

Dicas:

1. O Layout não deve ultrapassar o tamanho de 800 x 800 pixels, evitando barra de rolagem dentro da Page.
2. Criar uma pasta no servidor e o arquivo inicial como index
Exemplo: http://urldosite.com.br/app/index.html
3. Desenvolva o html, css e js normalmente e faça upload em uma pasta específica no servidor.
4. Após efetuar o upload de todos os arquivos, vamos precisar de 2 urls.

Exemplo:
A: http://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:

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
2. Clique no link “Criar um novo Aplicativo”
3. 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.
4. Digite o nome do seu app e clique em “Continuar”
5. App Criado.

App Facebook para Pages

Passo 2:

1. Selecione a Categoria: Aplicativos para Páginas
2. 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.

App Facebook para pages

3. Clique em App on Facebook e preencha os campos com as url absoluta e a url segura, conforme a imagem abaixo:

App Facebook para pages

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

App Facebook para pages

5. 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:

App Facebook para pages

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&

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

App Facebook para Pages

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

<meta property=”fb:app_id” content=”APP-ID”>

ou

<meta property=”fb:admins” content=”USER_ID”/>

User_ID = ID do seu Perfil, caso não saiba qual é o seu , veja o exemplo:

http://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

1. Central de ajuda:
http://www.facebook.com/help/?ref=pf
2. Documentação Developers (APP):
https://developers.facebook.com/docs/
3.Blog dos desenvolvedores:
https://developers.facebook.com/blog

Publicado no dia