Poner Gadget de Instagram en el blog

Un post muy esperado, el de añadir nuestro Instagram en el blog, y la verdad que me gusta mucho esta opción porque todo lo que sea visual, enamora! De eso se trata todo, de encandilar, de enamorar con nuestro contenido a los lectores y las lectoras, y esta es una muy buena forma de hacerlo; con nuestro Instagram.

Para poder añadir nuestro Instagram tenemos gran variedad de opciones, pero muchas de ellas nos obligan a tener incluída una crispante publicidad que afea totalmente el widget en nuestro blog y hace que parezca menos propio y más "charramangueiro" como se dice por aquí. Lo que viene siendo una chapuza.

Si añadimos varios widgets, y cada uno de estos, tiene su link , su texto publicitario y demás, no solo queda visualmente feo si no que además estamos añadiendo muchos enlaces a nuestro blog que no nos interesa tener. Esto último es así por el tema SEO que tanto nos preocupa y nos trae de cabeza. Pero no te preocupes, no debes preocuparte demasiado, simplemente que tenemos que evitar que nuestro blog tenga este tipo de enlaces que no tienen ninguna relación con nuestro blog.

Otro punto a tener en cuenta a la hora de añadir un widget de Instagram en nuestro blog es que tengamos fotos realmente interesantes para nuestro/a lector/a o que aporten beneficio o calidad visual. Esto quiere decir que , tenemos que tener unas imágenes chulas, bonicas, o bien que aporten valor o información relevante para nuestros/as visitantes.

Es como todo, en nuestro blog tiene que existir cierta armonía, ya sea en colores, imágenes...etc. Y coherencia en el contenido, por encima de todo.

Una vez expuesta esta pequeña introducción pasamos al tutorial.

Te expongo 2 formas de realizar el tutorial a través de plataformas externas y uno final que puedes realizar a través de código css en tu plantilla. Elije la opción que más te guste.

Sinceramente te recomiendo la del código en plantilla ya que es el único que te aseguro que no te dará problemas.

Cómo poner el gadget de Instagram en tu blog con código javascript , CSS y HTML 

Vamos a nuestra plantilla y hacemos una copia de seguridad. (si no sabes cómo haz click en el enlace anterior) 

Ahora buscamos en plantilla el siguiente código ( cómo se hace? )

]]></b:skin>

Y pegamos el siguiente código justo antes de los dos corchetes:

/* Instafeed

----------------------------------------------- */

#instagram {

 background: #f6f6f6;

 padding-top: 50px;

}

#instagram h2 {margin-bottom: 2em;}

#instafeed {

 max-width: 100%;

 display: block;

 margin: 0px auto;

 padding: 0px;

 line-height: 0;

 text-align: center;

}

#instafeed a {

 padding: 0px;

 margin: 0px;

 display: inline-block;

 line-height: 0;

 position: relative;

}

#instafeed .insta-likes {

 position: absolute;

 width: 100%;

 height: 100%;

 left: 0;

 right: 0;

 bottom: 0;

 opacity: 0;

 background: rgba(255, 255, 255, 0.9);

 text-shadow: 0px 0px 0px #000000;

 font: normal normal 14px Open Sans;

 font-weight: 400;

 color: #333232;

 font-size: 14px;

 line-height: 1.7 !important;

 -webkit-font-smoothing: antialiased;

 -webkit-transition: opacity 800ms ease;

 transition: opacity 800ms ease;

}

#instafeed .insta-likes:hover {opacity: 1;}

#instafeed li {

 width: 12.5%;

    display: inline-block;

    line-height: 0;

    margin: 0px 0% 0%;

    padding: 0px !important;

}

#instafeed li img {width: 100% !important;}

@media screen and (max-width: 915px) {

 #instafeed {width: 90%;}

 #instafeed li {

  width: 46%;

  margin: 0 2% 4%;

 }

}

Después buscamos este código:

</body>

Y justo antes pegamos el siguiente código:

<script type='text/javascript'>
//<![CDATA[ 
// Generated by CoffeeScript 1.3.3
(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);
var feed = new Instafeed({
get:"user",
userId: 1122594057,
accessToken:"1122594057.1677ed0.c0496424cfb04bf1922067b33a582685",
limit: 8,
resolution:"standard_resolution",
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart-o" aria-hidden="true"></i><br/>{{comments}} <i class="fa fa-comment-o" aria-hidden="true"></i></span></div></div></a></li>'
});
feed.run();
//]]></script>

Ahora debemos prestar mucha atención porque debemos sustituir una parte del código.
Justo al final del código anterior, donde pone accesToken y le sigue un código numérico largo, debemos cambiarlo por el nuestro, nuestro Acces Token de nuestro Instagram, ¿Cómo? MUY FÁCIL.Entramos en este generador del código y le damos a Generate Acces Token, y ya nos sale nuestro código.

Recuerda respetar las comillas del código en plantilla, porque es importante. Mi código es el siguiente:

1122594057.1677ed0.c0496424cfb04bf1922067b33a582685

Una vez tengamos editado este código, debemos copiar la primera parte del código numérico, el mío es este:

1122594057

Es la primera parte, hasta el punto, pero este no se copia. Una vez que tengamos copiado ese número lo pegamos y sustituímos por el que sale justo encima del accestoken, que pone userId: y justo ahí lo pegamos.
Guardamos y ya tenemos en nuestra plantilla la posibilidad de añadir este gadget.

¿Cómo añadimos el gadget? Muy fácil.
Nos vamos a Diseño, y allí en el footer, abajo de todo de nuestro blog,
Añadimos un gadget HTML, y
Pegamos lo siguiente en él:

<div id='instafeed'/>

Guardamos, y vemos blog a ver si todo ha salido bien.
Si no ha salido bien te recomiendo restablecer la copia de seguridad y volver a intentarlo, quizás hayas realizado mal algún paso.

ORIGEN DE LA ENTRADA: https://www.bloggerpasoapaso.com/2016/07/poner-gadget-instagram-en-blogger.html