x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 4.4.17 - Tutorial

Cómo instalar Instafeed.js en temas nativos Blogger

instafeed.js en Blogger
Instagram es una red social muy visual que puede aportar mucho a un blog y sus seguidores. Incluirlo en el sitio facilita que quien nos lee vea lo que compartimos en esta red SIN tener que salir de nuestro sitio.

Actualmente, los temas de terceros YA incluyen la funcionalidad de mostrar el feed de Instagram en el blog, haciendo uso de Instafeed.js; y para quienes usan los temas nativos de Blogger existen muchos tutoriales para instalar servicios como Snapwidget, Lightwidget Intagme.

Personalmente prefiero el uso de Instafeed,js, desarrollado por Steven Schobert quien lo comparte gratuitamente. Hace uso puro de Javascript (no requiere Jquery, lo que es una ventaja en la carga) y permite mediante CSS una amplia personalización de la apariencia.

En mi propio blog personal hago uso de este script y he personalizado no sólo el aspecto, sino el funcionamiento; incluso he creado una 'galería' con scroll infinito, con pocas líneas de Javascript como soporte.


Ahora, si usas un tema nativo de Blogger, te contaré cómo instalar y configurar Instafeed.js



Recuerda siempre hacer copia de seguridad de tu plantilla ANTES de aplicar cualquier tutorial.


Paso 1: Conseguir los datos de acceso a Instagram

Para usar Instafeed.js es necesario manejar los siguientes datos: clientID, userID y Access Token, que son los que permiten el acceso a tu feed en Instagram.

clientID: Ir a Instagram.com/developer/authentication/ > Manage Clients > Register a New Client. Allí rellenar los datos hasta crear la aplicación. Una vez creada apuntar el clientID solamente; si usarás la misma cuenta en varios blogs, hay que crear un cliente para cada url.

userID y access token: Ir a Instagram.pixelunion.net/, previamente con el login activo en Instagram en el mismo navegador del pc, y pulsar generate access token. Obtendrás una larga serie de cifras, de las cuales las primeras 10 son tu userID (guíate hasta el primer punto)

Paso 2: Script y Estilos

