toggle

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 usuario: http://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>

También te puede interesar: