TrinityTuts

Load your instagram images on your site or blog

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

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

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

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 🙂