Tuesday, August 23, 2011

[Javascript] Implementing Instagram API with Javascript

Instagram becomes a popular photo taking app on iPhone rapidly. You can also integrate Instagram photo on your web by API. This is a basic tutorial on how to code it.

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:
Related Posts Plugin for WordPress, Blogger...