jQuery: Mostrar fotos de Instagram usando la API

A continuación 3 códigos diferentes jquery para mostrar (por: ID de usuario, Usuario, Tag) las últimas fotos de Instagram usando su API.

1. Creamos un nuevo cliente de instragram desde: https://instagram.com/developer/ para obtener el valor de «CLIENT ID» que necesitaremos en los scripts.

2. Creamos el elemento en html donde se cargaran las fotos dinámicamente por ajax. En este caso un <ul> vacio con un id:

<ul id="galeria-instagram"></ul>

3. Creamos el script jQuery. 3 ejemplos diferentes:

3 tipo de tamaños para las imágenes que tiene la API de instagram (yo he utilizado «thumbnail» en los 3 ejemplos):

• thumbnail (150×150 px)
• low_resolution (320×320 px)
• standard resolution (640×640 px)

A. Por ID de usuario:

Cambia el valor de la variable «userid» por el id de usuario que quieras. Para obtener el id de un usuario cualquiera puedes utilizar esta herramienta.

var clientid = 'CLIENT ID',
       userid = 290023231,
       num_photos = 6;
 
$.ajax({
	url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {client_id: clientid, count: num_photos},
	success: function(data){
 		console.log(data);
		for( x in data.data ){
			$('#galeria-instagram').append('<li><img src="'+data.data[x].images.thumbnail.url+'"></li>');
		}
	},
	error: function(data){
		console.log(data);
	}
});

Demo:

See the Pen ZbxGxo by Jorge Maiden (@jorgemaiden) on CodePen.

B. Por usuario:

Cambia el valor de la variable «username» por el nombre de usuario que quieras.

var clientid = 'CLIENT ID',
       username = 'awwwards',
       num_photos = 6;

$.ajax({
	url: 'https://api.instagram.com/v1/users/search',
	dataType: 'jsonp',
	type: 'GET',
	data: {client_id: clientid, q: username},
	success: function(data){
		console.log(data);
		$.ajax({
			url: 'https://api.instagram.com/v1/users/' + data.data[0].id + '/media/recent',
			dataType: 'jsonp',
			type: 'GET',
			data: {client_id: clientid, count: num_photos},
			success: function(data2){
				console.log(data2);
				for(x in data2.data){
					$('#galeria-instagram').append('<li><img src="'+data2.data[x].images.thumbnail.url+'"></li>');  
				}
    			},
			error: function(data2){
				console.log(data2);
			}
		});
	},
	error: function(data){
		console.log(data);
	}
});

Demo:

See the Pen jQuery: Fotos Instagram por «usuario» by Jorge Maiden (@jorgemaiden) on CodePen.

C. Por Tag:

Cambia el valor de la variable «hashtag» por el nombre de hashtag que quieras.

var clientid = 'CLIENT ID',
       hashtag='zamora',
       num_photos = 6;

$.ajax({
	url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {client_id: clientid, count: num_photos},
	success: function(data){
		console.log(data);
		for(x in data.data){
			$('#galeria-instagram').append('<li><img src="'+data.data[x].images.thumbnail.url+'"></li>');  
		}
	},
	error: function(data){
		console.log(data);
	}
});

Demo:

See the Pen jQuery: Fotos Instagram por «tag» by Jorge Maiden (@jorgemaiden) on CodePen.