Instafeed.js: ⚠️ Updated! Instafeed v1 will stop working June 29, 2020 ⚠️

[benjamin-hull]

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.

[paulverbeke]

FYI there's a new update

"February 20, 2020 Update: To provide you with more time to make changes, we will now be shutting down the Instagram Legacy API Platform on March 31, 2020 instead of March 2, 2020 as originally communicated."

You can change the dates on your issues and Readme

[jhvanderschee]

I have created/found a dead simple way to show your latest instagram pics on your website. Please read about it here: https://jekyllcodex.org/blog/instafeed-js-alternative-for-instagram/. Note that using Jekyll is not a requirement.

Basically the code is:

<p id="instafeed"></p>

<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$.get('https://zapier.com/engine/rss/2502510/jhvanderschee', function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        var title = el.find("title").text();
        var link = el.find("link").text();
        var image = el.find("enclosure").attr('url');
        var description = el.find("description").text();
        $('#instafeed').append('<a href="'+encodeURI(link)+'" target="_blank" title="'+title.replace('Caption: ','')+'"><img src="'+encodeURI(image)+'" alt="'+title.replace('Caption: ','')+'" /></a>');
    });
});
</script>

<style>
    #instafeed {overflow: auto; margin-left: -1%;}
    #instafeed a {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
    #instafeed a img {width: 100%;}
</style>

[ryangjchandler]

Having to use Zapier seems a bit overkill. I'm currently working on a JavaScript library that will provide a JavaScript feed without the legacy API, or any API token for that fact. It will be dependency free and super lightweight.

[jhvanderschee]

Although I agree with you about the overkill, I want to stress that:

1. My solution works
2. My solution uses just 11 lines of JS code and 3 lines of CSS
3. My solution will not be blocked by Instagram, due to unintended use

I am very curious what you have in store for us.

[ryangjchandler]

Although I agree with you about the overkill, I want to stress that:

1. My solution works
2. My solution uses just 11 lines of code and 3 lines of CSS
3. My solution will not be blocked by Instagram, due to unintended use

I am very curious what you have in store for us.

Gave up on my library, found this one instead: https://github.com/jsanahuja/InstagramFeed

Already using on a client site, works quite well & maintenance seems pretty active.

[jhvanderschee]

I like it. However, I still have some concerns:

• Do you think that scraping the Instagram page is reliable? One altered CORS header and the solution is 'no more'.
• What about the rate limit on these pages? See: https://github.com/jsanahuja/jquery.instagramFeed/issues/54#issuecomment-594175869

[benjamin-hull]

Head-up folks: A new version of instafeed.js powered by the new Basic Display API is incoming. Please see https://github.com/stevenschobert/instafeed.js/issues/643 for details as they're available - and thank you very much for your patience!

[benjamin-hull]

A further note: I'm going to clean up some of the comments here that relate to implementation questions on other libraries. Hope that doesn't cause any inconvenience - thank you.

[Luke-SF]

I see that this is no longer on the front page. Is that because this was postponed another 90 days? https://www.instagram.com/developer/

[benjamin-hull]

@Luke-SF It's not because of that, no - only because I didn't realize this had happened until you posted the link. We did ask them to consider a further extension though - so that's great news!

The reason I unpinned this issue is because instafeed v2 is available (though in its very early stages), and that uses the Basic Display API. If you're ready, you can start looking at the migration guide in the project wiki to upgrade to the new version.

[darcemac]

I have created/found a dead simple way to show your latest instagram pics on your website. Please read about it here: https://jekyllcodex.org/blog/instafeed-js-alternative-for-instagram/. Note that using Jekyll is not a requirement.

Basically the code is:

<p id="instafeed"></p>

<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$.get('https://zapier.com/engine/rss/2502510/jhvanderschee', function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        var title = el.find("title").text();
        var link = el.find("link").text();
        var image = el.find("enclosure").attr('url');
        var description = el.find("description").text();
        $('#instafeed').append('<a href="'+encodeURI(link)+'" target="_blank" title="'+title.replace('Caption: ','')+'"><img src="'+encodeURI(image)+'" alt="'+title.replace('Caption: ','')+'" /></a>');
    });
});
</script>

<style>
    #instafeed {overflow: auto; margin-left: -1%;}
    #instafeed a {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
    #instafeed a img {width: 100%;}
</style>

[darcemac]

Great alternative solution. Is it possible to limit how many items get displayed?

[benjamin-hull]

Hi @darcemac - you're probably better off asking questions about @jhvanderschee's solution on their blog, rather than here. I'll probably clean up these comments in a couple of days just to keep things tiday.

Thanks!

[jhvanderschee]

@darcemac Yes that is possible. You will find the code on JekyllCodex.org.

[jhvanderschee]

Sadly Instagram seems to have killed my alternative solution by constantly changing the URL through a URL signature that expires. Zapier no more...

However... I have come up with another alternative. A single line solution for my Jekyll friends: https://jekyllcodex.org/without-plugin/instagram/. Not a Jekyll fanboy? Just use these URL's:

https://www.instafeed.io/jhvanderschee/0.jpg
https://www.instafeed.io/jhvanderschee/1.jpg
https://www.instafeed.io/jhvanderschee/2.jpg
etc

... and replace 'jhvanderschee' by your own instagram username.