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:
