Mostrar el feed de Instagram en una página web

¿Cómo puedes cargar y mostrar tus imágenes subidas a tu cuenta de Instagram en tu sitio web?

1 Pon este trozo de codigo en la parte del HTML que quieras (dentro del body):

<div id="instagram"></div>

2 Añade el javascript necesario para que todo funcione correctamente antes de </body>:

<script type="text/javascript" src="js/instagram.js"></script>

<script type="text/javascript">
      try{Typekit.load();}catch(e){}

      var feed = new Instafeed({
          get: 'user',
          userId: 1234567890,
          accessToken: '1234567890.1234ed6.9f10beb835be461db8158f7fae4e3401',
          target: 'instagram',
          resolution: 'standard_resolution',
          limit: 8,
          template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',

          after: function() {
            var el = document.getElementById('instagram');
            if (el.classList)
              el.classList.add('show');
            else
              el.className += ' ' + 'show';
          }
      });

      window.onload = function() {
        feed.run();
      };

</script>

3 El archivo “instagram.js” lo podéis descargar aquí donde también podéis encontrar toda la información para poder mostrar los likes, los comentarios, la descripción de las publicaciones de Instagram, filtrar las imágenes por tags, etc.

4 El “userId” de la cuenta de Instagram que vayáis a utilizar podéis conseguirlo aquí.

5 Y el “accessToken” que necesitáis lo podéis crear aquí.

6 Os dejo un pequeño fragmento inicial de código CSS con el que podréis modificar los estilos:

#instagram {
    position: relative;
    max-width: 1000px;
    width: 100%;
    margin: 0px auto;
}

#instagram a {
    display: block;
}

#instagram img {
    width: 20%;
    float: left;
    display: block;
    position: relative;
    margin:  0;
}

Fuente: http://instafeedjs.com/

¿Hablamos?

ir arriba