Using Instagram API with Monaca App

Benny Wan
Benny Wan
Jul 20, 2018 · 5 min read

Did you know that in Japan, the 「インスタ映え」word — which is roughly the Japanese equivalent of “Instagrammable” — was awarded the winner in the 2017 Buzzwords-of-the-year contest 「2017年の流行語大賞」? Yeah, I can hardly believe it at first too.

Being an annual voting contest held by Japanese publishing company​ Jiyukokuminsha ( 自由国民社; lit. Free National Company ), this Buzzwords-of-the-year contest is a thing since 1991. Some say that this contest is the major contributing factor to the rise of “Instagrammable” becoming a hot topic of discussion in Japan today… Well, any way you cut it, we have our good old photo-sharing Social Media Site, Instagram, to thank.

Today we will be showing you how one can easily utilize the power of Instagram’s API to dynamically insert all sort of photos into your app; without the need to find your own mean of hosting! Maybe with this feature, you’ll be able to attract the Japanese crowd too! Warning: Crowd engagement is not guaranteed. We do not take any responsibility and we are not liable for any damaged caused through the use of this blog.


The Flow of the App

In this article, we’ll be building up a simple Monaca app which retrieves some photos from an authorized user’s account and displays them in a simple list format.

From the user’s point of view, our app works as followed:

  1. First, the user presses the 認証する button to go through OAuth authentication.
認証する is a Japanese word that can be used as Authenticate in this context

2. With the Instagram login screen showing up, the user enters their login details.

This is what the login page looks like when language is set to English.

3. The confirmation page will then shows up. Press the Authorize button, and the page will automatically close.

Don’t worry; we’ll go over what “sandbox mode” is later (in The Closing section).

4. With authentication done, the user will be able to see their Instagram photos listed in the app.

Lovely.

Pre-requirements

  1. The first thing you should do is log in on the Instagram Developer Documentation site, using the Instagram account which contains the photos you wish to display in your app.

2. Then click on the “Register Your Application” button and follow the instructions; filling in the appropriate information for the app.

Step 1 & 2 locations

3. After registering, you should be redirected to the Manage Client screen. Click on the MANAGE button on your new app entry, and then the Security tab.

Leave no checkmark alive!

About the Sample App

Before you can run the sample app code, you must do the following:

  1. Your app was assigned a Client ID during registration (you can find this in the Manage Client screen). Copy this ID and overwrite the text YOUR_INSTAGRAM_CLIENT_ID in js/app.js .
let client_id = 'YOUR_INSTAGRAM_CLIENT_ID';

2. Additionally, overwrite the YOUR_REDIRECT_URL text with one of the Valid redirect URIs you entered (on Instagram) earlier.

let redirect_uri = 'YOUR_REDIRECT_URL';

Obtaining the Access Token

In the Request Parameter of the authorization URL ( authURL variable ) , we have scope=public_content set. With this setting, we can ensure that only photos with their visibility set to public are retrieved.

let authUrl = `https://www.instagram.com/oauth/authorize/?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=token&scope=public_content`;

When the authentication window ( authWindow variable ) is opened, we set a subscription on the loadstart event. This event is fired whenever the URL changes. By checking for a URL that contains the access_token, we can use the sign of a match to determine that this is the moment when the authentication has been completed.

Once we have access to the access_token, we can safely close the authentication window. We will then proceed to pass the value of the access_token to the getPhoto function.


The getPhoto Function

The API endpoint we will using this time is of the User type:

let photoUrl = 'https://api.instagram.com/v1/users/self/media/recent/';

Inserting our extracted Access Token (called authKey in the code below) into the data parameter — under the access_token name, we make an AJAX request to the endpoint.

Wait… where have I seen this before…?

You can find many other API endpoints on this Instagram Developer Documentation page.


The Closing

As you see, the Instagram API allows us to dynamically include Instagram photos in our apps, using only a few lines of code. Take note that by default, your app will be working via Instagram’s Sandbox Mode; meaning that you can only retrieve your own photos, along with other restrictions. If you require more functionalities, you could try submitting your app to Instagram for review. Passing would allow your app to reach Live Mode, granting the ability to retrieve photos from other people’s account, thru the Tags/Locations, etc. endpoints.

Remember, if you ever wanted to incorporate Instagram features into your Monaca app, you can freely use the code available on goofmint/Monaca_Instagram_Demo. Happy developing!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Thanks to Khemry Khourn

Benny Wan

Written by

Benny Wan

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade