[Actualizado] Instagram Feed de Fotos

Hoy me encontraba cambiando algo el blog por suerte esta vez me fue mas fácil, bien dicen que uno funciona mejor a base de café, así que se me ocurrio compartirles como tener su feed de instagram para que no batallen con aplicaciones o código que cuando le dan click a la imagen las manda a otras paginas.




Lo que vamos a usar es un script que a través de un comodín de acceso, que es un código que tiene nuestra id de usuario, recolectara nuestras fotos y las mostrara.


Debemos reemplazar el access token con el nuestro para que funcione (recuadro rojo).
Este lo obtenemos en PixelUnion es necesario haber iniciado sesión con nuestra cuenta de Instagram. Esto no alterara tu cuenta, únicamente te dará el token.




Vamos a necesitar este código, que es para obtener las fotos de nuestro Ingstagram, puedes jugar con los valores, pero no lo recomiendo a menos que sepas que estas haciendo:

<div id='instafeed'/>


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

var feed = new Instafeed({
 get: 'user',
 userId: tuUserId,
  limit:16,
  sortBy:'random',
accessToken: 'tu access token',
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: 'standard_resolution'
 });
 feed.run();


//]]>
</script></div>




Lo agregaremos como agregamos un gadget de HTML/Javascript. Y reemplazaremos de la siguiente manera donde puse "tu access token" pondras tal cual el codigo. 

Donde dice userId pondras solo la primer parte del access token, hasta el punto, sin apostrofes.


Agregamos como un gadget cualquiera de HTML/JavaScript

Ahora nos falta otro script y estilos para el mismo.

Ve a este archivo en Github y copia el contenido, este script ordena las fotos y nos avisa en caso de errores. Pegalo antes del footer.

El siguiente es el estilo que lleva el feed. En CSS se puede agregar en el CSS del blog desde donde editamos la plantilla HTML.  Lo obtienes aqui.


Y se vera de esta manera.


Es una guia super rapida, o eso prentendia ser, con ella le agregamos mas interactividad a nuestro blog y enlaces a Instagram que es una red social muy buena para las bloggers.


Si tienen algun problema agregando este script dejenmelo en los comentarios.

Happy bloggin'!
[Disculpen los inconvenientes]

Comentarios

Aurora dijo…
Se ve super facil lo intentare a ver que tal queda,gracias por compartir :)
Maggo dijo…
Trate de agregarlo, pero no he podido detectar en que falle, no me aparecen las imagenes. Creo que estoy poniendo mal el token, mañana con calma lo reviso bien.
Unknown dijo…
a mi no me funciono
Mayra Victoria dijo…
OMG que cuteee ♥ yo por ahora si lo dejo como lo tengo pero guardare esta entrada para mis proxima plantilla♥ *-* se ve super bonito!!!
Daniela Angel dijo…
Wow me encanto ya voy intentarlo en mi blog *-*
Mariana Garcia dijo…
Lo he actualizado porque faltaban unas cosas. Te invito a que le des otra leída.
Adriana Robles dijo…
Creo que estos se miran bien bonitos en los blogs.<3

VEGETARIAN COURTESYFACEBOOK
Luzmaría Alam dijo…
Hey que genial, gracias!! yo soy algo mala para los codigos jajaja, pero ahi iré pacientemente.

Saludos
Mariana Garcia dijo…
Gracias por comentar Aurora! Es siempre un gusto tenerte por acá. Espero te funcione!
Mariana Garcia dijo…
He actualizado la entrada con unos detalles faltantes, algo importantes; te invito a que la leas de nuevo.
Mariana Garcia dijo…
Con paciencia todo se logra :D! Gracias por comentar, espero sea de utilidad.
x dijo…
Me encanta como se ve el feed de IG en la parte de abajo del blog <3 el tutorial super bien hecho, yo ya lo tenía pero si no me lo hubiera puesto de ya!

xoxo!
Mariana Garcia dijo…
Suerte con ello! 😙
Mariana Garcia dijo…
Si le agrega más vistosidad al blog.

Entradas populares