Bring your Instagram into the website 101

Programming, Interaction design, Accessibility

Tools Used : p5.js, API

Here is the introduction about how you can manipulate API acquired from Instagram. We can bring an Instagram photos or videos into your website with API by real time. This doesn't mean to embed your ceartain photos or videos on the website like this, so that those stuffs you did upload on Instagaram automatically will be uploaded on the website as soon as you do. Json used is a kind of data file and we grab its values into our code easily to get the data visualized.

If you're not familiar to API or don't learn it but you wanna do that, please take a look at Snap Widget without API.

The outcome:

Hello, the Instagram's items!!

Rows: Sorce code
- The photo will be added here at the same time of uploading to Instagram.


The summary:

  1. Register to get the API key and also client ID. - the process 1 through 2.
  2. Authenticate and acquire the token. - the process 3.
  3. Access to the URL with the token to confirm JSON data. - the process 4.
  4. How you can import the JSON by p5.js. - the process 5.
  5. How you can display the uploads of Instagram on the window of p5.js. - the process 6.

The API data from: Instagram developer


The process 1:

Access to Instagram above and sign up. You difinitely need this process whereever you get API key. Whataever your contents will work well by putting your API key into a particular URL.
- Hit the Register Your Application in the middle of the page.



The process 2-1:

You will see these boxes and should fill out.
- Please, type your information into the boxes.
  1. Application Name - Whatever
  2. Description- Whatever
  3. Website URL - the URL of your website
  4. Valid redirect URIs - the URL of your website
  5. Contact email - Your e-mail address




The process 2-2:

Move on into Security tab.
- Uncheck the Disable implicit OAuth.
- Press the Register with the security words displayed.

The process 3:

You finally get authenticated and acquire the token in this part. You have already had what you need to authenticate such as the CLIENT-ID and REDIRECT-URI.
- Please, access to https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=co.
- Make sure the URL you did and you can see the CLIENT-ID and REDIRECT-URI after " = " in the URL. In this part where you must replace the contents you registered for the first time . When done, Reload the page and move on the next page below.
- Press the Authorize in green.

The process 4:

You will fly to your website after pressing the Authorize at the end of the process 3 but quickly make sure the URL. You must notice that a "code =" is added in the end of the URL that is the token.
- Please, access to https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN.
- Replace the ACCESS-TOKEN after "=" to the token you've got in the URL.
- Reload the page then, you will see the JSON data on your browser.

This extension for google chrome is really helpful to align JSON data.


The process 5:

Manipulate the JSON with Javascript as p5.js which is Web Editor and an in-browser interactive development environment for writing p5.js sketches. It aims to lower the bar for creative coding. Users can start writing p5.js by simply opening a browser window, without the need to download software or do any configuration. It is free to use and it is an open source project, which is led by Cassie Tarakajian.

Download: p5.js

- Write code like this in setup() to load the JSON data from URL including the token. The function getData() is working as a function of call back which is excuted after loadJSON() excuted.
- Press the Play button and you will see the JSON data in the console. Sorce code



The process 6:

Next stops is visualizing the data, instead of lining up the one as the list. I think that you will find a bunch of "url" in the console box that are the uploaded photos. Click it. The photos or videos will shows up in front of you. We"ll eventually use this urls to display on the website with "createImg" that is included in the p5.dom library that makes it easy to interact with other HTML5 objects, including text, hyperlink, image, input, video, audio, and webcam.
- Rewrite code to see one of the photos. Sorce code


- Rewrite again to see the 9 photos. You don't have to have the high resolusion of the photo to line up on the website. Note that the size of thumbnail is 150 by 150 px. Sorce code
- We've done.


We've finished so far that and usually should organize the items with stylesheet to go with the website.

Hello, the Instagram's items!!

Square: Sorce code / StyleSheet


← Back to Home