# Feed do Instagram

Nessa aba, encontramos a funcionalidade para disponibilizar os últimos posts realizados no instagram de forma dinâmica e para que isso ocorra é necessário gerar um Token dentro do facebook developer através do link <https://developers.facebook.com>

### Exibir o Slide do Instagram na home

Deixando o botão dessa maneira <img src="https://content.gitbook.com/content/QWExIc2KnwZm9IV43uMH/blobs/8FRYpnPPEPLB2eaWpyYA/image.png" alt="" data-size="line"> você estará deixando a opção habilitada, caso o botão esteja <img src="https://content.gitbook.com/content/QWExIc2KnwZm9IV43uMH/blobs/qgoNugUDDKrkvb7EDtH3/image.png" alt="" data-size="line"> dessa outra forma, a opção está desabilitada e a funcionalidade não irá funcionar.

Quando ativa exibirá a funcionalidade a seguir, porém, mostrando os posts do instagram de sua loja virtual após seguir o passo a passo abaixo.

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2Ft66fsg0Lq6SBDnHU0PvO%2Fscreenshot.png?alt=media&#x26;token=c4b465e7-1acb-439b-a0b9-c48b11ca57ca" alt=""><figcaption></figcaption></figure>

### Como gerar o Token

Como dito anteriormente, é necessário acessar a página do facebook developer através do link  <https://developers.facebook.com>, após isso, se você não estiver logado em seu Facebook, será necessário logar com seu usuário e senha clicando no menu Entrar conforme mostramos na imagem abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FI06fbwpJxBqZBoYV2qgp%2Fscreenshot%20(1).png?alt=media&#x26;token=ba22cae7-16a8-4a59-a944-a3174b5b5d92" alt=""><figcaption></figcaption></figure>

Após fazer o login com seu usuário e senha do Facebook, o botão entrar será substituúdo por Meus Aplicativos ou My Apps conforme mostramos na imagem abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FPzdTT0IgsTQqURKG5RyK%2FFacebook-meus-aplicativos.png?alt=media&#x26;token=337d2ef5-1ebf-45b6-8f63-703445ba4732" alt=""><figcaption></figcaption></figure>

Feito isso, agora clique no botão My Apps ou Meus Aplicativos de acordo com a tradução.

Assim que clicar em My Apps você será redirecionado para uma página igual mostramos abaixo, porém, provavelmente vocês não terão nenhum aplicativo adicionado, este caso, a sua página estará em branco, mostrando apenas o botão verde Criar Aplicativo ou Create App e a coluna da lateral esquerda:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FOQiQaCIHeKakt5Yvz6mG%2FMeus-aplicativos-Facebook.png?alt=media&#x26;token=55c8d89a-0579-46e0-9706-befba09d9395" alt=""><figcaption></figcaption></figure>

Clique no botão Create App ou Criar Aplicativo ![](https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FZDdL9IwKIFfO9uijZfAD%2Fbotao-criar-app.png?alt=media\&token=a65515e6-2307-4c12-9db3-cca14a2932c8) , feito isso, o facebook abrirá o próximo passo a seguir:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F1bP3lpKunMgyjsnXbmaQ%2Fpasso-1.png?alt=media&#x26;token=346110d5-42dd-4f98-a298-91bb2dd30ec0" alt=""><figcaption></figcaption></figure>

Abrindo essa tela, clique em Next ![](https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FdLW2y6gFj5QQOyq1cA4E%2Fscreenshot%20\(2\).png?alt=media\&token=35734ac4-dbf5-4e2d-ad90-e0f5965d84cd) e logo em seguida será exibida o passo 2 para que você possa selecionar a opção **Other** ou traduzido **Outros**, conforme a imagem abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FHDcuIh4PXSNBSUU3GGUS%2Fpasso-2.png?alt=media&#x26;token=ffdb386b-e909-4ec5-a1b6-9321db3314f7" alt=""><figcaption></figcaption></figure>

