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.
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.
- 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
- Disable implicit OAuth - make sure unticked
- Enforce signed requests - make sure unticked
- Add your Instagram username that you wish to test and demonstrate with.
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=...&redirect_uri=...&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>
{
"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)"
},
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) {
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!
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.