jquery.InstagramFeed not showing properly

Question

I'm trying to use a library called 'jquery.instagramFeed' that allows me to display images from a user's feed without using an access token. So, I've been trying to use it, but, for some reason, it's not showing me anything.

I've been researching for some weeks now, and I've tried A LOT of solutions proposed in many posts here (and in other forums as well), like these ones:

TypeError: $ is not a function when calling jQuery function
"Uncaught TypeError: $ is not a function" with instafeed
Is there still a way to fetch instagram feed without using access token now (06/2016)?

Some of them did work for me, but as soon as I refreshed the page, it disappeared again. And now, I can't make it show again, regardless of what I do.

I've been checking the developer console to see if there was something wrong, and I noticed that there it always showed me this message:

Uncaught TypeError: $.instagramFeed is not a function
at <anonymous>:3:16
at m (jquery.js:2)
at Re (jquery.js:2)
at w.fn.init.append (jquery.js:2)
at Object.<anonymous> (onepage:633)
at Function.each (jquery.js:2)
at percorrerOnepage (onepage:591)
at Object.success (onepage:663)
at u (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)

At this point, my code was like this:

JQuery and jquery.instagramFeed imports

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>

The JQuery Function that shows Instagram Feed

<script type="text/javascript">
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': ".instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1 
        }); 
</script>

And this is the container the functions searches for

<div class="instafeed"></div>

So, after looking at some posts on how to fix this error, I made some changes in my jquery.instagramFeed function, and it's currently like this:

<script type="text/javascript">

(function($){
    $(window).on('load', function(){
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': ".instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1 
        });
    });
})(jQuery);
         
</script>

With that, I was finally able to make the error disappear, but it's still not showing like it's supposed to. I thought that maybe, it still wasn't being recognized as a function, so to make sure everything was working, I checked the jquery.js and the jquery.instagramFeed on the console... And to my surprise, it is.

Me checking if something is being returned

This is how it's supposed to be like

Instagram Feed working

But this is what it's showing right now

Instagram Feed not working

I've been stuck for a month now because of this problem, and I'm honestly out of ideas at this point. I'm still very new to programming, so I might be doing something wrong.. Can someone please tell me what the problem is?

Update (27/04)

Hello again, everyone. I'm still trying to fix this stupid problem.. I was caught up in other projects, so I wasn't able to properly focus on this. But now that I'm back to it, I noticed something kinda weird..

You see, everytime that I access the website for the first time in a day, it loads the feed, but, as soon as I refresh the page, it disappears and never loads the feed again. Is it something that has to do with cache or something like that?

As you can see, it's working

But as soon as I refresh the page it stops working...

Answer 1

I've attempted to re-create the feed with the code examples you've given, and it appears to work as expected

Check out the fiddle here

<div class="instafeed"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
<script>
(function($){
    $(window).on('load', function(){
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': ".instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1 
        });
    });
})(jQuery);
</script>

---

In this screenshot It looks like you have a different version of jQuery loading (3.3.1), but in your examples here you're including 3.5.1, which suggests you're including it multiple times. Check your project for any other instances of jQuery being inserted, and remove the appropriate one.

Also order of these import statements is important, so make sure jQuery loads first, then the instagram widget, followed by your custom script.

Answer 2

UPDATE

It seems that the API itself is having some issues. I've been stuck for too long with this problem, so unfortunately, I'll have to choose another API that works. This one is too unstable, and it has a lot of problems..

I want to thank all the helpful answers and for all the help provided in this post.