Let's take a look at the demo first.
In this example, jQuery has been used for decreasing development time. It can also be done without jQuery. Here is the full source.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Instagram</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<style>
html, body { height: 100%; margin: 0; padding: 0; background-color: #ffffff;}
#panel { height: auto; float: right; width: 100%; }
#panel .photoWrapper { width: 150px; height: 150px; margin:2px; float:left; box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4); display:none;}
#panel. photoWrapper .photo { width: auto; height: auto; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
var access_token = '3794301.f59def8.e08bcd8b10614074882b2d1b787e2b6f';
loadFeed();
function loadFeed() {
var param = {access_token:access_token};
cmd(param, onPhotoLoaded);
}
function cmd(param, callback) {
//popular
var cmdURL = 'https://api.instagram.com/v1/media/popular?callback=?';
$.getJSON(cmdURL, param, callback);
}
function onPhotoLoaded(data) {
if(data.meta.code == 200) {
var photos = data.data;
if(photos.length > 0) {
for (var key in photos ){
var photo = photos[key];
$('<div id=p' + photo.id + '></div>').addClass('photoWrapper').appendTo('#panel');
var str = '<img id="' + photo.id + '" src="' + photo.images.thumbnail.url + '" width="100%">';
$('<div></div>').addClass('photo').html(str).appendTo('#p' + photo.id);
$('#' + photo.id).load(function() {
$('#p' + $(this).attr('id')).fadeTo('slow', 1.0);
});
}
}else{
alert('empty');
}
}else{
alert(data.meta.error_message);
}
}
});
//-->
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>This is an example grabbing popular feed from Instagram. You may have a question on the access_code. This is a code generated from OAuth authentication. Each application that work with Instagram API should be registered at official website. A client_id and client_secure will be assigned for your application. But at development stage, you can use the access_code in my example. However, only popular feed can be retrieved from this code, such as /media/* .
I have developed a JS function called cmd() to centralize all API call in this example. JSON has been adopted because it can handle cross-domain issue.
Actually, the logic in the example is not so complicated. Hope this example can give you a brief idea on the API integration.
Book you may feel interested:
We all love Instagram and Google. This is a google gadget to show the popular feed at your iGoogle panel or paste it into your blog as well. All photos will be rotated automatically, with nice transition, by time to time and what we could do is layback and enjoy all sweet photos. This is the version and I know it still lots of things going to improve. I'm happy that you can jot down your comments to me. So, stay tuned.
