[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]