Olá, neste tutorial iremos apresentar o passo a passo detalhado para que sua loja fique integrada com o Feed do Instagram de seu e-commerce.
Tenha as suas postagens do seu Instagram sendo exibidas em sua home na forma de um feed horizontal. Sabemos que hoje em dia o Instagram é fundamental para o meio comercial, caso você se dedique a essa rede social, tal ferramenta além de possibilitar mais seguidores para o seu perfil, também enriquece o design da sua home. Geralmente os clientes que se tornam seguidores, tendem a acompanhar as novidades do e-commerce, possibilitando o aumento das vendas.
1 - Configuração Conta do Facebook/ Geração dos Tokens de Integração
2 - Configuração do Módulo na Plataforma
3 - Busca de Imagens
4 - Gerenciador de Imagem
1 - Configuração Conta do Facebook - segue um passo a passo bem detalhado e atualizado para auxilio na geração dos Tokens de Integração.
Primeiro passo é verificar se a conta do instagram está associada no facebook business. Para isso acesse sua página no facebook.
Clique no link Gerenciar e no menu lateral da nova página acesse o menu Contas vinculadas.
Caso sua conta apareça vinculada como a imagem abaixo, está tudo ok para os próximos passos. Caso não apareça siga o passo a passo do instagram e vincule sua conta.
Primeiro passo acesse a url de desenvolvimento do facebook: https://developers.facebook.com/apps/
Clique no botão criar aplicativo. Irá aparecer um modal com os tipos de aplicativos. Selecione Empresa.
Clicando em Avançar um novo modal se abre. Ali você deve digitar o nome de seu aplicativo e selecionar sua conta empresarial e clicar em Criar Aplicativo.
Na próxima tela você irá selecionar produtos ao seu aplicativo. Aqui vamos clicar em configurar no produto: Graph API do Instagram.
Na próxima tela no menu lateral na seção Funções do app, clique em funções:
Depois clique em "Editar funções no gerenciador de negócios"
Agora no Meta, no menu esquerdo em contas, verifique se sua conta do Instagram está adicionada. Caso não esteja, adicione-a.
Ainda nesta tela na seção Usuários clique em Usuários do Sistema
Clique em adicionar (ao lado da busca) para adicionarmos um novo usuário de sistema.
No modal dê um nome ao usuário e coloque sua função como Administrador:
Aceite os termos.
Agora selecione o usuário criado e clique em "Adicionar Ativos"
No modal, na seção páginas, identifique primeiramente se sua página está em novas experiências de páginas ou páginas clássicas. Não se preocupe, o processo será o mesmo para ambas as páginas. Selecione sua página e dê controle total.
Ainda nessa tela, selecione a seção Apps, clique no app que criamos anteriormente e dê controle total no Gerenciar App. Salve as alterações.
Pronto, agora em usuários do sistema, selecione o usuário que criamos e clique em gerar novo token.
Selecione o aplicativo que criamos, escolha permanente para o tempo de expiração do token, e marque todas as opções disponíveis.
Clique no botão Gerar Token.
Copie seu Token para um local seguro e clique no botão ok.
Com isso temos o token do seu aplicativo para o instagram. Esse token garantirá acesso ao conteúdo de seu instagram. Utilizaremos ele para configurar no administrativo da plataforma.
Iremos precisar também do ID de sua página para configurar junto ao token. Siga esses passos para obter o ID.
Acesse sua página do facebook e na aba "Sobre" clique em "Transparência da Página" e depois em "Ver tudo".
No modal clique em "ir para biblioteca de anúncios"
Irá abrir uma nova página. Na Url dessa página, após o identificador page_id=, este é o id de sua página que precisaremos para configurar o módulo na plataforma.
Agora iremos configurar o token criado no site para serem exibidos as últimas postagens do instagram de forma automática.
2 - Configuração do Módulo do Feed na Plataforma.
Por favor acesse no Menu: Instagram >> Configuração
A Configuração é bem simples. Basta inserir o seu Nome de Usuário do Perfil do Instagram, o Token e ID da Página que criamos aqui no tutorial e Habilitar a funcionalidade.
- Buscar imagens do Instagram usando: Selecione a opção para buscar imagens do Instagram.
- Meu nome de usuário: você pode usar seu próprio nome de usuário adicionado ao nome de usuário do perfil do Instagram para buscar imagens.
- Hashtags: insira hashtags separadas por vírgulas para buscar imagens do Instagram. Ele buscará apenas imagens com hashtag do seu perfil.
- Nº de imagens do Instagram a serem buscadas: defina o número de imagens do Instagram a serem buscadas.
A funcionalidade possui demais configurações que podem ser configuradas conforme a sua escolha e necessidade:
Configurações de exibição de página
Para exibir imagens do Instagram em várias páginas, defina as configurações abaixo.
- Exibir imagens do Instagram na página inicial: selecione “SIM” para exibir imagens na página inicial.
- Número de imagens do Instagram a serem exibidas na página inicial: insira o número de imagens a serem exibidas na página inicial.
- Exibir imagens do Instagram na página da categoria: selecione “SIM” para exibir imagens na página da categoria.
- Número de imagens do Instagram a serem exibidas na página da categoria: insira o número de imagens a serem exibidas na página da categoria.
- Exibir imagens do Instagram na página do produto: selecione “SIM” para exibir imagens na página do produto.
- Número de imagens do Instagram a serem exibidas na página do produto: insira o número de imagens a serem exibidas na página do produto.
- Número de imagens do Instagram a serem exibidas na página do Instagram: insira o número de imagens a serem exibidas na página do Instagram.
Configurações de exibição pop-up
Defina as seguintes configurações de exibição pop-up:
- Visualização pop-up de imagem do Instagram: selecione a visualização pop-up do Instagram para mostrar no frontend.
- Legenda com hiperlink: adicione várias legendas com link para redirecionar os usuários quando eles clicarem nas legendas do pop-up.
- Feed de produtos: adicione vários SKUs de produtos para se adequar aos produtos na imagem. Ao clicar nos feeds de produtos, os usuários serão redirecionados para páginas de produtos vinculados.
- Reprodução automática de vídeo em pop-up: ative ou desative a reprodução automática de vídeo em pop-up.
Configurações de rastreamento UTM
Verifique o tráfego do Instagram no Google Analytics, definindo as configurações de rastreamento UTM conforme mostrado aqui - Esta funcionalidade é para rastreamento, são links de rastreamento que adicionam extensões/parâmetros específicas ao final de cada link para entender a origem do tráfego. É usado em campanhas de marketing, e analise das informações do Google Analytics. Esta opção não é obrigatória para o funcionamento do módulo
Caso habilitar a funcionalidade será mostrado umas funcionalidades:
- URLs com Rastreamento UTM: Habilitar URLs com Rastreamento UTM
- Origem da campanha: defina a origem da campanha.
- Nome da campanha: defina o nome da campanha .
- Mídia da campanha: defina a mídia da campanha.
3 - Busca de Imagens
Agora iremos vincular as imagens do Instagram ao seu site. Para isso acesse no Menu: Instagram >> Buscar Imagens. Na tela a seguir clique por favor no botão Buscar Novas Imagens:
Para buscar imagens do Instagram com base no nome de usuário ou hashtag conforme configurado. Você pode aprovar ou excluir as imagens buscadas conforme sua necessidade.
Assim irá buscar as imagens para serem escolhidas:
Agora é só clicar no ícone de confirmação verdinho para elas serem salvas:
**Na busca da imagem se caso a chave de integração estiver errada, o erro poderá ser apontado**
4 - Gerenciador de Imagem
Todas as imagens aprovadas listadas aqui. Você pode editar as informações da imagem para definir pontos de acesso, legendas, links, criar feed de produtos conforme definido ao configurar a extensão.
Após escolher as imagens que deseja exibir no site, vamos configurar cada uma delas acessando no Menu: Instagram >> Gerenciador de Imagem:
Você pode editar as configurações da cada imagem clicando no link Editar ou excluir a imagem se desejar também. Clicando em Editar, a tela a seguir será esta:
Nesta tela, você poderá configurar se desejar adicionar algum link de produto em alguma posição específica da imagem. Para isso é só clicar no ícone numeral à direita e arrastar para onde deseja na imagem e na configuração abaixo da imagem, somente inserir o sku do produto desejado. Você poderá adicionar até 5 pontos de acesso para cada imagem do Instagram e após isso salvar.
Se você definiu a exibição pop-up do Instagram como “Legenda com hiperlink”, pode editar a imagem para definir pontos de acesso, legendas e hiperlinks aqui. Você pode definir pontos de acesso simplesmente arrastando e soltando os pinos.
- Legenda-1: defina a legenda para redirecionar os usuários quando eles clicarem na legenda do pop-up.
- Hiperlink-1: defina o hiperlink para redirecionar os usuários quando eles clicarem na legenda do pop-up
- A posição do ponto de acesso X - 1 e a posição do ponto de acesso Y - 1 serão definidas automaticamente assim que você definir a posição dos pinos.
Da mesma forma, você pode configurar até 5 legendas e hiperlinks para a imagem do Instagram.
Se você definiu a exibição pop-up do Instagram como "Feed de Produto" na configuração, poderá encontrar configurações para configurar feeds de produtos para a imagem buscada. Defina as posições do ponto de acesso apenas arrastando e soltando os pinos e defina o SKU para caber em cada ponto de acesso.
SKU do produto - 1: Defina o SKU do produto para mostrar o feed do produto no pop-up.
A posição do ponto de acesso X – 1 e a posição do ponto de acesso Y – 1 serão definidas automaticamente assim que você definir a posição dos pinos.
Da mesma forma, você pode configurar 5 feeds de produtos com cada ponto de acesso para esta imagem.
Com isso a funcionalidade está totalmente configurada e exibindo em seu site:
