Olá! Pessoal.
Estou finalizando um site https://flavinha-alonso.lojaintegrada.com.br/ porém o Instagram não fica visível de forma alguma neste tema. Parece que é algum problema com o @Globe_Commerce
Tentei então ir para alternativa do SnapWidget mas aparecer somente no final da página. Já pesquisei aqui alguns códigos porém quando uso, não fica acima do rodapé.
Alguém pode me ajudar?
Boa tarde.
Parece que a API do Instagram foi alterada e a Loja Integrada ainda não atualizou a conexão.
Na sua loja e em várias outros eu estou vendo essa mensagem de erro:
Access to XMLHttpRequest at 'https://www.instagram.com/flavinhaalonso/' from origin 'https://flavinha-alonso.lojaintegrada.com.br' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Eu estava trabalhando em um site que usa o tema FoxTech e o erro é o mesmo.
Boa tarde.
Realmente eu também notei o mesmo erro lá e realmente várias lojas estão com o mesmo problema. Seria legal que nos ajudassem com uma solução paliativa.
Alguma ideia @lojaintegrada ? @Globe_Commerce ?
Olá @Delmonte , tudo bem?
Essa é uma feature dos temas e não da plataforma Loja Integrada, nesse caso é necessário verificar diretamente com a agência, pois realmente o instagram realizou essa atualização.
Olá, tudo bem?
Como deve ter observado, o problema tem origem do próprio Instagram, afetando assim essa funcionalidade em diversos temas, e até mesmo em outras plataformas.
A tendência será lançar novos temas sem esta funcionalidade do plug-in, pois já passamos por diversos tipos de problemas, chamados, e tentamos solucionar de diversas formas, mas sem sucesso.
De qualquer maneira, caso haja alguma solução, será informado aos nossos clientes através do nosso grupo no Facebook (nos manuais dos nossos temas há o link para entrada do grupo).
Abraços
Att,
Poxa @Globe_Commerce ! Essa resposta foi exatamente um Ctrl+C Ctrl-V do que consta no manual de vocês. Vamos ter um pouco mais de boa vontade, pois como a @lojaintegrada e outras pessoas disseram ali, isso foi uma atualização que o Instagram fez.
@Leonardo_Vicentini_F é possível colocar na plataforma o código ou foi só exemplo com o F12?
sim, é possível, teria que ter acesso a uma loja que tenha o tema, como não tenho o tema, não tenho como fazer.
TESTE ISSO
/*!
* jquery.instagramFeed
*
* @version 3.0.2
*
* https://github.com/jsanahuja/jquery.instagramFeed
*
*/
$(function(){
(function ($) {
var defaults = {
'host': "https://www.instagram.com/",
'username': '',
'tag': '',
'user_id': '',
'location': '',
'container': '',
'display_profile': true,
'display_biography': true,
'display_gallery': true,
'display_captions': false,
'display_igtv': false,
'max_tries': 8,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 0.5,
'image_size': 640,
'lazy_load': false,
'cache_time': 360,
'on_error': console.error
};
var image_sizes = {
"150": 0,
"240": 1,
"320": 2,
"480": 3,
"640": 4
};
var escape_map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escape_string(str) {
return str.replace(/[&<>"'`=\/]/g, function (char) {
return escape_map[char];
});
}
function parse_caption(igobj, data){
if (
typeof igobj.node.edge_media_to_caption.edges[0] !== "undefined" &&
typeof igobj.node.edge_media_to_caption.edges[0].node !== "undefined" &&
typeof igobj.node.edge_media_to_caption.edges[0].node.text !== "undefined" &&
igobj.node.edge_media_to_caption.edges[0].node.text !== null
) {
return igobj.node.edge_media_to_caption.edges[0].node.text;
}
if (
typeof igobj.node.title !== "undefined" &&
igobj.node.title !== null &&
igobj.node.title.length != 0
) {
return igobj.node.title;
}
if (
typeof igobj.node.accessibility_caption !== "undefined" &&
igobj.node.accessibility_caption !== null &&
igobj.node.accessibility_caption.length != 0
) {
return igobj.node.accessibility_caption;
}
return false;
}
/**
* Cache management
*/
function get_cache(options, last_resort){
var read_cache = last_resort || false;
if (!last_resort && options.cache_time > 0) {
var cached_time = localStorage.getItem(options.cache_time_key);
if(cached_time !== null && parseInt(cached_time) + 1000 * 60 * options.cache_time > new Date().getTime()){
read_cache = true;
}
}
if(read_cache){
var data = localStorage.getItem(options.cache_data_key);
if(data !== null){
return JSON.parse(data);
}
}
return false;
};
function set_cache(options, data){
var cached_time = localStorage.getItem(options.cache_time_key),
cache = options.cache_time != 0 && (cached_time === null || parseInt(cached_time) + 1000 * 60 * options.cache_time > new Date().getTime());
if(cache){
localStorage.setItem(options.cache_data_key, JSON.stringify(data));
localStorage.setItem(options.cache_time_key, new Date().getTime());
}
}
/**
* Request / Response
*/
function parse_response(type, data){
switch(type){
case "username":
case "tag":
case "location":
try {
data = data.split("window._sharedData = ")[1].split("<\/script>")[0];
} catch (e) {
return false;
}
data = JSON.parse(data.substr(0, data.length - 1));
data = data.entry_data.ProfilePage || data.entry_data.TagPage || data.entry_data.LocationsPage;
if(typeof data !== "undefined"){
return data[0].graphql.user || data[0].graphql.hashtag || data[0].graphql.location;
}
return false;
break;
case "userid":
if(typeof data.data.user !== "undefined"){
return data.data.user;
}
return false;
break;
}
}
function request_data(url, type, tries, callback, autoFallback, googlePrefix){
var prefixedUrl;
if(autoFallback && googlePrefix){
prefixedUrl = 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=' + url;
}
$.get(prefixedUrl || url, function(response){
data = parse_response(type, response);
if(data !== false){
callback(data);
}else{
// Unexpected response, not retrying
callback(false);
}
}).fail(function (e) {
if(tries > 1){
console.warn("Instagram Feed: Request failed, " + (tries-1) + " tries left. Retrying...");
request_data(url, type, tries-1, callback, autoFallback, !googlePrefix);
}else{
callback(false, e);
}
});
}
/**
* Retrieve data
*/
function get_data(options, callback){
var data = get_cache(options, false);
if(data !== false){
// Retrieving data from cache
callback(data);
}else{
// No cache, let's do the request
var url;
switch(options.type){
case "username":
url = options.host + options.id + '/';
break;
case "tag":
url = options.host + 'explore/tags/' + options.id + '/'
break;
case "location":
url = options.host + 'explore/locations/' + options.id + '/'
break;
case "userid":
url = options.host + 'graphql/query/?query_id=17888483320059182&variables={"id":"' + options.id + '","first":' + options.items + ',"after":null}';
break;
}
request_data(url, options.type, options.max_tries, function(data, exception){
if(data !== false){
set_cache(options, data);
callback(data);
}else if(typeof exception === "undefined"){
options.on_error("Instagram Feed: It looks like the profile you are trying to fetch is age restricted. See https://github.com/jsanahuja/InstagramFeed/issues/26", 3);
}else{
// Trying cache as last resort before throwing
data = get_cache(options, true);
if(data !== false){
callback(data);
}else{
options.on_error("Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: " + exception.status, 5);
}
}
}, options.host === defaults.host && options.type != "userid", false);
}
}
/**
* Rendering
*/
function render(options, data){
var html = "", styles;
/**
* Styles
*/
if(options.styling){
var width = (100 - options.margin * 2 * options.items_per_row) / options.items_per_row;
styles = {
profile_container: ' style="text-align:center;"',
profile_image: ' style="border-radius:10em;width:15%;max-width:125px;min-width:50px;"',
profile_name: ' style="font-size:1.2em;"',
profile_biography: ' style="font-size:1em;"',
gallery_image: ' style="width:100%;"',
gallery_image_link: ' style="width:' + width + '%; margin:' + options.margin + '%;position:relative; display: inline-block; height: 100%;"'
};
if(options.display_captions){
html += "<style>\
a[data-caption]:hover::after {\
content: attr(data-caption);\
text-align: center;\
font-size: 0.8rem;\
color: black;\
position: absolute;\
left: 0;\
right: 0;\
bottom: 0;\
padding: 1%;\
max-height: 100%;\
overflow-y: auto;\
overflow-x: hidden;\
background-color: hsla(0, 100%, 100%, 0.8);\
}\
</style>";
}
}else{
styles = {
profile_container: "",
profile_image: "",
profile_name: "",
profile_biography: "",
gallery_image: "",
gallery_image_link: ""
};
}
/**
* Profile & Biography
*/
if(options.display_profile && options.type !== "userid"){
html += '<div class="instagram_profile"' + styles.profile_container + '>';
html += '<img class="instagram_profile_image" src="' + data.profile_pic_url + '" alt="'+ (options.type == "tag" ? data.name + ' tag pic' : data.username + ' profile pic') + '"' + styles.profile_image + (options.lazy_load ? ' loading="lazy"' : '') + ' />';
if(options.type == "tag"){
html += '<p class="instagram_tag"' + styles.profile_name + '><a href="https://www.instagram.com/explore/tags/' + options.tag + '/" rel="noopener" target="_blank">#' + options.tag + '</a></p>';
}else if(options.type == "username"){
html += "<p class='instagram_username'" + styles.profile_name + ">@" + data.full_name + " (<a href='https://www.instagram.com/" + options.username + "/' rel='noopener' target='_blank'>@" + options.username + "</a>)</p>";
if(options.display_biography){
html += "<p class='instagram_biography'" + styles.profile_biography + ">" + data.biography + "</p>";
}
}else if(options.type == "location"){
html += "<p class='instagram_location'" + styles.profile_name + "><a href='https://www.instagram.com/explore/locations/" + options.location + "/' rel='noopener' target='_blank'>" + data.name + "</a></p>";
}
html += "</div>";
}
/**
* Gallery
*/
if(options.display_gallery){
if (typeof data.is_private !== "undefined" && data.is_private === true) {
html += '<p class="instagram_private"><strong>This profile is private</strong></p>';
} else {
var image_index = typeof image_sizes[options.image_size] !== "undefined" ? image_sizes[options.image_size] : image_sizes[640],
imgs = (data.edge_owner_to_timeline_media || data.edge_hashtag_to_media || data.edge_location_to_media).edges,
max = (imgs.length > options.items) ? options.items : imgs.length;
html += "<div class='instagram_gallery'>";
for (var i = 0; i < max; i++) {
var url = "https://www.instagram.com/p/" + imgs[i].node.shortcode,
image, type_resource,
caption = parse_caption(imgs[i], data);
if(caption === false){
caption = (options.type == "userid" ? '' : options.id) + " image";
}
caption = escape_string(caption);
switch (imgs[i].node.__typename) {
case "GraphSidecar":
type_resource = "sidecar"
image = imgs[i].node.thumbnail_resources[image_index].src;
break;
case "GraphVideo":
type_resource = "video";
image = imgs[i].node.thumbnail_src
break;
default:
type_resource = "image";
image = imgs[i].node.thumbnail_resources[image_index].src;
}
html += '<a href="' + url + '"' + (options.display_captions ? ' data-caption="' + caption + '"' : '') + ' class="instagram-' + type_resource + '" rel="noopener" target="_blank"' + styles.gallery_image_link + '>';
html += '<img' + (options.lazy_load ? ' loading="lazy"' : '') + ' src="' + image + '" alt="' + caption + '"' + styles.gallery_image + ' />';
html += '</a>';
}
html += '</div>';
}
}
/**
* IGTV
*/
if (options.display_igtv && typeof data.edge_felix_video_timeline !== "undefined") {
var igtv = data.edge_felix_video_timeline.edges,
max = (igtv.length > options.items) ? options.items : igtv.length;
if (igtv.length > 0) {
html += '<div class="instagram_igtv">';
for (var i = 0; i < max; i++) {
var url = 'https://www.instagram.com/p/' + igtv[i].node.shortcode,
caption = parse_caption(igtv[i], data);
if(caption === false){
caption = (options.type == "userid" ? '' : options.id) + " image";
}
caption = escape_string(caption);
html += '<a href="' + url + '"' + (options.display_captions ? ' data-caption="' + caption + '"' : '') + ' rel="noopener" target="_blank"' + styles.gallery_image_link + '>';
html += '<img' + (options.lazy_load ? ' loading="lazy"' : '') + ' src="' + igtv[i].node.thumbnail_src + '" alt="' + caption + '"' + styles.gallery_image + ' />';
html += '</a>';
}
html += '</div>';
}
}
$(options.container).html(html);
}
$.instagramFeed = function (opts) {
var options = $.fn.extend({}, defaults, opts);
if (options.username == "" && options.tag == "" && options.user_id == "" && options.location == "") {
options.on_error("Instagram Feed: Error, no username, tag or user_id defined.", 1);
return false;
}
if(typeof opts.display_profile !== "undefined" && opts.display_profile && options.user_id != ""){
console.warn("Instagram Feed: 'display_profile' is not available using 'user_id' (GraphQL API)");
}
if(typeof opts.display_biography !== "undefined" && opts.display_biography && (options.tag != "" || options.location != "" || options.user_id != "")){
console.warn("Instagram Feed: 'display_biography' is not available unless you are loading an user ('username' parameter)");
}
if (typeof options.get_data !== "undefined") {
console.warn("Instagram Feed: options.get_data is deprecated, options.callback is always called if defined");
}
if (options.callback == null && options.container == "") {
options.on_error("Instagram Feed: Error, neither container found nor callback defined.", 2);
return false;
}
if(options.username != ""){
options.type = "username";
options.id = options.username;
}else if(options.tag != ""){
options.type = "tag";
options.id = options.tag;
}else if(options.location != ""){
options.type = "location";
options.id = options.location;
}else{
options.type = "userid";
options.id = options.user_id;
}
options.cache_data_key = 'instagramFeed_' + options.type + '_' + options.id;
options.cache_time_key = options.cache_data_key + '_time';
get_data(options, function(data){
if(options.container != ""){
render(options, data);
}
if(options.callback != null){
options.callback(data);
}
});
return true;
};
})(jQuery);
$.instagramFeed ({
'username': 'FLAVINHAALONSO',
'container': "#instagram .galeria",
'display_profile': false,
'display_biography': false,
'display_igtv': false,
'items': 6,
'items_per_row': 6,
});
});
Ficou perfeito @Leonardo_Vicentini_F ! Muito obrigado! Excelente solução para o momento! Obrigado!
Olá, @Delmonte
No meu está com o mesmo problema de CORS e testei com esse codigo acima do @Leonardo_Vicentini_F , mas fiquei na duvida de onde exatamente precisa ser alterado o username do insta que será listado. Vc pode me ajudar?
Olá @Leonardo_Carneiro ! Acredito que tenha que alterar somente o campo username no código. Onde está o meu, altere para o seu e teste. Mas o @Leonardo_Vicentini_F com certeza pode te ajudar melhor.
@Leonardo_Vicentini_F Coloquei da forma como mencionado, mas nada de funcionar na minha loja.
Utilizo o tema gratuito, o endereço é: www.adribrinquedoscriativos.com.br
este código é somente para quem tem o tema da Globe e está com problema no Instagram.
Tem outros tópicos que tem o código para quem está fazendo do zero, sem tema.
Entendi, @Leonardo_Vicentini_F .
Infelizmente o codigo que eu estava usando no meu tema gratuito, parou de funcionar a alguns dias,
apresentava esse tipo de erro:
Access to XMLHttpRequest at 'https://www.instagram.com/adribrinquedoscriativos/' from origin 'https://flavinha-alonso.lojaintegrada.com.br' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Segui pesquisando e encontrei somente esse tópico falando sobre e informando uma solução. Nao encontrei solução para quem usa o tema gratuito
qual código vc estava usando antes?
Segue o codigo abaixo @Leonardo_Vicentini_F
<script>
var nomeInstagram="adribrinquedoscriativos";
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>O meu tbm e da Gloob e não esta aparecendo o feed do instagram!
Como faço?
@Leonardo_Vicentini_F Bom dia, obrigado, a sua sugestão e dica funcionaram na paginas de produtos e demais páginas, o que já melhorou , porém não aparece na página principal de home, apresentando os seguintes erros:
Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: 404 5
Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto
(Motivo: o cabeçalho CORS ‘Access-Control-Allow-Origin’ não está presente). ←
sua pagina tem alguns códigos quebrados, talvez isso interfira