&#x20;Selecione a opção igual a da imagem acima e clique em Next ![](https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FdLW2y6gFj5QQOyq1cA4E%2Fscreenshot%20\(2\).png?alt=media\&token=35734ac4-dbf5-4e2d-ad90-e0f5965d84cd). Na seguinte tela você irá selecionar a primeira opção **Consumer** e clicar em **Next** ![](https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FdLW2y6gFj5QQOyq1cA4E%2Fscreenshot%20\(2\).png?alt=media\&token=35734ac4-dbf5-4e2d-ad90-e0f5965d84cd).

A imagem que irá aparecer é exatamente igual a que mostramos abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F05WwlDECDL4DSSp6WmJR%2Fscreenshot%20(3).png?alt=media&#x26;token=415e41db-a44e-4d2f-9b25-fb9d9eb7daa4" alt=""><figcaption></figcaption></figure>

Feito isso, o próximo passo é adicionar o nome de seu aplicativo, pode ser qualquer nome, porém as palavras Facebook e Instagram são palavras reservadas e não podem ser utilizadas no nome do Aplicativo. &#x20;

A tela que aparecerá é exatamente como mostramos a seguir:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FhcW9E8LCpA5msynni8us%2Fscreenshot%20(4).png?alt=media&#x26;token=86c8c5d4-4afa-4436-965e-6c0540f35cca" alt=""><figcaption></figcaption></figure>

Onde está escrito, Add an App Name(Adicione um nome para seu aplicativo), informe o nome que desejar e clique em Create App(Criar Aplicativo) ![](https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FZDdL9IwKIFfO9uijZfAD%2Fbotao-criar-app.png?alt=media\&token=a65515e6-2307-4c12-9db3-cca14a2932c8).

Quando clicar em Create App(Criar Aplicativo), será necessário informar sua senha(senha do seu facebook), conforme mostramos abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FKw3HATJU8rbpPJewXvgS%2Fscreenshot%20(5).png?alt=media&#x26;token=3a751c18-09ee-4e74-a0d9-a7159fabb39d" alt=""><figcaption></figcaption></figure>

Após informar a senha de seu facebook, você será redirecionado para a tela a seguir parra que possa fazer o passo 3 dessa configuração, conforme a imagem abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FiP6Pc0mqCDXDTcqa3acF%2Fscreenshot%20(6).png?alt=media&#x26;token=436f4891-ed70-474e-b5ce-ac839dbeb183" alt=""><figcaption></figcaption></figure>

Clique então em Basic dentro do menu App Settings(Configuração do Aplicativo) e então você será redirecionado para a página onde será necessário informar alguns dados, conforme a página abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FeScpXeTIo9C38krPS2Ej%2Fscreenshot%20(7).png?alt=media&#x26;token=a2b04412-cb47-456f-930e-71622e983df3" alt=""><figcaption></figcaption></figure>

Rolando a página, teremos outras informações a serem adicionadas, como Endereço, Bairro, Cidade, Cep, País e E-mail:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FU6ZrFS3XvHq1gHGXGTN6%2Fscreenshot%20(8).png?alt=media&#x26;token=053da9ae-d951-4625-a5e3-6be216daf6c6" alt=""><figcaption></figcaption></figure>

Após informar todos os dados obrigatórios dessa tela, clique em Save Changes(Salvar) ![](https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FdLfcyfNYhGxDcKYY7WVd%2Fscreenshot%20\(9\).png?alt=media\&token=44b35104-b61e-4265-b6cc-5d3cdc09d047) .

Feito isso, na lateral esqueda da tela, você verá um link chamado Add Product(Adicionar Produto) onde você voltará para a tela anterior, conforma mostramos abaixo

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FWrFkfXaJmsUF2qhjKbiR%2Fscreenshot%20(10).png?alt=media&#x26;token=87c75455-56f9-4c8d-96b0-af571a6c02f4" alt=""><figcaption></figcaption></figure>