En el panel de Blogger ir a Tema > Editar HTML, localiza </head> y arriba de esto colocar los códigos siguientes:
<style>
#instafeed{width:100%;display:block;margin:0;padding:0;line-height:0}
#instafeed img{height:auto;width:100%}
#instafeed a{padding:0;margin:0;display:inline-block;position:relative}
#instafeed li{width:12.5%;display:inline-block;margin:0!important;padding:0!important}
#instafeed .insta-likes {width:100%;height:100%;margin-top:-100%;opacity:0;text-align:center;letter-spacing:1px;background:rgba(255,255,255,0.4);position:absolute;text-shadow:2px 2px 8px #fff;font:normal 400 10px sans-serif;color:#222;line-height:normal;transition:all .35s ease-out;-o-transition:all .35s ease-out;-moz-transition:all .35s ease-out;-webkit-transition:all .35s ease-out}
#instafeed a:hover .insta-likes {opacity:1}
    @media only screen and (max-width:700px) {
#instafeed li {width:25%;}}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<script>
    //<![CDATA[
// Generated by CoffeeScript 1.9.3
(function(){var e;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,x,T,N,C,k,L,A,O,M,_,D;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"?M=["","random"]:M=this.options.sortBy.split("-"),O=M[0]==="least"?!0:!1;switch(M[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",O);break;case"liked":e.data=this._sortBy(e.data,"likes.count",O);break;case"commented":e.data=this._sortBy(e.data,"comments.count",O);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){m=e.data,A=parseInt(this.options.limit,10),this.options.limit!=null&&m.length>A&&(m=m.slice(0,A)),u=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(m=this._filter(m,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){f="",d="",w="",D=document.createElement("div");for(c=0,N=m.length;c<N;c++){h=m[c],p=h.images[this.options.resolution];if(typeof p!="object")throw o="No image found for resolution: "+this.options.resolution+".",new Error(o);E=p.width,y=p.height,b="square",E>y&&(b="landscape"),E<y&&(b="portrait"),v=p.url,l=window.location.protocol.indexOf("http")>=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),d=this._makeTemplate(this.options.template,{model:h,id:h.id,link:h.link,type:h.type,image:v,width:E,height:y,orientation:b,caption:this._getObjectProperty(h,"caption.text"),likes:h.likes.count,comments:h.comments.count,location:this._getObjectProperty(h,"location.name")}),f+=d}D.innerHTML=f,i=[],r=0,n=D.childNodes.length;while(r<n)i.push(D.childNodes[r]),r+=1;for(x=0,C=i.length;x<C;x++)L=i[x],u.appendChild(L)}else for(T=0,k=m.length;T<k;T++){h=m[T],g=document.createElement("img"),p=h.images[this.options.resolution];if(typeof p!="object")throw o="No image found for resolution: "+this.options.resolution+".",new Error(o);v=p.url,l=window.location.protocol.indexOf("http")>=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),g.src=v,this.options.links===!0?(t=document.createElement("a"),t.href=h.link,t.appendChild(g),u.appendChild(t)):u.appendChild(g)}_=this.options.target,typeof _=="string"&&(_=document.getElementById(_));if(_==null)throw o='No element with id="'+this.options.target+'" on page.',new Error(o);_.appendChild(u),a=document.getElementsByTagName("head")[0],a.removeChild(document.getElementById("instafeed-fetcher")),S="instafeedCache"+this.unique,window[S]=void 0;try{delete window[S]}catch(P){s=P}}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(!this.options.tagName)throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(!this.options.locationId)throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(!this.options.userId)throw new Error("No user specified. Use the 'userId' 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))s=n.match(r)[1],o=(i=this._getObjectProperty(t,s))!=null?i:"",n=n.replace(r,function(){return""+o});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=[],r=function(e){if(t(e))return n.push(e)};for(i=0,o=e.length;i<o;i++)s=e[i],r(s);return n},e}(),function(e,t){return typeof define=="function"&&define.amd?define([],t):typeof module=="object"&&module.exports?module.exports=t():e.Instafeed=t()}(this,function(){return e})}).call(this);
    //]]></script>

En verde encuentras el ancho de cada celda para las fotos, actualmente está configurado para 8 imágenes por línea, 4 en dispositivos con resolución menor a 700px. En azul señalo las personalizaciones básicas: fondo translúcido (usa códigos rgba), tipo, tamaño y color de tipografía. Lo señalado en naranja es el enlace de FontAwesome, puedes borrar si ya lo tienes incluido en tu plantilla.

Paso 3: Gadget y configuración

Ir a Diseño y simplemente agregar un gadget HTML/JAVASCRIPT en la ubicación que consideres mejor. El código tal cual está pensado para el Footer, si eliges Sidebar recuerda modificar lo señalado en verde.

Dentro del gadget coloca el siguiente código:
<center><div id='instafeed'/></div></center>


<script type='text/javascript'>//<![CDATA[

var feed = new Instafeed({
 get: 'user',
 userId: TUS DATOS,
  limit:8,
  sortBy:'most-recent',
    clientId: 'TUS DATOS',
    accessToken: 'TUS DATOS',
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"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></li>',
 resolution: 'low_resolution'   
 });
 feed.run();


//]]>
</script>

Lo señalado en naranja es lo que debes sustituir con tus datos, obtenidos en el Paso 1, y ten cuidado en respetar las comillas en los lugares donde están, un simple cambio hace que el código no funcione.

Este tutorial funciona tal cual en cualquier tema nativo de Blogger.:








Si tienes alguna duda con lo explicado aquí, puedes dejar un comentario que gustosa te apoyaré.


Se ha comentado...
  1. Salvare esta entrada y tu blog en favoritos porque me resulta tremendamente interesante para mejorar mi propio sitio.

    ResponderEliminar
  2. Muchas gracias por el tutorial, me ha resultado muy útil. Es interesante tener las redes sociales conectadas.

    ResponderEliminar
  3. Mmm yo lo tengo hecho desde hace un tiempo aunque es una imagen que pasa poco a poco (no me hagas expresarme en estos términos que me es prácticamente imposible) y creo que queda genial aunque miraré a hacerlo como dices tú porque creo que los resultados son aún mejores. Muaksss

    ResponderEliminar
  4. Muchas gracias, me ayudo muchisimo tu aporte.

    ResponderEliminar

Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *