O Front-end auxiliando o Marketing Digital

Nos dias atuais estamos ligados a semântica, seo, performance, boas práticas, entre outros assuntos, que tal ajudar também a equipe de Marketing Digital?

por Deivid Marques 30/09/2012 Comentários

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

  1. Desenvolva o html, css e js normalmente e faça upload em uma pasta específica no servidor.

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

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

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

  1. 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&

  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

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

ou

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

  1. Documentação Developers (APP):

https://developers.facebook.com/docs/

3.Blog dos desenvolvedores:

https://developers.facebook.com/blog