paulmason/Instagram walkthrough.md Secret

## Instagram walkthrough.md

      
    Raw
  

              Instagram walkthrough.md
            
          
    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


Application Name - Troop Themes
Description - Used to generate a small responsive Instagram user feed for each store owner using one of our Shopify themes.
Company Name - Troop Themes
Website URL - http://troopthemes.com
Privacy Policy URL - http://troopthemes.com/pages/instagram-integration

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!