Como adicionar o Instagram no Blogger com link direto e botões de comentários e likes

| 8 comentários

Tenho uma dica bacana pra você que quer colocar o gadget do Instagram no Blogger, sem redirecionar os links para sites terceiros, como o SnapWidget ou Lightwidget. Você vai poder fazer tudo direto no seu blog. As fotos ficam bonitas e ao clicar, vai direto para seu instagram. Bacana, né?! Quer aprender? Então, acompanhe o tutorial!

Passo 1 - Gerar código de acesso Token

Entre nesse site http://instagram.pixelunion.net/, clique em Generate Access Token


Copie o código gerado e guarde, você vai precisar!

Passo 2 - Criar o Gadget

Entre no Blogger em Layout, no local desejado clique Adicionar Gadget, escolha HTML/JavaScript. Coloque o título, cole o código abaixo.
<script type='text/javascript'>//<![CDATA[
var feed = new Instafeed({
get:"user",
userId: 6094584719,
accessToken:"6094584719.1677ed0.b5cb0374afb94d2f9c968cdf8189ad35",
limit: 8,
resolution:"standard_resolution",
template: '<div class="instathumb"><a href="{{link}}" target="_blank"><div class="squarethumb" style="background:url({{image}})"><img src="https://4.bp.blogspot.com/-OtURZJ2BisI/WljDhG4scII/AAAAAAAAHCA/paOMFNStkysnIOTbzo4wVakC-heU0UfRwCLcBGAs/s1600/TransparentInstagram.png" /></div><div class="fcdw"><div class="fcdo"><div class="fcdi"><i class="fa fa-heart"></i>{{likes}}<br /><i class="fa fa-comment"></i>{{comments}}</div></div></div></a></div>'
});
feed.run();
//]]></script>
<div id="instafeed"></div>
Lembra do código que pedi para guardar? É agora que precisará dele. Altere as áreas em vermelho. userID é a primeira parte do código Token até o ponto. O accessToken, é o código que você gerou no passo 1 e, limit é a quantidade de fotos que deseja exibir. Após alteradas essas opções, clique em Salvar.

Passo 3 - Adicionar o JavaScript

No menu Tema, clique em Editar Html, localize </head> e cole o código a seguir abaixo dessa tag.
<script>
//<![CDATA[
// Generated by CoffeeScript 1.3.3 - jesialves.com
(function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);document.getElementById(this.options.target).appendChild(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.Instafeed=e}).call(this);
  //]]></script>

Passo 4 - Adicionando estilo(css) ao gadget

Ainda no Html, localize ]]></b:skin>, cole o código a seguir acima dessa tag
/* --------- INSTAFEED POR JESIALVES.COM ----------- */
#instafeed {
width: 100%;
display: block;
margin: 0 auto;
padding: 0px;
line-height: 0px;
text-align: center;
vertical-align: baseline;
}
#instafeed img {
width: 100%;
height: auto;
}
#instafeed .squarethumb {
background-position: 50% !important;
background-size: cover !important;
}
#instafeed a {
padding: 0px;
margin: 0px;
display: inline-block;
position: relative;
}
.instathumb {
    width: 47%; /* Largura das fotos */
    margin: 3px !important;
    display: inline-block;
}
.instathumb a {
float: left;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
display: inline-block;
}
.fcdw {
width: 100%;
height: 100%;
margin-top: -100%;
opacity: 0;
text-align: center;
position: absolute;
background-size: 30px;
font-family: 'Lato', sans-serif; /* Fonte dos números de likes e comentário*/
font-weight: 400;
font-size: 11px;
letter-spacing: 1px;
color: #ffffff; /*Cor da fonte*/
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.fcdw:hover {
opacity: 1;
}
.fcdw:hover:after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
display: block;
background: #2E2E2E; /* Cor ao passar o mouse*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
z-index: 1;
}
.fcdw i {
color: #ffffff; /* Cor dos ícones*/
font-size: 10px;
margin: 0 4px 0 0;
}
.fcdo {
display: table;
vertical-align: middle;
height: 100%;
width: 100%;
}
.fcdi {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
z-index: 5;
position: relative;
}
Se você entender de CSS e quiser alterar as cores e largura das fotos, fique a vontade.
Agora basta Salvar e verificar se ficou como gostaria.

Caso você queira muito esse gadget e não consiga fazer como expliquei, entre em contato comigo solicitando um orçamento desse serviço. Prometo que não cobro caro ;)!

E se esse tutorial te ajudou, compartilhe! Deu trabalho pra fazer rsrs.
Obrigada! Volte sempre!

Créditos: Plugin http://instafeedjs.com/

Follow my blog with Bloglovin

8 comentários:

  1. Que bacana esse gadget para postar direto do blogger para o Instagram.
    Depois vou tentar fazer no meu blog, achei muito legal e quero usar.
    Bjinhos,
    www.prosaamiga.com.br

    ResponderExcluir
  2. adorei a dica, trabalho com layouts e ajuda muito relembrar os códigos.
    www.paulaleticia.com

    ResponderExcluir
  3. Amei amiga! Eu coloquei no meu blog, porém as imagens não estão do mesmo tamanho, sabe como arrumar?

    ResponderExcluir
    Respostas
    1. Pode ser algum código que já exista em seu layout que esteja impedindo que as imagens fiquem quadradas. Pois esse tutorial é o mesmo que uso aqui no blog. Obrigada por comentar!

      Excluir
  4. Obrigada pelo tutorial, consegui colocar :)

    ResponderExcluir

 

Me siga no Instagram