Selecione então aa opção Instagram Basic Display clicando em Set Up (Configuração)

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FcDEh3dP6uvqGVHwwqED7%2Fscreenshot%20(11).png?alt=media&#x26;token=21ac7956-c8c9-44f7-851f-d7422925fd1a" alt=""><figcaption></figcaption></figure>

Após clicar no botão acima, você será direcionado para a tela a seguir, conforme mostramos abaixo.

Clique entãono botão Create New App

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2Fr69NXQmEOelmCzIWXIdp%2Fscreenshot%20(12).png?alt=media&#x26;token=5304fc77-8758-4fa2-a43f-f9d68180b49b" alt=""><figcaption></figcaption></figure>

Feito isso, o Facebook irá mostrar um PopUp com a seguinte informação:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FC6VKAXaCeuHifB5ldLC1%2Fscreenshot%20(14).png?alt=media&#x26;token=e9ffd665-e598-4aca-9db2-bb98a242bc60" alt=""><figcaption></figcaption></figure>

Clique apenas em Create App(Criar Aplicativo), a seguir role a página até encontrar o **User Token Generator** e clique no botão **Add or Remove Instagram Testers.**

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F2SKakYcxd69WYUQABNDW%2Fscreenshot%20(15).png?alt=media&#x26;token=43eeabf8-50f7-460a-9aca-f919aa0d00e0" alt=""><figcaption></figcaption></figure>

O Passo a seguir será Adicionar o instagram que será gerado o Token, para isso você será redirecionado para outra tela conforma abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F6iW1JhfluIxqqIgX0Ak1%2Fscreenshot%20(17).png?alt=media&#x26;token=ea44cda5-a9c3-4d31-b753-72640d2433b1" alt=""><figcaption></figcaption></figure>

Clique em Add People(Adicionar Pessoa) e em seguida o Facebook mostrará um PopUp onde você irá selecionar a Opção Instagram Tester e informar no campo abaixo o nome exato do instagram de sua loja virtual

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FRBLUB8XhPf90Q2286PZe%2Fscreenshot%20(18).png?alt=media&#x26;token=5db99d09-7349-4c94-a664-e80f436d5b0f" alt=""><figcaption></figcaption></figure>

no nosso caso adicionamos o instagram da agência para exemplificar como ficará

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FFhphe7UbXul3fByYWJMl%2Fscreenshot%20(19).png?alt=media&#x26;token=dc776ca2-b89f-458a-80eb-b7e89f2c6e62" alt=""><figcaption></figcaption></figure>

Clique em add(Adicionar) e você voltará para a página anterior, porem, agora com o convite enviado para  o instagram informado com o Status Pendente

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FBxzOHDbg2vTWPjLjUTjz%2Fscreenshot%20(20).png?alt=media&#x26;token=199e38f9-a466-4a71-890a-319ee6c09b63" alt=""><figcaption></figcaption></figure>

O próximo passo é ir até o instagram de sua loja virtual e procurar a Engrenagem onde você ira procurar pela opção Apps e Sites

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F1CqOawDKQJlphf4FOMpd%2Fscreenshot%20(21).png?alt=media&#x26;token=67d5b96f-c6d3-43b7-a83b-ab80a03ca21a" alt=""><figcaption></figcaption></figure>

Após clicar na engrenagem, o Instagram irá exibir um PopUp e você irá clicar na primeira opção chamada Apps e Sites conforme mostramos abaixo

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FSOv969R9GazurIPGigxh%2Fscreenshot%20(22).png?alt=media&#x26;token=b55506d1-1f89-44db-894a-cdb632ae0677" alt=""><figcaption></figcaption></figure>

Após o passo anterior você será redirecionados para a tela abaixo onde você irá clicar em Convites do testador e clicar em Aceitar

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F25Rrpqpis4Rz7nKbQ5Dd%2Fscreenshot%20(23).png?alt=media&#x26;token=d6617948-7271-4e45-85ee-ab1ccb9b55ca" alt=""><figcaption></figcaption></figure>

Volte ao Aplicativo na página do Facebook onde você criou aplicativo, procure pela opção Instagram Basic Display e clique em Basic Display para abrir a página onde vamos finalmente gerar o token

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FXY1t4ICjl80EDNJP2E1N%2Fscreenshot%20(25).png?alt=media&#x26;token=c55503b7-9264-4f5c-8d84-c51ba743aeec" alt=""><figcaption></figcaption></figure>

Role a página até você encontrar a opção conforme mostramos abaixo e cllique em Generate Token

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FIV7HbtZqbDnK3pqsbn8T%2Fscreenshot%20(26).png?alt=media&#x26;token=82cce175-849e-40cc-8df4-d174487a260d" alt=""><figcaption></figcaption></figure>

Finalmente, após todos os passos realizados corretamente, você poderá gerar o Token clicando no botão informado acima, o Facebook abrirá um PopUp para que você logue no instagram e permita a geração do Token:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2Fa65fsuK3Mg4oDehVpoCD%2Fscreenshot%20(27).png?alt=media&#x26;token=b66bec93-ca3e-4bc2-9c58-093c01d09615" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FIn2kOWEQCpGzPV7LI1r3%2Fscreenshot%20(28).png?alt=media&#x26;token=492eed8c-9fcc-4454-8b1a-80b9c941633b" alt=""><figcaption></figcaption></figure>

Após permitir, o popup será fechado automaticamente e você verá a seguinte tela abaixo:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2F5HnYDdwz4vb7f9TbP8YO%2Fscreenshot%20(29).png?alt=media&#x26;token=1a35efec-81d2-455e-b1f0-ff13b8de235f" alt=""><figcaption></figcaption></figure>

Clique no chekbox para visualizar o Token, copie ele clicando no botão Copy(copiar), vá até o administrador da Tray, em Minha loja -> aparencia da loja e clique em editar o tema, onde você será redirecionado para o editor do tema:

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FxoFflbxFcbD1lwKXfFet%2Fscreenshot%20(30).png?alt=media&#x26;token=ea21d205-ec54-48f4-ab8d-ce0dccef120c" alt=""><figcaption></figcaption></figure>

Após carregar o editor clique em Layout -> Feed do Instagram

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FHP4tkb5jXvrzumA6ldWQ%2Fscreenshot%20(31).png?alt=media&#x26;token=81c904c8-b9f0-40ee-bd5a-03a65c6bf11e" alt=""><figcaption></figcaption></figure>

onde abrirá a página a seguir, procure pelo campo Token do Instagram e apague qualquer informação que existir no local e cole o token gerado nos passos anterior

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FDk7TqSN1tFbF5p53Nu4G%2Fscreenshot%20(32).png?alt=media&#x26;token=2916259f-aa85-4f14-ae5e-a7bb1679dae1" alt=""><figcaption></figcaption></figure>

**Exibir Feed do instagrma na home:** Irá habilitar o slide na home

**Personalize o Titulo:** Você poderá personalizar o titulo a ser exibido acima do feed do instagram

**Personalize o Sub - Titulo**: Personalize o sub-titulo abaixo do titulo&#x20;

**Nosso instagram**: Informe aqui o instagram de sua loja sem o @ arroba

**Destaque a cor do nome da rede social**: Escolha uma cor para destacar o nome de sua rede social do instagram

**Quantidade posts a ser exibido por slide**: Selecione a quantidade de posts em destaque deseja exibir por slide, recomendamos deixar 4&#x20;

## Salvando as alterações

Após fazer as todos os ajustes neste local, lembre-se sempre de clicar no botão salvar alterações, pois, caso isso não ocorra poderá perde-las e terá que refaze-las novamente.

<figure><img src="https://content.gitbook.com/content/QWExIc2KnwZm9IV43uMH/blobs/aNd2X77onmWz5ChTsKun/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3365875819-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQWExIc2KnwZm9IV43uMH%2Fuploads%2FosLIQRYwsSzswmRk5NYs%2Fscreenshot%20(33).png?alt=media&#x26;token=615bd921-682e-4226-8762-fcafd07ac26f" alt=""><figcaption></figcaption></figure>