Instagram basic display API Guide Part 3 (JavaScript)

Part 1 of this tutorial described how the new Instagram API, implemented on Facebook Developer Platform has changed and how to get the new Long lived token using the Token Generator Tool. Part 2 explain how to get Instagram Feed data by using the longed lived token generated in Part 1 and the Instagram API, working with PHP.

Part 3 of this tutorial will explain how to get the Instagram Feed using Instagram basic display API in JavaScript.

Warning

Please, use this method for testing only. We don't recommend using this method for your live site as it shows important data in the front end. You should use PHP  Part 2 for your live site.

Requisites:

  • Internet
  • Facebook account (username/password)
  • Instagram account (username/password)
  • Basic to Intermediate JavaScript knowledge
  • Basic to Intermediate HTML knowledge
  • Basic to Intermediate API handling knowledge

Step 1

In Instagram basic display API Guide Part 1, we generated a Longed lived token, useful to get the desired Instagram feed for our website.

The following information is also available for you here. We are just going to translate it into JavaScript/HTML and make it easier for you :)

First of all, we need to get data from the API:

GET "https://graph.instagram.com/me/media"

PARAMETERS (basic):

  • id
  • permalink
  • caption
  • media_url
  • media_type
  • access_token: Here, you need to enter the longed lived token we generated in Part 1.

The JavaScript and HTML code is below:

Github JavaScript Code

The values you need to replace are: APP_ID, REDIRECT_URI and LONGEDLIVEDTOKEN, this values are available for you in the Facebook Developer Platform on your app settings. For more details check our guide Part 1, we addressed this topic there. The LONGLIVETOKEN is the token we generated in Part 1.

It is now a matter to send this data to the front end (HTML) and display it there.

I hope you found this guide useful, if you have any questions, contact us.

Chao!