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

14 comentarios:

  1. Se ve super facil lo intentare a ver que tal queda,gracias por compartir :)

    ResponderEliminar
    Respuestas
    1. Gracias por comentar Aurora! Es siempre un gusto tenerte por acá. Espero te funcione!

      Eliminar
  2. 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.

    ResponderEliminar
    Respuestas
    1. He actualizado la entrada con unos detalles faltantes, algo importantes; te invito a que la leas de nuevo.

      Eliminar
  3. Respuestas
    1. Lo he actualizado porque faltaban unas cosas. Te invito a que le des otra leída.

      Eliminar
  4. OMG que cuteee ♥ yo por ahora si lo dejo como lo tengo pero guardare esta entrada para mis proxima plantilla♥ *-* se ve super bonito!!!

    ResponderEliminar
    Respuestas
    1. Si le agrega más vistosidad al blog.

      Eliminar
  5. Wow me encanto ya voy intentarlo en mi blog *-*

    ResponderEliminar
  6. Creo que estos se miran bien bonitos en los blogs.<3

    VEGETARIAN COURTESYFACEBOOK

    ResponderEliminar
  7. Hey que genial, gracias!! yo soy algo mala para los codigos jajaja, pero ahi iré pacientemente.

    Saludos

    ResponderEliminar
    Respuestas
    1. Con paciencia todo se logra :D! Gracias por comentar, espero sea de utilidad.

      Eliminar
  8. 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!

    ResponderEliminar

Con tecnología de Blogger.