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.
Step 1. Go to Instagram Developer website and login.
Step 2. Now go to Manage client link on top right side of header bar
and click on link and create a new client add your details like your website url or callback url
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
or else you can request using PHP CURL like this
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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); |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> | |
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 🙂