DEV Community

Cover image for Tutorial Use Instagram Basic Display API with Javascript
David Nguyen
David Nguyen

Posted on

Tutorial Use Instagram Basic Display API with Javascript


The Instagram Basic Display API allows users of your app to get basic profile information, photos, and videos in their Instagram accounts.

The API can be used to access any type of Instagram account but only provides read-access to basic data. If you are building an app that will allow Instagram Businesses or Creators to publish media, moderate comments, identify @mentioned and hashtagged media, or get data about other Instagram users, use the Instagram Graph API instead.

Common Uses

Get an Instagram User Access Token and permissions from an Instagram user
Get an Instagram user's profile
Get an Instagram user's images, videos, and albums

# Register on Instagram Basic Display API and get an Access Token

- Step 1: Create a Facebook App

Go to, click My Apps, and create a new app. Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll the bottom of page, and click Add Platform.

Create a Facebook App

Choose Website, add your website’s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use Website.




Please enter your website address below as an example


- Step 2: Configure Instagram Basic Display

Click Products, locate the Instagram product, and click Set Up to add it to your app.


Click Basic Display, scroll to the bottom of the page, then click Create New App.


- Step 3: Add an Instagram Test User

Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.



Open a new web browser and go to and sign into your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.


Your Instagram account is now eligible to be accessed by your Facebook app.

- Step 4: Authenticate the Test User

Access the token generator in the App Dashboard > Products > Instagram > Basic Display tab.

Click on Generate Token button for Instagram Tester user of your app. Please note Tokens can only be generated for public Instagram accounts.


Authenticate if requested, follow the instructions, accept permissions and copy the Access Token it appears.




Your Instagram account is now eligible to be accessed by your Facebook app.

