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

#javascript #jquery #instagram

Introduce

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 developers.facebook.com, 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.

step-1-2

step-1-3

step-1-4

Please enter your website address below as an example

https://fc-share.gitlab.io/fc-template-instagram-document/auth/
Enter fullscreen mode Exit fullscreen mode

step-1-5

- Step 2: Configure Instagram Basic Display

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

step-2-1

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

step-2-2

https://fc-share.gitlab.io/fc-template-instagram-document/auth/
Enter fullscreen mode Exit fullscreen mode

- 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.

step-3-1

step-3-2

Open a new web browser and go to www.instagram.com 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.

step-3-3

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.

step-4-1

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

step-4-2

step-4-3

step-for-customer-1

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.

https://api.instagram.com/oauth/authorize?client_id={app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code
Enter fullscreen mode Exit fullscreen mode

For example:

https://api.instagram.com/oauth/authorize?client_id=3518059988204696&redirect_uri=https://fc-share.gitlab.io/fc-template-instagram-document/auth/&scope=user_profile,user_media&response_type=code
Enter fullscreen mode Exit fullscreen mode

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.

step-for-customer-2

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:

https://fc-share.gitlab.io/fc-template-instagram-document/auth/?code=AQC-WbZmY....GbkbKVfzWPH3k0_p-HDkdyTvnpw#require
Enter fullscreen mode Exit fullscreen mode

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.

AQC-WbZmY....GbkbKVfzWPH3k0_p-HDkdyTvnpw
Enter fullscreen mode Exit fullscreen mode

Use Instagram Basic Display API with Javascript

FC Instagram: core file (FCInstagram.js)

/*!
 * FC Instagram - Development FCV Team
 * Website: https://eplus.dev
 * Since: 2019-11
 * Version: v2.0.0
 * Github: https://gitlab.com/fc-share/template-instagram
 * Document Instagram Basic Display API: https://developers.facebook.com/docs/instagram-basic-display-api
 */

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

// Info
console.info(
  "%c " + FCInstagram.name + " %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: "https://graph.instagram.com/me/media?fields=",
    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.",
      };

      this.getPhotos();
    },

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

      self.fetch().done(function (results) {
        if (results.data) {
          self.displayPhotos(results);
        } 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,
        $video,
        hasCaption,
        imageGroup = [],
        imageCaption,
        autoplay,
        max;

      max =
        this.options.max >= results.data.length
          ? results.data.length
          : this.options.max;

      if (results.data === undefined || results.data.length === 0) {

        this.$elem.append(this.messages.notFound);

        return;
      }

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

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

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

          // Add item
          imageGroup.push($element);

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

          $source = $("<source>", {
            src: results.data[i].media_url,
            type: "video/mp4",
          });

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

          $element = $("<a>", {
            href: results.data[i].permalink,
            target: "_blank",
            title: imageCaption,
            rel: "nofollow",
          }).append($video);

          // Add item
          imageGroup.push($element);

        }
      }

      this.$elem.append(imageGroup);

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

  /**
   * 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);
Enter fullscreen mode Exit fullscreen mode
  • JS 
<!-- BEGIN - FC Instagram - Script -->
    <script src="instagram/shared/js/FCInstagram.js"></script>
    <script>
    jQuery.fn.FCInstagram.accessData = {
        accessToken: "", // Token
    };
    $('#instafeed').FCInstagram({
        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.
            console.log('completed');
        }
    });
    </script>
<!-- END - FC Instagram - Script -->
Enter fullscreen mode Exit fullscreen mode
  • CSS 
/* *
* FC Instagram - Development FCV Team
* Website: https://eplus.dev
* Since: 2019-11
* Version: v2.0.0
* */

/* BEGIN - MEDIUM */
.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 */
Enter fullscreen mode Exit fullscreen mode
  • HTML 
<!-- BEGIN - Show Instagram -->
    <div id="instafeed" class="instagram-gallery-medium"></div>
<!-- END - Show Instagram -->
Enter fullscreen mode Exit fullscreen mode
# 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.

Demo

Metam07rPf

Live demo: https://fc-share.gitlab.io/fc-template-instagram-document/

Documention

Copyright: https://eplus.dev

Top comments (6)

Collapse
 
harrybrook202 profile image
harrybrook202 •

Introducing the Gb Instahub, a revolutionary product designed to enhance your Instagram experience. This compact hub allows you to connect multiple devices to your Instagram account simultaneously, making it easier than ever to manage and share your content. With its sleek design and user-friendly interface, the Gb instahub download apk is perfect for influencers, photographers, and social media enthusiasts alike. Stay connected, organized, and in control with the Gb Instahub.

Collapse
 
nealwilxite_50 profile image
neal-wilxite •

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

Collapse
 
hoangit profile image
David Nguyen • • Edited

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.

Collapse
 
nicotix profile image
Nicolas Tixador •

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

Collapse
 
leefoster profile image
LeeFoster • • Edited

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?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

vishnusatheesh profile image

Essential React js Shorthand Techniques

Vishnu Satheesh -

amritapadhy profile image

Switch Vs. If else

Amrita-padhy -

sh20raj profile image

Building an Offline-Enabled To-Do List Web App 🚀

Sh Raj -

krasun profile image

Let's build a screenshot API

Dmytro Krasun -