Updating Instagram Integration

Note: we recommend updating pipeline to the most recent version. Only use this guide if you have already made code changes that you do not want to loose by updating.

Instagram released a major changes to their permission system on June 1 2016.

Instagram now requires an access token to show the photos from your Instagram account on your website. This helps Instagram keep their platform secure and prevent unauthorized use.

Pipeline switched to the new Instagram token system version on February 19 2016. If you downloaded Pipeline before February 19 your Instagram section will stop working in June when Instagram disabled access to their old API.

Follow this guide to update your Instagram integration.

1

Update Assets/Instafeed.js

From the Shopify admin dashboard you will want to edit the code of your theme.

Online Store -> Themes -> ... -> Edit HTML/CSS

The file you need to replace is in the assets folder:
assets/instafeed.js

Replace that entire file with this code:  New Code

2

Update Layout/Theme.liquid

From the code editor open layout/theme.liquid and scroll all the way to the bottom. You should see a section of code that looks like this around line 50:

Old code:

$(document).ready(function(){
  var userFeed = new Instafeed({
    get: 'user',
    userId: {{ settings.instagram_id }},
    clientId: 'c4d02e0d5f3d47168a966b69d93317de',
    sortBy: 'most-recent',
    resolution: 'standard_resolution',
    limit: 6,
    template: {%raw%}'<a href="{{link}}" class="grid__item large--one-sixth small--one-third medium--one-third"><span class="icon icon-instagram"></span><img src="{{image}}" /></a>'{%endraw%}
  });
  userFeed.run();
});<br>
	

New code:

$(document).ready(function(){
  var userFeed = new Instafeed({
    get: 'user',
    userId: 'self',
    accessToken: "{{ settings.instagram_id }}",
    sortBy: 'most-recent',
    resolution: 'standard_resolution',
    limit: 6,
    template: {%raw%}'<a href="{{link}}" class="grid__item large--one-sixth small--one-third medium--one-third"><span class="icon icon-instagram"></span><img src="{{image}}" /></a>'{%endraw%}
  });
  userFeed.run();
});<br>
	

These are the two lines that need to be changed:

From:
userId: {{ settings.instagram_id }},
clientId: 'c4d02e0d5f3d47168a966b69d93317de',
	
To:
userId: 'self',
accessToken: "{{ settings.instagram_id }}",
	
3

Get an Instagram Token and paste it in your theme settings

In the code change above, we swapped  userID for accessToken. Now we will generate an access token and paste it into the theme setting that already exists for Instagram user ID.

Generate Instagram Access Token

When you click on the above link, choose "Authorize on Instagram" to generate your Instagram Access Token
View Image

Once you have generated your access token, navigate to the Instagram section of your Pipeline theme settings and paste the access token in the field labeled "Instagram user number".

Reload the page and you should see your Instagram feed.

Still need help? Contact Us Contact Us