Pinceladas da Web

O Instagram é um serviço de compartilhamento de fotos pelo celular, por enquanto disponível somente para usuários de iPhone (Sorry, Android Users). Através do aplicativo no celular, seus usuários tiram fotos em estilo Polaroid e podem enviá-las para seus amigos, compondo uma espécie de rede social. Assim como o twitter, você pode seguir pessoas e ser seguido, enviando as fotos que retratam o seu cotidiano junto com textos curtos, e vendo fotos de amigos. Dá ainda para dizer, por geolocalização, onde as fotos foram tiradas.

O serviço tem crescido drasticamente nos últimos dias, e hoje tem aproximadamente 12 milhões de usuários. E como qualquer outra aplicação pop, eles possuem uma API, onde você pode por exemplo mostrar suas últimas fotos em seu site, ou algo do tipo.

Antes de tudo, para utilizar a API do Instagr.am, você deve ir até o site e criar um aplicativo para obter um access token e um client id, sem os mesmos você não consegue fazer nada.

Com tudo isso OK, vamos a um exemplo prático, mostrar as últimas 20 fotos de um usuário qualquer do Instagr.am. O código responsável por isso você pode ver abaixo:

var accessToken = 'seu_access_token';
var username= "nome_do_usuario";
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.getUser();
		},
		getUser: function() {
			var getUserURL = 'https://api.instagram.com/v1/users/search?q='+ username +'&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getUserURL,
				success: function(data) {
					var getUserID = data.data[0].id;
					instagram.loadImages(getUserID);
				}
			});
		},
		loadImages: function(userID) {
			var getImagesURL = 'https://api.instagram.com/v1/users/'+ userID +'/media/recent/?access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Você também pode pegar as últimas fotos mais populares, o código responsável por isso está abaixo:

var accessToken = 'seu_access_token';
var limit = 32; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/media/popular?access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Caso você queira buscar por alguma tag, utilize o código abaixo:

var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/tags/html5/media/recent?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit ; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Eu também posso buscar fotos por geolocalização, basta passar na requisição as coordenadas geográficas e ele busca todas as fotos em um raio máximo de 5 KM, como podem ver no código de exemplo abaixo:

var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/media/search?lat=52.370275&lng=4.886055&distance=5000?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.