Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Embedded Instagram feed - permission reviews and generating access tokens

With the new Instagram API policies all apps will need to go through their review process. Once you've passed this you can generate access tokens for each merchant so that they have individual rate limits of 5000 requests per hour. Here's the process we used.

Register a new client

Go to their developer site and click Register Your Application. You can then add a new client or edit an exisiting one. Once you've initiated that you can fill out the form similar to below, replacing your company name and urls.

Details

Security

  • Disable implicit OAuth - make sure unticked
  • Enforce signed requests - make sure unticked

Sandbox

  • Add your Instagram username that you wish to test and demonstrate with.

Privacy policy and access token generator page

Add the following code to your privacy policy page, make sure the url matches the one you specified above. You'll need to replace the client_id and the redirect_uri querystring variables in the buttons href below. I've marked them with ...'s

<div class="generate-token">
  <p>Your privacy policy here...</p>
  <p><a class="button" href="https://instagram.com/oauth/authorize/?client_id=...&amp;redirect_uri=...&amp;response_type=token">Generate Access Token</a></p>
</div>

<div class="token-received" style="display:none">
  <p>Thanks for completing those steps, here's your <strong>Access Token</strong>:</p>
  <p><input class="token" type="text" value="" /></p>
</div>

<script>
jQuery(function($) {
  token = window.location.hash.split("#access_token=")[1];

  if (token.length) {
    $('.generate-token').hide();
    $('.token-received').show();
  }

  $("input.token").val(token).on("click", function() {
    $(this).select();
  });
});
</script>

Settings_schema.json

{
  "type": "header",
  "content": "Instagram feed"
},
{
  "type": "checkbox",
  "id": "home-widget-instagram",
  "label": "Enabled",
  "default": true
},
{
  "type": "text",
  "id": "home-widget-instagram-username",
  "label": "Username",
  "default": "shopify"
},
{
  "type": "text",
  "id": "home-widget-instagram-access-token",
  "label": "Access token",
  "info": "[Get your access token](http:\/\/troopthemes.com\/pages\/instagram-integration)"
},

Ajax URL

To get an Instagram feed using an access token opposed to the client id use a url like this, replacing the ...'s with the access_token and the total amount of posts you wish to retrieve.

$.ajax({
  dataType: "jsonp",
  url: 'https://api.instagram.com/v1/users/self/media/recent/?access_token=...&count=...'
  success: function(response) {

Permissions review

Test that it all works and publish a working demo. Now go to the client's permissions tab and click Start a submission.

For the API use case I wrote:

Our app fits use case number 3 as we're helping broadcasters to share media using proper attribution. We create themes for Shopify and each store uses a small responsive Instagram user feed.

The title of our Instagram feed links to their Instagram account. Each image also links to the related image on Instagram. This feed is designed to give people a preview of the store owners Instagram account to promote interaction (comment/share/like) with one of their photos and ultimately to follow their Instagram account.

Brands will configure the app, and the general public will view and interact with the app.

Here's a link to the theme: https://themes.shopify.com/themes/blockshop/styles/deli

Please could you send me an email if you think i'm missing something or need more info, thanks!

For the video I just used Quicktimes screen record function and demonstrated how the merchant configures a feed - starting on the settings page, then policy page, back to the settings with the new client id and then finally showing how the feed looks.

You don't need to add additional permissions.

Once you've submitted you should check back in a couple of days and it'll show if it's been approved in the permissions tab. Once approved you can push the client live by clicking the live mode button in the Client Status.

That's it, hope this helps!

bakura10 commented Feb 4, 2016

Awesome @paulmason.

Do you allow us to use the same text as you for the Instagram page?

Also, may I ask why you add a "username" setting into the settings if you use "self" (from what I understand now we are only allowed to pull our own images, so it's not possible to specify someone else user or hashtag?)

bakura10 commented Feb 4, 2016

I can also confirm that my client was accepted by following those instructions ;).

Thanks!

Excellent walkthrough! Thank you.
I can confirm one more client has been reviewed and accepted.

We require a username in our theme settings as well - to output a link to instagram.com/username in the html. It's not used in the api request. It looks like the Blockshop theme does the same thing.

Owner

paulmason commented Feb 10, 2016

Glad I could help @bakura10 and @willbroderick!

@bakura10 sure you're welcome to use the same text. @willbroderick was right, the username is just used for the url link in the title of the feed.

Thanks for the answer!

Just for information, I did a new submission to ask for the public_content permission in order to allow display by hashtag, but it was refused. So I suppose that our use cases for themes really only fit the basic permission.

Thanks so much for this guide. I followed it exactly and my request was denied. Here is the message I received:

Invalid Use Case: The use case described in your submission notes, screencast and website is not a valid use case. If you are a developer and you want to showcase your Instagram content on a website, then you do not need to submit your app for review. By using a client in sandbox mode, you can access the last 20 media of any sandbox user that grants you permission. For more information, see our documentation on Sandbox mode: https://www.instagram.com/developer/sandbox/

It sounds to me like they don't understand the use case. It sounds like they think I just want to show my own Instagram feed on my own site. Any idea what I might do to get this working? Thanks again for your help.

@tjmaxwell we've run into the same issue, made a couple of submission but they have come back each time with the 'Not Valid Use Case'.

We thought they didn't understand the case as well, but we have made it very clear in the last video, so it must be something else. Any ideas would be much appreciated :)

acoard commented Feb 19, 2016

image

Here's what I see when I select option 3 after submitting. It quite explicitly looks like we don't have to submit. Comments?

Oh, and thanks for the guide, it made transitioning a breeze.

Did anybody find a solution to the issue @acoard mentioned? :/ The Sandox requires a developer's invite and is limited to 10 users.

Edit: Well my app got approved somehow. Kind of strange since I followed the same process as everyone else here. I did include the user's caption so perhaps that tipped the scales?

sodbileg commented Mar 3, 2017

@Tardis1234 Can you please share your screencast with us?

Hello @paulmason.
I want to get followers_list permission for my iOs Social Monitoring app where user can login and see his/her all followers and followed by user into the app so I submitted the app for review but Instagram declined it.
here his message "General issues:
Invalid Use Case: The use case described in your submission notes, screencast and website is not a valid use case. If you are trying to display hashtag content for a one-off project (e.g. a website for a brand, event or hashtag contest), note that we do not support one-off and single use projects. We recommend that you use a third-party platform that powers this use case. If you are building a platform for this use case, we will only approve one client ID for all your integrations. For more information, please see: https://www.instagram.com/developer/review/
Invalid Use Case: The use case described in your submission notes, screencast and website is not a valid use case. If you are trying to build analytics for personal use or one-off projects, note that we do not support one-off and single use projects. We recommend that you use a third-party platform that powers this use case. If you are building a platform for this use case, we will only approve one client ID for all your integrations. For more information, please see: https://www.instagram.com/developer/review/"
Please suggest me how can I get approve it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment