Adicionar feed do instagram no footer da loja

VTEX in your native language 🌎 Português
,
1

Oi! Alguém poderia me ajudar, gostaria de saber como posso adicionar o código para exibir o feed do instagram na minha página? Está em html, estou usando o vtex io, mas não estou usando o react.

Obrigada.

2 Likes
2

Você consegue compartilhar uma referência ou imagem que indique melhor o que você quer fazer? E também como está estruturado seu tema, sem usar React?

Na pergunta How to embed an Instagram feed into my website diz que não há opção nativa para embed de feed, só de posts. Você está usando alguma ferramenta diferente, tipo LightWidget?

3

Olá, sim, me deram um código gerado no https://curator.io/, tentei colocá-lo dentro de um sandbox block mas não funciona.

4

Você já testou o código fora do VTEX IO? Se puder, compartilha o snippet aqui para tentarmos replicar seu problema.

5

Oi! George, este é o código. Tente modificar as aspas duplas para aspas simples, mas também não pega.

<!-- Place <div> tag where you want the feed to appear -->
<div id="curator-feed-default-feed-layout"><a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a></div>
<!-- The Javascript can be moved to the end of the html page before the </body> tag -->
<script type="text/javascript">
/ curator-feed-default-feed-layout /
(function(){
var i, e, d = document, s = "script";i = d.createElement("script");i.async = 1;
i.src = "https://cdn.curator.io/published/82db78ac-d99f-4710-8002-3eb5b7d42019.js";
e = d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);
})();
</script>
6

Testei colar o código que você compartilhou num arquivo local para testar e não funcionou… Aí olhei um pouco mais da documentação do Curator sobre Widgets e cheguei no seguinte exemplo que funcionou localmente:

<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.curator.io/1.3/css/curator.css"/>
</head>

<body>
  <div id="curator-feed">
    <a href="https://curator.io" target="_blank" class="crt-logo">Powered by Curator.io</a>
  </div>
  
  <script type="text/javascript" src="https://cdn.curator.io/1.3/js/curator.nodep.js"></script>
  <script type="text/javascript">
      // While you're testing
      Curator.debug = true;
  
      // Change FEED_ID to your unique FEED_ID
      var widget = new Curator.Waterfall({
          container:'#curator-feed',
          feedId:'82db78ac-d99f-4710-8002-3eb5b7d42019'
      });
  </script>
</body>

</html>

Veja se você consegue incluir trechos desse exemplo funcional nos lugares certos da sua app para chegar no resultado esperado. Note que temos:

  • <link> no header para importar estilos CSS do widget
  • <div> no body para inserir o widget na página
  • <script> para importar o script que puxa os dados do feed do Instagram

Não sei dizer a melhor forma de fazer isso com meu conhecimento atual de VTEX IO, mas imagino que não fique tudo num só componente. Quando descobrir, não deixa de trazer a resposta final para compartilhar esse conhecimento com a comunidade!

2 Likes
7

Muito obrigado, vou tentar o seu conselho. Quando eu conseguir eu vou compartilhá-lo, sem dúvida. Bom dia!

1 Like
8

Olá @MariaRuiz tudo bem com você?

Gostaria de perguntar se conseguiu seguir com a requisição com o insight do George para compartilharmos aqui dentro da Community esse conteúdo :blush:

Contribuindo um pouquinho do meu conhecimento sobre o tópico, nossa integração com o instagram é feita através do facebook:

https://help.vtex.com/tutorial/integrando-com-facebook--2CSxoNsJqM2KGsqi66WAaY?locale=pt

Para implementar um quadro de imagens do instagram no site da sua loja, recomendamos o apoio de um desenvolvedor ou agência para efetuar alguns ajustes no Front-End. Basicamente, o que deve ser feito é gerar o código HTML embed das imagens e depois inserir esse conteúdo no template da página que desejam exibir no site. Todas as informações necessárias podem ser consultadas diretamente nessa documentação do instagram.

Faz sentido de alguma maneira? De qualquer forma, peço para compartilhar, se possível se conseguiram seguir de alguma maneira com a requisição.

1 Like
9

Olá @MariaRuiz eu já implementei o curator no VTEX IO utilizando o sandbox desta forma (já coloquei seu script):

"sandbox#instagram": {
	"props": {
	  "width": "100%",
	  "height": "auto",
	  "allowCookies": false,
	  "initialContent": "<div id='curator-feed-default-feed-layout'><a href='https://curator.io' target='_blank' class='crt-logo crt-tag'>Powered by Curator.io</a></div><script type='text/javascript'>(function(){var i, e, d = document, s = 'script';i = d.createElement('script');i.async = 1;i.src = 'https://cdn.curator.io/published/82db78ac-d99f-4710-8002-3eb5b7d42019.js';e = d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);})();</script>"
	}
}

Precisei fazer algumas modificações para inserir diretamente na página, no caso deixei tudo em uma unica linha e alterei as " por '.

1 Like