Hello good people, InstagramFeed stoped working on my site.

This is the error in console:

InstagramFeed: Unable to fetch the given user/tag. Instagram responded with the status code: No Reason Phrase 5

I am using curren version from master branch (minified).

This is my script:

<script>
    (function () {
        new InstagramFeed({
            'username': 'yogenabrno',
            'container': document.getElementById("insta1"),
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 4,
            'items_per_row': 4,
            'margin': 1,
            'image_size': 640
        });
    })();
</script>

Hi there, this looks like an amazing project.

I'm trying to install this into my project via yarn but it doesn't look like you've published it to a npmjs site and created a tagged release. Would it be possible to do this?

Also, would it be possible to give us the ability to import the project instead of having have a hardcoded .js in the header?

This would enable a developer to do something like this:

<script>
import InstagramFeed from 'jsanahuja/InstagramFeed';

export default{
	mount(){
		InstagramFeed({
			'username': 'instagram',
			'container': document.getElementById("instagram-feed1"),
			'display_profile': true,
			'display_biography': true,
			'display_gallery': true,
			'callback': null,
			'styling': true,
			'items': 8,
			'items_per_row': 4,
			'margin': 1 
		});
	}
}
</script>

Greets Team InstagramFeed,

I've added a cache layer to help deal with this error message:

InstagramFeed: It looks like YOUR network has been temporary banned because of too many requests. See https://github.com/jsanahuja/jquery.instagramFeed/issues/25

This adds 3 new config options:

   // option.name: default_value
   cache_use: false,
   cache_for: "30:min",
   cache_prefix: "igf_",

Docs & version number updated as per CONTRIBUTING.md.

An aside: I ran into a small snafu with the version number. There's a mismatch between src/ InstagramFeed.js (@1.4.0) and package.json (@1.5.4). I ended up going with 1.6.0 since this is a backwards compatible API change.

Let me know if you'd like anything changed and thank you SO much for an Instagram option that isn’t painful!

-Dan

For anyone encountering CORS policy errors, try using this as a host:

'host': "https://images" + ~~(Math.random() * 3333) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/"

Solution provided by @colinchadwick here https://github.com/jsanahuja/jquery.instagramFeed/issues/103#issuecomment-788260968

I have tested, and other usernames and the demo website work, however when I use this with the username, 'blacklinesdrinks' (https://www.instagram.com/blacklinesdrinks/), I get the error TypeError: undefined is not an object (evaluating 'a[1].split') in the console.

I'm not sure what the issue could be, as this username was working at one point, and it doesn't appear to be a network ban as the demo website and other usernames still appear to be working.

Any help in getting this resolved would be greatly appreciated

Added an option to display instagram post captions as overlay on the posts on hovering. display_caption is true by default. A screenshot of the caption visible on hovering is attached:

This is awesome by the way!!! Many thanks for the hard work ;)

Can this also get Instagram carousel images?

For example on img click send another request to see all the images on that gallery/carousel ?

I had this working and on the new API everything stopped working. :(

Right now InstagramFeed fetches all feed including movies from profiles, the problem is that movies are imported as black images with hrefs, which looks... weird.

Example:

Any way to exclude videos?

Hello, first of all I would like to appreciate the work that has been done by the author. Thank you for all your time and work.

I have spotted a tiny issue with the instagram URL for the profile and IGTV feed. While providing username, upon GET request, 301 HTTP status is returned from Instagram, where the location header presents the requested URL with slash / appended.

So: https://instagram.com/instagram results in 301 with location header: https://instagram.com/instagram/. Looking at the source code, I can see that this both affects profile feed and IGTV, while the tags URL is being built correctly.

The easy workaround is to add a trailing slash / to the username option.

I know this is not a big deal since 301 is strongly cached by the browser, but still.

Thank you and best regards.

ReferenceError: InstagramFeed is not defined https://vamsithota.me/photography2/:93 https://vamsithota.me/photography2/:105

Here's the code I have inserted in tag. `

Here's the code I have used in tag. <div id="instagram-feed1"></div>

The Feed is not loading and throwing this error

How do I fix this issue?

....it's 6AM and I need sleep. The script works perfectly in Firefox, Opera, and Chrome. But IE11? Nope! I don't blame you or your coding. I blame those knucks down in Redmond who refuse to work together with the rest of us. Productivity never trumps profit. goodnight :)

The solution posted here works sometimes but is not consistent. I still get blocked by CORS errors sometimes, then I have to wait a while. Any advice to get this to work consistently? Or is it a request limit issue? I'm storing the retrieved posts in cookie so that I'm not making the request on every page load. But if new site visitors are going to get the CORS issue then this won't work out. Here's my options object:

 {
        'username': '<username>',
        'container': feedEntry,
        'display_profile': false,
        'display_biography': false,
        'display_gallery': true,
        'styling': false,
        'max_tries': 1,
        'callback': cacheFeed,
        'styling': true,
        'items': 5,
        'items_per_row': 5,
        'margin': 1,
        'lazy_load': true,
        'on_error': console.error,
        'host': "https://images" + ~~(Math.random() * 3333) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/",
        'cache_time': 660
    }

The CORS fix creates a new problem for me: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.instagram.com/p/CL7rMUKDOaR/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Images don't display and have a URL like this instead: "https://lookaside.instagram.com/seo/google_widget/crawler/?media_id=2520798378721076881"

I just used the basic configuration with username: "google".

I added a callback to see the data received:

All urls start with "https://lookaside.instagram.com/seo/google_widget/crawler/".

I tried to enter the URL of the host in the browser: "https://images391-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/google" and "https://images391-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/google/p/CL7Iiq7ly55", I get an error: "your computer or network may be sending automated queries. To protect our users, we can't process your request right now."

I tried to reload the page on my phone in 4g (in case it's an ip ban), but I have the same error.