Last updated on August 1st, 2016 at 04:11 pm

Instagram is one of the most popular network for image sharing even more than a Facebook. Now in this post i am going to create a simple application in which i am going to use Instagram API to login and load my images from my wall. For this post i am using PHP and Angular to load and show image.

Demo

Step 1. Go to Instagram Developer website and login.

Step 2. Now go to Manage client link on top right side of header bar

Instagram integration on website

and click on link and create a new client add your details like your website url or callback url

Instagram image loading on website

Step 3. Now once you get your Client ID and Secret your ready to start. Add below code in your browser and hit enter to get code:

https://api.instagram.com/oauth/authorize/?client_id=<your_client_id>&redirect_uri=http://localhost:8080/instagram/&response_type=code

Note: If you want to other info like: public_content, follower_list, comments, likes etc you can add scope variable in above url eg: AboveURL&scope=likes+public_content

Also replace your callback url with your once. After ruining this url on browser you need to allow your app to access your data after this you get code and redirect back to callback url

http://localhost:8080/instagram/?code=9e2d1937038e431695a4d802bf981dc2

Step 4. Now we need to retrieve Access token from Instagram to load images.  We have two option here if you just want to load only your images like i am doing in this post you also use REST Client to request to get access token as show image bellow

Request instagram to get access token

or else you can request using PHP CURL like this


<?php
$handle = curl_init("https://api.instagram.com/oauth/access_token");
curl_setopt($handle, CURLOPT_POST, true);
curl_setopt($handle, CURLOPT_POSTFIELDS, array(
"client_id" => "<your_client_id>",
"client_secret" => "<your_secret>",
"grant_type" => "authorization_code",
"redirect_uri" => "http://localhost:8080/instagram/",
"code" => "3c4e17fe802844099e24a3df4e659f6e",
));
curl_setopt($handle, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($handle);
curl_close($handle);
echo "<pre>";
print_r($output);

view raw

index.php

hosted with ❤ by GitHub

After you run this code or hit send button on your rest client you get your access token with other details like this.

{
  "access_token": "189603107.ec6322d.4973e433a84d442dbdeaf42********",
  "user": {
    "username": "anehkumar",
    "bio": "Love think code:-)",
    "website": "http://www.trinitytuts.com",
    "profile_picture": "https://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/s150x150/12224246_800835950061774_816431823_a.jpg",
    "full_name": "Aneh thakur",
    "id": "189603107"
  }
}

Now you have your access token you can move forward to load images. Now we can load image and display


<?php
$handle = curl_init("https://api.instagram.com/v1/users/self/media/recent/?access_token=<your_access_tocken>");
//curl_setopt($handle, CURLOPT_GET, true);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($handle);
curl_close($handle);
?>
<html>
<head>
<title>My Instagram</title>
<!– Add your angular here //–>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!– Optional theme –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div ng-app="instagram" ng-controller="getData">
<div ng-repeat="img in data.data" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-4"><a class="thumbnail" href="#"><img src="{{data.data[$index].images.low_resolution.url}}"></a></div>
<div class="col-xs-4"><a class="thumbnail" href="#"><img src="{{data.data[$index + 1].images.low_resolution.url}}"></a></div>
<div class="col-xs-4"><a class="thumbnail" href="#"><img src="{{data.data[$index + 2].images.low_resolution.url}}"></a></div>
</div>
</div>
</div>
<script>
var app = angular.module("instagram" , []);
app.controller('getData' , function($scope, $http){
$scope.data = <?=$output ?>;
});
</script>
</body>
</html>

view raw

index.php

hosted with ❤ by GitHub

In above code i am using PHP CURl to load data and using angular and bootstrap to display images. This is very basic and simple post to load image from Instagram hope this help you 🙂