I couldn’t find any easy tutorial for implementing Instagram Feed on clients website. Thanks to Eddie, for providing me this opportunity to research and implement it.  So i thought to post this article which may help CMS MS developer to integrate the Instagram Feed easily.

I have used the Instagram API to display the pictures and jQuery cycle plugin for gallery effect.

First, Add the below code to the head section of the template.

{literal}
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
{/literal}

Second, add the below code to the body section where you want to display the images from Instagram.

<div id="photos"></div>
{literal}
<script>
$(function() {
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
         url: "https://api.instagram.com/v1/users/USER_ID/media/recent/?access_token=ACCESS_TOKEN",
        success: function(data) {
            for (var i = 0; i < NO_OF_IMAGES; i++) {
        $("#photos").append("<a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></a>"); 
        $("#photos").cycle({ 
        fx:     'all', 
        timeout: 2000, 
        speed:   300 
        });   
        }     

        }
    });

});

</script>

{/literal}

Replace USER_ID, ACCESS_TOKEN and NO_OF_IMAGES.