Archivo de la etiqueta: Instagram

Obtener imágenes desde Instagram para mostrarlas en tu Web

Si deseas obtener en tu Web las imágenes que tienes desde tu cuenta de Instagram estos son los pasos a seguir:

  1. Primero debes entrar en tu cuenta de instagram y en el pie de página buscar el enlace al desarrollo de la API
  2. Deberás crear un nuevo cliente, es decir tu aplicación web. Para ello existe un botón llamado «Gestionar Clientes». Una vez dentro deberás «Registrar un nuevo cliente».
  3. Aparecerá un formulario que deberás rellenar con el nombre de la aplicación (cualquiera vale), una descripción (la que desees), la url de tu sitio web y una url que se encuentre dentro de tu sitio  a donde redirigirá instagram para comprobar que te has autenticado correctamente. En realidad en este paso estamos registrando la aplicación, pero deberás registrar también el cliente para poder obtener el ClientID que es necesario para poder seguir adelante.
  4. Con esto hecho deberás ir a tu web y colocar el siguiente código sustituyendo el [clientid] y [callbackuri] por tus datos.
    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";
     }
  5. Con un navegador escribirás la url donde hayas colocado este código y si todo sale correctamente serás redirigido a la url que escribiste como callbackuri. Atento aquí a la url porque si todo es correcto se pasará como parámetro el access-token. Copialo y guárdalo porque lo necesitarás más tarde. En este punto puedes quitar el código anterior porque tu aplicación ya está autenticada.
  6. Ya queda menos… para el siguiente paso necesitas obtener tu identificador de usuario que no es lo mismo que tu identificador de cliente. Para obtenerlo puedes utilizar este tool de Instagram.
  7. Ya podemos obtener las fotos de Instagram con el siguiente código, sustituyendo claro está tu [userid] y tu [access_token]:
    $(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="&quot; + data.data[i].link +&quot;" target="_blank"><img class="instagram-image" alt="" src="&quot; + data.data[i].images.thumbnail.url +&quot;" /></a></div>
    ");
     }
     }
     }
     });
     });
  8. Para que esto funcione debes de tener una capa con la clase «instagram» ya que es ahí donde añade los elementos con jquery.