UPDATE (@stevenschobert): This thread has turned into a conversation about how Instafeed.js is going to work with Instagram's new API restrictions.

Currently, new Instagram API clients are not able to fetch much of the data that Instafeed.js relied on to work, and we are evaluating options for how to handle authentication going forward. Credentials created before the API restrictions went live are not affected for now.

Original Post: I'm working on a client project (built on Shopify platform) and am looking to pull in their Instagram posts by user. I have it all setup - but it will not pull in my client's account. When I plug in my personal Instagram account userId & clientId, everything works perfect so I know it's not an issue with how I have it set up. Are there any known security settings that will prevent instafeed from working on a specific account? To note, the account I'm looking to pull in has a very large following.. not sure if that has anything to do with it?

Here's the set-up I have for reference (includes liquid language as used on Shopify, so just ignore that):

{% assign instafeed_img = '{{image}}' %}
{% assign instafeed_link = '{{link}}' %}
{% assign instafeed_likes = '{{likes}}' %}
{{ 'instafeed.min.js' | asset_url | script_tag }}
<script type="text/javascript">

var userFeed = new Instafeed({
    target: 'instafeed',
    get: 'user',
    userId: '260149935',
    clientId: 'xxx',
    limit: '10',
    sortBy: 'most-recent',
    resolution: 'standard_resolution',
  template: '<div class="grid__item large--one-fifth"><a href="{{ instafeed_link }}" target="_blank"><img src="{{ instafeed_img }}"><span class="likes"><span class="icon icon-heart" aria-hidden="true"></span>{{ instafeed_likes }}</span></a></div>'
});
userFeed.run();
</script>

Instafeed is now returning the following error:

Uncaught Error: Error from Instagram: The access_token provided does not match an approved application.

Instagram have changed their API policy, effective as of the 1st of June: https://www.instagram.com/developer/endpoints/users/

Instagram Platform and documentation update. Apps created on or after Nov 17, 2015 will start in Sandbox Mode and function on newly updated API rate-limits and behaviors. Prior to going Live, and being able to be used by people other than the developers of the app, these apps will have to go through a new review process. Please read the API documentation or the Change Log for more details.

Any app created before Nov 17, 2015 will continue to function until June 1, 2016. On that date, the app will automatically be moved to Sandbox Mode if it wasn't approved through the review process. The previous version of our documentation is still available here.

Is development for Instafeed going to continue to address these changes?

I was using resolution: 'standard_resolution' and also disabled the Non Square Media option from the instagram client to get all the pictures squares on 612x612, however, this has stopped working out of the sudden yesterday, the images are now shown in their original resolution and not squares only. For "low_resolution" or "thumbnail" they images are all shown in squares but low resolution then. I tested this with different Instagram accounts and same thing happened. Also, I checked some other sites using instafeed.js and noticed their images are also now shown in different sizes and not squares.

I am accessing Instagram and it was working fine till yesterday. But now I am only getting some images and not all. I am attaching a screenshot of my screen and success and failure network headers. Trying to solve this for half day but I am unable to understand the issue as it is saying Invalid URL signature.

Please help.

Hey!

So regardless of what number I put over 33, it always returns only 33 images. The user account has 143 images currently. I've added the JS part of it hiding the ID and token.

var userFeed = new Instafeed({
    get: 'user',
    userId: ID,
    accessToken: 'token',
    resolution: 'low_resolution',
    limit: 60,
    sortBy: 'most-recent',
    template: '<div><img src="{{image}}" /><span class="caption">{{caption}}</span><span class="likes">{{likes}}<i class="icon-heart"></i></span></div>'
});
userFeed.run();

Thanks for the help!

Is it possible to limit the number of images while applying a filter, such that it will look through all the images in the user's feed to satisfy the limit?

    var feed = new Instafeed({
        get: 'user',
        userId: USER_ID,
        clientId: 'CLIENT_ID',
        accessToken: 'ACCESS_TOKEN',
        template: '<a href="{{link}}"><img src="{{image}}" /></a>',
        limit: 12,
        filter: function(image) {
            return image.tags.indexOf('mytag') >= 0;
        }
    });
    feed.run();

Instagram user's recent feed can be fetched without accessToken if clientId is provided, but your script throws an error if accessToken is not provided. I commented rows 225-227 and it works perfectly ( https://github.com/stevenschobert/instafeed.js/blob/master/instafeed.js ).

https://api.instagram.com/v1/users/{user-id}/media/recent/?client_id=YOUR-CLIENT_ID

This issue is to notify everyone that v2 is on its way. We're putting migration and usage instructions together now, and will have an initial version available very soon.

Stay tuned!

I have reveived this email

Hi Instagram Sandbox Developer,

We have recently announced new features to the Instagram API and are upgrading it to Facebook's Graph API. We encourage you to check out the exciting announcement shown here: https://business.instagram.com/blog/new-instagram-api-features/. With these new implementations, we will only be allowing and reviewing new applications for the basic permission level of the existing Instagram API (instagram.com/developer). Starting October 1st, developers will no longer be able to apply to access any permissions other than the basic permission via the existing API. Since you are in sandbox mode, this means that you are in development so we highly encourage you to submit your API application before the end of September if you are interested in accessing more than the basic permissions.

For more information on the new Instagram Graph API, including the new permissions and what they can offer your product, please navigate to the facebook.com/developer site.

Thanks, The Instagram Platform Team

Updated: March 31, 2020. The legacy API shutdown will now happen on June 29, 2020. Please update instafeed.js to version 2 before then. New integrations with the legacy API are still not possible - for new integrations please start with instafeed.js v2.

If you have problems getting instafeed.js to work, or it has stopped working on your site, please do not open an issue.

The legacy API is in the process of being retired, which will cause instafeed.js to stop working on ~~March 31st, 2020~~ June 29, 2020. Instagram is no longer issuing access tokens for the legacy API, so you will not be able to start using instafeed.js even before this date.

For more information, please see the project README and issue #345

We are currently looking into ways to make instafeed.js work with Instagram's new API, but we don't know if or when that might be available. To keep up to date with that discussion, please see issue #635.

Hi there,

I'm new to this, so I might be doing something wrong.

I followed the instructions at: http://instafeedjs.com, but cannot get anything to show up when I load my test html page in a browser.

I think I successfully created a client on the Instagram site and entered the clientId in the html file, but I keep getting this error:

Uncaught Error: Error from Instagram: The access_token provided is invalid.

Appreciate any suggestions.

Thanks,

dr-f

I have been using Instafeed for nearly a year and from time to time I would have to generate a new token. Although after trying that yesterday Instafeed seems not to be working and doesn't pull any images. From the console I get the following errors: Failed to load resource: the server responded with a status of 400 () Error: api request error: 190 Error validating access token: The session has been invalidated because the user changed their password or Facebook has changed the session for security reasons.

I am trying to change the template depending if its a image or video but it doesnt seem to work, it just uses the template provided when calling the function

<script src="https://cdn.jsdelivr.net/gh/stevenschobert/[email protected]/src/instafeed.min.js"></script>
<div class="instagram-module" id="instafeed"></div>

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        target: 'instafeed',
        limit: 10,
        template: '<a class="instagram-link" href="{{link}}" target="_blank" rel="noopener"><figure class="instagram-figure"><video controls loop><source src="' + image.model.media_url + '" type="video/mp4"/></video><figcaption class="instagram-caption" >{{caption}}</figcaption></figure></a>',
        resolution: 'low_resolution',
        accessToken: 'token',
        filter: function(image) {

            if (image.type == 'image' ) {
                image.template = '<img src="' + image.image + '" />';
            } else {
      
                image.template = '<video controls loop><source src="' + image.model.media_url + '" type="video/mp4"/></video>';
            }
            return true;
        }
    });
    feed.run();
</script>

Bumps shell-quote from 1.7.2 to 1.7.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

var userFeed = new Instafeed({ get: 'tagged', tagName: 'tagname', target: "instafeed-container", resolution: 'low_resolution', limit:12, userId:'3333....', template:'code here', accessToken: 'number here', transform: function(item) { item.timestamp = new Date(item.timestamp).toLocaleString('en-AU', { month: 'long', day: 'numeric' }); return item; }, filter: function(image) { return image.tags.indexOf('[tagnam]') >= 0; } }); userFeed.run();

Bumps minimist from 1.2.5 to 1.2.6.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.