Using Instagram API with Monaca App

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

NOTE: “Valid redirect URIs” is the URL you want the user to go to after authentication — this location must accept GET Requests and NOT have redirect processing.

In the case of a website, this would typically be a page in the same domain. Though in our case, we won’t actually be making use of the redirect, as we’ll be loading the photos on the same page using Ajax.

For more information about valid Redirect URIs, check out Step Two: Receive the redirect from Instagram section on this page.

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.

Make sure to uncheck the “ Disable implicit OAuth ” checkbox and click the Update Client button.

Leave no checkmark alive!

About the Sample App

You can find the code of the sample app in goofmint/Monaca_Instagram_Demo.

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';

WARNING: If the Redirect URL is a bad link, there is a possibility that the access_token from Instagram will be lost during the redirect process.

Please refer back to Pre-requirements - step 2 for more details

Obtaining the Access Token

Since the authentication is done using InAppBrowser, we must make sure that InAppBrowser is enabled in the Cordova Plugin Setting page.

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!