Como ativar o Plugin Instagram na Loja Integrada

Pessoal, criei esse post para ensinar como colocar o plugin do instagram na loja integrada.

Segue os detalhes e passo a passo de como fazer isto:

  • Entre no painel da loja integrada
    https://app.lojaintegrada.com.br/painel/
  • No canto superior direito, clique no icone da engrenagem, depois “Incluir codigo HTML”
O atributo alt desta imagem está vazio. O nome do arquivo é image.png
  • Clique no botão de “Adicionar codigo”
  • Insira um codigo HTML conforme a imagem:
O atributo alt desta imagem está vazio. O nome do arquivo é image-1-1024x619.png

Você ainda não tem um sistema de avaliação inteligente na sua loja? Entre em contato conosco e saiba mais, estamos oferecendo teste grátis de 30 dias para conhecer nossa ferramenta


  • No campo conteudo, coloque o seguinte script:
    ATENÇÃO: SUBSTITUA O NOME_DO_SEU_INSTAGRAM, PELO SEU INSTAGRAM (sem o @)
    Se voce desejar nao ter link para redirecionar para o post do instagram, somente mudar o texto “var ativarLinkInstagram=true;” para “var ativarLinkInstagram=false;”
<script>

	var nomeInstagram="NOME_DO_SEU_INSTAGRAM";
        var ativarLinkInstagram=true;

	if ($("body").is(".pagina-inicial, .pagina-produto, .pagina-categoria, .pagina-pagina, .pagina-marca")){var newScript2=document.createElement("script"); (newScript2.type="text/javascript"), (newScript2.src="https://cdn.awsli.com.br/637/637407/arquivos/insta.js"), document.getElementsByTagName("head")[0].appendChild(newScript2), setTimeout(function (){0==$(".insta-title").length ? $("body").is(".pagina-categoria") ? $("body #corpo > .conteiner .secao-principal").append( "<div id='dvInstagram' class='block-insta'><div class='conteiner clearfix'><div class='insta-title'><span><img id='imgInsta' src='https://cdn.awsli.com.br/637/637407/arquivos/indice.png' width='30' style='max-width: 30px;'>instagram</span></div><div id='dvInsta'></div></div></div>" ) : $("body #corpo > .conteiner > div:first-child").append( "<div id='dvInstagram' class='block-insta'><div class='conteiner clearfix'><div class='insta-title'><span><img id='imgInsta' src='https://cdn.awsli.com.br/637/637407/arquivos/indice.png' width='30' style='max-width: 30px;'>instagram</span></div><div id='dvInsta'></div></div></div>" ) : $("#instafeed").html("").attr("id", "dvInsta"); var i=4; $(window).width() < 761 && (i=1), new InstagramFeed({username: nomeInstagram, container: $("#dvInsta")[0], display_profile: !1, display_biography: !1, display_gallery: !0, callback: null, styling: !0, items: 4, items_per_row: i, margin: 3, lazy_load: !0});if (!ativarLinkInstagram){setTimeout(function (){$("#dvInstagram a").attr("href", "javascript:void(0)").removeAttr("target").attr("style", "cursor: initial !important;");}, 4e3);}}, 4e3);}


</script>

<style type="text/css">

	.block-insta{margin-bottom:50px}.insta-title{text-align:center;position:relative;margin:35px 0!important}.insta-title:before{content:'';display:block;background:#ddd;left:0;margin:auto;position:absolute;width:100%;height:2px;top:calc(50% - 1px)}.insta-title span{display:inline-block;color:#191919;font-size:19px;padding:0 40px;background:#fff;position:relative;text-transform:uppercase;line-height:normal}.insta-title #imgInsta{display:block;font-size:35px;margin:0 auto}#instafeed{padding:0 20px}#instafeed a{display:block;position:relative;width:100%;padding-bottom:100%}#instafeed img{position:absolute;max-height:100%;width:100%;height:100%;object-fit:cover}#instafeed .owl-nav button{height:40px;font-size:35px;font-weight:700;display:table;position:absolute;top:calc(50% - 20px)}#instafeed .owl-nav i{display:table-cell;vertical-align:middle}#instafeed .owl-prev{left:0}#instafeed .owl-next{right:0}.likes-comments{position:absolute;left:0;right:0;bottom:-15px;opacity:0;transition:.25s;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);font-size:14px;color:#fff;line-height:60px;text-align:center}#instafeed a:hover>.likes-comments{bottom:0;opacity:1}.likes-comments span{padding:0 15px}.likes-comments span i{margin-right:5px}#dvInstagram{display:inline-block}
	
</style>
  • Apos isso, clique em “Salvar codigo HTML”
  • Apos a atualizacao do cache da pagina, seu instagram vai mostrar no rodape do site, conforme as imagens a seguir:


Qualquer duvida estamos a disposição, precisando somente chamar

Você já conhece a nossa ferramenta de avaliação? Faça já o teste sem compromisso! A melhor ferramenta de avaliação do mercado.

18 comentários em “Como ativar o Plugin Instagram na Loja Integrada”

    1. user_avaliweb

      Olá Wesley posso ajudar?
      qual a URL da sua loja?

  1. Roberta

    Aqui também coloca o nome do nosso instagram?
    InstagramFeed({username:nomeInstagram,container:$(“#dvInsta”)[0],display

  2. rodrigo

    Olá.

    Ele não fica “clicável” no site?
    Para a pessoa interessada poder clicar na logo e foto e ser redireciona para o instagram.

    1. Amigo, fica clicavel sim, eu ajustei o post, somente pegar a versao nova.
      Qualquer duvida estou a disposição

    1. Andre, conforme enviado via mensagem via whatsApp, ja foi resolvido o problema, qualquer duvida estou a disposição

  3. Luiz

    Funcionou perfeito aqui! Só uma pergunta, como eu ativo o scrolling das fotos, para poder ir mudando???

    1. Ola, que otimo que funcionou!
      No momento ainda nao tem a função de scroll, iremos liberar uma atualizacao em breve, fique atento

  4. Luiz

    Bom dia amigo. A versão mobile precisa dimensionar melhor as imagens, elas estão muito grandes, além do ícone do instagram tb estar enorme. De resto, para versão computador, tá muito bom!

  5. Bom dia amigo!esse código serve para outras plataformas como a Tray por exemplo?

    1. Bom dia Amigo, funciona somente para a Loja Integrada por enquanto
      Em breve começaremos a criar para outras plataformas

Deixe uma resposta para rodrigo Cancelar resposta

O seu endereço de e-mail não será publicado.