Construct the Authorization Window URL below, replacing {app-id} with your Instagram app’s ID (from the App Dashboard > Products > Instagram > Basic Display > Instagram App ID field) and {redirect-uri} with your website URL that you provided in Step 2 ("Valid OAuth Redirect URIs"). The URL must be exactly the same.{app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code

For example:,user_media&response_type=code

Open a new browser window and load the Authorization Window URL. It should appear and display your Instagram user’s name, the app’s name, and a description of the permissions your app is requesting.


Authenticate your Instagram test user by signing into the Authorization Window, then click Authorize to grant your app access to your profile data. Upon success, the page will redirect you to the redirect URI you included in the previous step and append an Authorization Code.

For example:

Note that #_ has been appended to the end of the redirect URI, but it is not part of the code itself. Copy the code (without the #_ portion) so you can use it in the next step.


Use Instagram Basic Display API with Javascript

FC Instagram: core file (FCInstagram.js)

 * FC Instagram - Development FCV Team
 * Website:
 * Since: 2019-11
 * Version: v2.0.0
 * Github:
 * Document Instagram Basic Display API:

var FCInstagram = window.FCInstagram || {}; = "FC Instagram";
FCInstagram.version = "2.0.0";

// Info
  "%c " + + " %c v" + FCInstagram.version + " %c",
  "margin-left: 5px; padding: 1px; color: #FEFEFE; font-size: 12px; line-height: 15px; background: #F79433; border-radius: 3px 0 0 3px;",
  "padding: 1px; color: #FEFEFE; font-size: 12px; line-height: 15px; background: #FF5722; border-radius: 0 3px 3px 0;",
  "background: transparent;"

// Utility for older browsers
if (typeof Object.create !== "function") {
  Object.create = function (obj) {
    function F() {}

    F.prototype = obj;
    return new F();

(function ($, window, document, undefined) {
  var Instagram = {
    API_URL: "",
    API_FIELDS: "caption,media_url,media_type,permalink,timestamp,username",

     * Initializes the plugin.
     * @param {object} options
     * @param {jQuery Object} elem
    initialize: function (options, elem) {
      this.elem = elem;
      this.$elem = $(elem);
      (this.accessToken = $.fn.FCInstagram.accessData.accessToken),
        (this.options = $.extend({}, $.fn.FCInstagram.options, options));

      this.messages = {
        defaultImageAltText: "Instagram Photo",
        notFound: "This user account is private or doesn't have any photos.",


     * Calls the fetch function and work with the response.
    getPhotos: function () {
      var self = this;
    //   messages = null;

      self.fetch().done(function (results) {
        if ( {
        } else if (results.error.message) {
          $.error("FCInstagram.js - Error: " + results.error.message);
        } else {
          $.error("FCInstagram.js - Error: user does not have photos.");

     * Makes the ajax call and returns the result.
    fetch: function () {
      var getUrl =
        this.API_URL + this.API_FIELDS + "&access_token=" + this.accessToken;

      return $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: getUrl,

     * Appends the markup to the DOM with the images.
     * @param {object} results
    displayPhotos: function (results) {
      var $element,
        imageGroup = [],

      max =
        this.options.max >=
          : this.options.max;

      if ( === undefined || === 0) {



      for (var i = 0; i < max; i++) {
        if (
[i].media_type === "IMAGE" ||
[i].media_type === "CAROUSEL_ALBUM"
        ) {
          hasCaption =
  [i].caption !== null ||
  [i].caption !== undefined;

          imageCaption = hasCaption
            ? $("<span>").text([i].caption).html()
            : this.messages.defaultImageAltText;

          $element = $("<a>", {
            target: "_blank",
            title: imageCaption,
              "background:url(" +
    [i].media_url +
              ") no-repeat center / cover;",
            rel: "nofollow",

          // Add item

        } else if ([i].media_type === "VIDEO") {
          autoplay =
            this.options.autoplay == true
              ? "autoplay muted loop playsinline"
              : "";

          $source = $("<source>", {
            type: "video/mp4",

          $video = $("<video " + autoplay + ">").append($source);

          $element = $("<a>", {
            target: "_blank",
            title: imageCaption,
            rel: "nofollow",

          // Add item



      if (typeof this.options.complete === "function") {;

   * FCInstagram Plugin Definition.
  jQuery.fn.FCInstagram = function (options) {
    if (jQuery.fn.FCInstagram.accessData.accessToken) {
      this.each(function () {
        var instagram = Object.create(Instagram);

        instagram.initialize(options, this);
    } else {
      $.error("You must define an accessToken on jQuery.FCInstagram");

  // Plugin Default Options.
  jQuery.fn.FCInstagram.options = {
    complete: null,
    max: 9,
    autoplay: false

  // Instagram Access Data.
  jQuery.fn.FCInstagram.accessData = {
    accessToken: null,
})(jQuery, window, document);

  • JS
<!-- BEGIN - FC Instagram - Script -->
    <script src="instagram/shared/js/FCInstagram.js"></script>
    jQuery.fn.FCInstagram.accessData = {
        accessToken: "", // Token
        max: 9, // A number between 1 and 25 of photos to show. Default: 9
        autoplay: true, // Set autoplay video: true/false. Default: false
        complete: function () { // A callback function to execute after the display of the photos.
<!-- END - FC Instagram - Script -->
  • CSS
/* *
* FC Instagram - Development FCV Team
* Website:
* Since: 2019-11
* Version: v2.0.0
* */

.instagram-gallery-medium {
    width: 480px;
    cursor: pointer;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;

.instagram-gallery-medium > a {
    width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
    margin: 5px;

.instagram-gallery-medium > a > video{
    width: 100%;
    height: 100%;
    object-fit: cover;

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .instagram-gallery-medium {
        width: 320px;

    .instagram-gallery-medium > a {
        width: 100px;
        height: 100px;
        margin: 2px;

/* END - MEDIUM */
  • HTML
<!-- BEGIN - Show Instagram -->
    <div id="instafeed" class="instagram-gallery-medium"></div>
<!-- END - Show Instagram -->
# Required Default Type Description
accessToken Yes null String This is your Instagram Application AccessToken.
max No 9 Number A number between 1 and 25 of photos to show.
autoplay No false Boolean Video Autoplay On / Off with setup true/false.
complete No null Function A callback function to execute after the display of the photos.



Live demo:



Discussion (6)

nealwilxite_50 profile image

I am using this for a client. Am a little unsure if I need to do a app review.

hoangit profile image
David Nguyen Author • Edited on

I'm not sure, but after my testing, the token will expire at a certain time, so consider using it for your partner.
Once the token expires, you can go through the token generation steps again, but that would be suitable. I will find ways to fix this issue in the future.

nicotix profile image
Nicolas Tixador

Hi, did you find a solution for the token expiration ?

leefoster profile image
LeeFoster • Edited on

Are there any options to show a number of images in a carousel? Say the last 5?

Also, I want to increase the height and width. I've placed the

in a parent , I've set the width to 100% of the parent and that's fine but the height will not increase to match. Setting it to auto doesn't work, 100% doesn't work the only way to do it was to set it to 400px but that doesn't really make it responsive.

Oh, and how do I put the users name, caption and timestamp below the image?

nootype profile image

Average comment rate, average likes, likes-comment ration, business category, business e-mail, engagement rate, followers and followed and many more. Your one port access to Instagram API: