gadget de Instagram en tu blog

Poner Gadget de Instagram en tu blog Tutorial Blogger

Poner-instagram-en-blog-tutorial

Un post muy esperado, el de añadir gadget de Instagram en tu 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 incluida una crispante publicidad que afea totalmente el widget en nuestro blog y hace que parezca menos propio y más “chafalleiro” como se dice por aquí, Galicia.

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.

Otro punto a tener en cuenta a la hora de añadir un gadget de Instagram en tu blog es que tengas fotos realmente interesantes para tu 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, una identidad de marca definida, con su paleta de 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. Elige 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.  

Ojo, porque también sirve para WordPress.org si manejas edición de plantilla en él.


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

]]></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%;
 }
}
/* FIN CSS Instafeed
----------------------------------------------- */
  • 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.

Video Tutorial de apoyo

EXTRA

Como ves no llena el ancho completo del blog, porque para eso habría que modificar un detalle en la el código del gadget. Si tu blog no es responsive, como el de pruebas del vídeo, no se verá en versión móvil. Pero para que aparezca al ancho total debes añadir en el css de tu gadget el siguiente código. En mi caso el css es #HTML7 pero en el tuyo tienes que buscarlo. Puedes hacerlo con este recurso:

  • Buscas en tu plantilla:
]]></b:skin>
  • Añadimos el siguiente código:
#HTML7 {
width:100%;
margin-left:-365px; 
min-width:1583px;
}

Recuerda sustituir el #html7 por el código de tu gadget, que es el id. En los vídeos anteriores descubrirás cómo hacerlo.

  • Guardamos y listo. Tendrás el gadget al ancho completo del blog.

Si no te queda bien ajustado vete cambiando los valores de margin-left y de min-width.

Cómo poner el widget de Instagram en tu blog con SnapWidget

1- Vamos a su página SnapWidget.com

2- Le damos a Get Started Today

3- Nos inscribimos con nuestro Nombre, e-mail y contraseña.

4- Una vez que entramos con nuestra cuenta, aparecemos en nuestro panel de control o Dashboard y le damos a Create a new Widget

