Inserta tus fotos de Instagram en tu web

Estoy en pleno proceso de rediseño de la web, y una de los primeros problemas que me he encontrado es al intentar integrar mis imágenes de instagram en mi web.

Hay varias opciones:

  1. Utilizar uno de los plugins de wordpress que insertar las fotos de Instagram.
  2. Hacer un componente propio que haga exactamente lo que quieras.

En mi caso, opté por la segunda opción. Encontré un código jquery  + php muy sencillo que hace este proceso. El problema ha sido el registrar mi aplicación en Instagram para poder obtener el access token, y sobre todo me ha costado obtener mi numero de usuario. Ya lo sé, es una tontería, pero nunca antes me había tenido que pelear con ello.

Para registrarla he seguido los pasos del articulo de Dan Pavitt:

var access_token = location.hash.split('=')[1];

if (location.hash) {

} else {
    location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]/&response_type=token";
}

Es necesario remplazar [clientid] y  [callbackuri] por el Client ID y la Redirect URI que te aparece al dar de alta al cliente.

Este proceso solo debes de ejecutarlo una vez, y solo vale para obtener un token de acceso que te permitirá obtener tus fotos de Instagram.

El último datos que necesitaremos será nuestro identificador de usuario. En un principio yo pensé que será el Client ID que nos devolvió nuestro cliente, pero resulta que no.

Yo he usado esta aplicación de Instagram para obtener mi id de usuariohttp://yvesvanbroekhoven.github.com/get-your-instagram-user-id/ pero entiendo que tiene que haber una forma mas sencilla de hacerlo.

Una vez que tengamos toda esta información ya podremos utilizar el código que nos devolverá nuestras imágenes:

$(function() {

$.ajax({
  type: "GET",
  dataType: "jsonp",
  cache: false,
  url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
  success: function(data) {
    for (var i = 0; i < 6; i++) {
      if(data.data[i]) { // to prevent a bug with non missing images
         $(".instagram").append("<div class="instagram-placeholder"><a href="' + data.data[i].link + '" target="_blank"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url + '" alt="" /></a></div>");
      }
    }
  }
});
});

Evidentemente tendremos que remplazar [userid] y [access_token] por los datos correctos.

Aquí podéis ver en funcionamiento este ejemplo:

Ahora ya solo me queda el integrar estas imágenes con un slider chulo y listo. Pero eso es otra historia.

Mostrar imágenes por tag

Tal como me ha comentado charlescuellar, tambien podemos obtener las imágenes de instagram por tag, en lugar de por usuario.

Tan solo es necesario remplazar la url de llamada a la API por esta:

</pre>
https://api.instagram.com/v1/tags/[tag]/media/recent/?access_token=[access_token]
<pre>

17 comentarios

  1. hola amigo interesante post, pregunta como puedo hacer para que me nuestro por el # hashtag ??
    gracias estoy atento a su respuesta

    • Jaime Fernández dice:

      Pues la verdad es que lo desconozco. Este caso solo está preparado para mostrar las fotos por usuario. Disculpa y gracias por el comentario!

  2. segun lo q encontre la clave esta en la URL
    para mostrar por TAG es asi
    https://api.instagram.com/v1/tags/servidigital/media/recent/?access_token=
    en este ejemplo buscamos los tags q tenga #servidigital asi me muestra, pero no le logrado hacer el slider 😛 no

  3. David dice:

    Hola como le podría hacer para que al querer subir una imagen en mi pagina web me abra el directorio de mi instagram?

  4. diego dice:

    excelente amigo gracias por compartirlo =)

  5. diego dice:

    otra forma para obtener el user id que e encontrado
    http://jelled.com/instagram/lookup-user-id

  6. balloon dice:

    Hola, gracias por el aporte. La función ayax no me está devolviendo las imágenes, le hice un debug con Firebug y me dice en la línea del if que data.data is undefined.
    Alguna sugerencia? Muchas gracias!

  7. Rompecabezas dice:

    No te podrías explicar un poco mas, ya que haces un post ayudando, no lo compliques más, te lo digo porque lo único que has hecho es coger la información y la has repetido del otro post donde has enlazado, no se implementar el código en la pagina, ya que no hay etiquetas de ningun modo supongo que ira en script pero no lo pones, solo pones que lo pongamos en la pagina, y no es así. Entonces donde se ejecuta el código VAR? y donde implementamos el código functions?¿?

  8. jose miguel dice:

    Hola, actualmente estoy desarrollando una tienda online en prestashop y quiero meterle una opción de enlace con instagram para que los usuarios puedan cargar sus fotos de Instagram al producto que más les interese, tipo printinggram, no encuentro nada específico para Prestashop. Me podéis ayudar? Gracias.

  9. Francisco dice:

    Estimado, como hago para que aparezcan mas imágenes en la galería, he insertado un tag, pero pese a cambiar la variable < 20 no me aparecen mas imagenes. Muchas Gracias.-

  10. Fito dice:

    Buenas tardes, me gustaría saber si hay algún tipo de limitación desde instagram, ya que solo me muestra las últimas 20 fotografias. Me gustaría que me mostrara siempre todas las fotos de mi perfil de instagram.
    Gracias

  11. david dice:

    He seguido los pasos que indicas en tu blog, pero me da el siguiente error al insertar el archivo: http://www.tuguiademadrid.com/instagram.html

    ¿Se te ocurre de que puede ser?

Escribe una comentario