5- Nos aparecen un montón de opciones diferentes para añadir nuestro Instagram ( y también nuestro Twitter 😉 Pero debemos fijarnos y elegir los que tienen como etiqueta FREE porque el resto son PRO y significa que solo los puedes usar si estás suscrito/a a la versión de pago.

tutorial-snapwidget-pro-free

Yo he elegido la primera opción que aparece.

snapwidget-ejemplo

6- Una vez que le hemos dado cubrimos en primer lugar el nombre de nuestra cuenta de Instagram, la verificamos y cubrimos el resto de datos a nuestro gusto.

Os dejo un ejemplo de cada estilo por si lo queréis añadir en distintas partes de vuestro blog:

 – >  Opciones para añadir Widget de Instagram en el Footer, o pie del blog:

7- Le damos a Get Widget y nos aparece el código que tenemos que copiar. Lo copiamos y lo pegamos en el Footer de nuestro blog.

Quedaría así:

vista-previa-widget-instagram-en-blog

EXTRA

Como ves no llena el ancho completo del blog, porque para eso habría que modificar un detalle en la el código que nos facilitan. Este código no es responsive, y solo se verá en la vista normal de PC de tu blog. Pero si lo quieres usar aquí te dejo lo que en mi blog de pruebas he añadido para que aparezca al ancho total.   margin-left:-365px; min-width:1583px; Esto es lo que he añadido, pero si no has seguido el curso desde el principio puede que no te sirva el margin-left , de hecho es muy probable que lo tengas que modificar para que te quede centrado, vas modificando la cantidad hasta que no aparezca la barra de scroll del navegador, y hasta que quede centrado. Además el min-width es el ancho del blog. Modifícalo por el ancho del tuyo, antes de nada.

Pero todo es complicarse, y de todas formas, el widget queda muy chulo igual sin ser tan ancho como el blog, ¿No crees? Queda como más minimalista.

  – >   Si lo que quieres es añadirlo en tu Sidebar, solo tendrás que modificar las opciones que te pide, en el vídeo te explico todo. Luego pegar el código añadiendo un widget HTML/Javascript en tu blog , en Diseño y listo. Es muy sencillo e intuitivo pero por si las moscas te dejo un vídeo. 🙂

Cómo poner el widget de Instagram en tu blog con LightWidget

Esta es otra plataforma que te aporta el código que necesitas. Este tiene más opciones de efectos sobre las imágenes, como por ejemplo que puede aparecer el texto de cada imagen, en visión normal o al pasar el ratón por encima. Entre otros efectos como rotar la imagen cuando se pasa el ratón por encima. Lo hace más interactivo, pero no hay mayor diferencia.

1- Vamos a su página LightWidget.com

2- Nos logueamos con Instagram, dándole a Log in

3- Después cubrimos los datos. OJO porque te da opción a usar un hashtag pero no funciona, por lo menos en mi caso, así que lo ignoramos.

Te ofrece 3 posibilidades de formato, pudiendo elegir entre un collage (Grid) con las columnas y filas que elijas, una estética como la de Pinterest (Columns) con el texto de cada imagen (no te lo recomiendo si  tus textos son largos) y por último, un slider (Slideshow), o lo que es lo mismo, una imagen que va cambiando a las siguientes.

4- Elije todas las opciones que quieras, y si quieres ver como queda algún efecto, le vas dando a preview y vas probando en el ejemplo que aparece a tu izquierda.

5- Luego le damos a Get Code y nos aparece debajo el código.

6- Lo copiamos y lo pegamos donde queramos.

Otra vez os dejo un vídeo para usar esta plataforma 🙂

  ¿Qué te ha parecido?   ¿Te ha funcionado? Deja tu comentario.  

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

59 comentarios

  1. María C.

    ¡Hola!
    Lo acabo de poner y quedó genial^^ Quizás un centímetro más a la derecha y no tan centrado como me gustaría, pero he intentado de todo y es lo más centrado que he conseguido x'D
    Gracias por el tutorial :')
    Besos!!

  2. Paz Leal

    Hola! encontre hace poco tu blog y me ha encantado, muchas gracias por este tutorial, estoy trabajando en un nuevo diseño para mi blog y buscaba este tutorial hace mucho, me quedo bien pero un poco mas para la derecha, ¿me podrias ayudar para centrarlo por favor? un abrazo 🙂

  3. Doruba

    Hola! Acabo de poner mi gadget desde LightWidget pero a veces me sale un texto en ingles que pone que es una versión gratuia y que me descarge la versión HTTPS. No se si le saldrá a los visitantes o solo me sale a mi este texto. Un abrazo

    • Compañía Encuerpo

      ohhhh pensaba que era algo que hice mal! sabes como serian las dimensiones asi empiezo subir imagen cuadradas a instagram? asi no se ve mal el feed…ya mismo voy a tu pagina de facebook y agrego un comentario por tu atenciòn y tiempo,y en tu blog como te agrego? mil gracias!!!!

    • Mónica Lemos

      No te preocupes! A mucha gente le pasa! Pues la medida es 1:1 que es la escala cuadrada…o bien en pixeles… 800px por 800px a tamaño completo de instagram.
      Muchas gracias por tus agradecimientos. Muack!!!

  4. Marcela Stachuza

    Gracias por el tutorial !!!! Hace cuatro meses que intentaba poner instagram a mi blog y no sabía como hacerlo. Soy nuevita en esto de los blog. Me hubiese gustado que se vean más grande las imágenes pero al menos ya está colocado. Mil gracias por el tutorial. Bendiciones

  5. Ruth Soto

    Hola. Te acabo de encontrar y me parece super interesante este post. Lo he hecho y me ha saldido bien, pero el problema que tengo es que me aparecen las imágenes cada una de una forma, tal y como lo tengo en instagram. ¿Hay alguna forma de poner que las imágenes sean todas iguales? Gracias.

  6. Kyrylys

    Muchas gracias por el widget ^^
    He estado trasteando con el css y el código a ver si lo podía poner un poco más grande pero muchas eces los cambios que hacía no se notan. Otros si, como reducir un poco los números y que el fade a blanco sea algo más lento. Aún así me gustaría poder manejar la opacidad a algo menos y el poder aprovechar mejor los márgenes. Aunque no sé si tiene que ver la plantilla que tengo (la he cambiado justo hoy) Pero lo dicho, que muchas gracias. queda genial! : )

  7. Laura

    Hola monica! no me ha funcionado modificar el ancho del HTML porque perdía el responsive y no logre solucionarlo 🙁 me salía un scroll horizontal pero he resuelto el ancho completo del blog, modificando el ¨limit: 8¨ a 9 (llamado que está justo debajo del accessToken) y me ha agregado dos post más. completando los laterales vacíos.

    Muchas gracias por todos tus tutoriales! me han ayudado un montón junto a los de minerva y zkreations. por ahora solo es el portafolio, espero pronto crear el blog en la página y un landing page para el inicio.

    Un abrazo

  8. Confía En Cristo ๑Vane๑

    Hola, gracias por compartir. Trate de poner el primer código pero no me funciona, hice todo tal cual indicas pero el problema es que las imagenes se muestran en su tamaño normal y en forma vertical. Me podrias ayudar, por favor?
    Gracias!!

  9. Mònica

    Hola Monica, soy novata en el tema y me ha parecido todo muy bien explicado y útil, pero lo he repetido tres veces (para instalar con código) y no hay manera. En vez de las fotos, me salen pequeñísimos iconos vacíos. No sé si puede haber algún problema con el generador de código del Acces Token… pues sale un aviso que la herramienta está a punto de desaparecer. El blog es bastante antiguo, y yo lo acabo de coger ahora para actualizarlo y ponerlo un poco bonito…
    La verdad es que me encantaba la idea de poner la barra de instagram directa sin Snapwidged (que és la única que he conseguido poner pero lleva demasiados anuncios).
    Enhorabuena por el material que te has trabajado, muy didáctico todo, y apto para novat@s!

  10. Ricardo

    Buenos días. Muchas gracias por el código. Sin embargo, por lo visto el generador de Access Token ya no existe. Instragram ha decidido eliminarlo. Aparece el siguiente mensaje:

    Eliminación de feed de Instagram
    A partir del 31 de marzo de 2020 la plataforma de Instagram dejará de utilizar su API.

    Las secciones de feed de Instagram de cada tema de Pixel Union se verán afectadas por esto, ya que los tokens de acceso dependen de este sistema para conectarse.

    Generador de tokens de acceso a Instagram desactivado.
    El generador de tokens de acceso de Instagram, una herramienta gratuita para conectar temas con cuentas de Instagram, ya no está disponible para su uso. Esta desactivación es permanente y la herramienta no será reemplazada.

    Los feeds de Instagram se eliminarán de todos los temas.
    A partir del 14 de febrero de 2020, cada lanzamiento de tema de Pixel Union excluirá la sección de feed de Instagram. Para versiones anteriores, la sección de feed de Instagram puede ser visible pero ya no funcional a partir de la fecha de desactivación (31 de marzo de 2020).

    Una lástima, tenía ganas de probarle. Me he quedado pillado en el último paso, ¡¡que desgracia!! ¿alguna solución alternativa que no dependa de terceros con su molesta publicidad?

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *