Hi - this is brilliant, is it possible to have an option to display captions?

Hey Thanks for that! It works perfectly. Had trouble with the api and looked for a solution to get some pics on a homepage.
To reduce requests on the instagram website a simple caching solution would be helpful (optional). I.e. saving the result in a file and have a time interval for refreshing that file.

Best regards, Roland

Hey Javier,
is there a way to sort out hashtags? Like, I would like to see "#green" but I would like to exclude those pics, that have also been tagged with "#ecological"?

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
    }

Not an actual issue, more of a question, would it be possible to get comments in the response? Also, what are the limits of this? How many requests before getting blocked?

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>

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.

I'm looking for an attribute, ex: no_tag, to exclude those tags from the feed. Is there such a functionality?

Hi, is it possible to change the items and items per row if its mobile?

Hi there!

As an teacher, I want to give my students the opportunity to have a simple online portfolio combined with Instagram. I found your github, thanks for this!!

I changed a bit to make it easier for my first year students to understand the code.
Now I've got a problem, I only can place max 12 images. The standard was 8 images, I changed this to 100, but I've only got 12 max.

I didn't change anything in the JS.

Here is the HTML with the edits in it

https://www.imgdumper.nl/uploads9/5ea7ea67e846e/5ea7ea67e020f-Screenshot_2020-04-28_at_10.33.16.png

What am I missing?

Hello Everyone, I notice some issues through in this week. Images don't load on any .js files (jquery or without jquery). The cause, probably, come from instagram and your repeatedly updates.

Can u guys check?

Thx!

FYI, you have some jQuery in the JS version docs for example 7:

<script type="text/javascript" src="dist/InstagramFeed.min.js"></script>
<script type="text/javascript">
    (function(){
        new InstagramFeed({
            'username': 'instagram',
            'callback': function(data){
                $('#jsonHere').html(JSON.stringify(data, null, 2));
            }
        });
    })();
</script>

However, in your source you're using it correctly:

            new InstagramFeed({
                'username': 'instagram',
                'callback': function(data) {
                    document.getElementById("jsonHere").innerHTML = JSON.stringify(data, null, 2);
                }
            });

Just thought I'd let you know in case you wanted to update accordingly.

Would love the option to be able to pull specific posts instead of just the most recent. for example, only displaying the 3rd post.

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?

Would it be possible to assign custom (individual) URLs to posts?

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

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

Here's the code I have inserted in tag.
`<script src="https://cdn.jsdelivr.net/gh/jsanahuja/InstagramFeed/dist/InstagramFeed.min.js"></script>

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?

Hello, your library is pretty useful!
I have a question, is there any way to use multiple hashtags instead of just one?
Thank you

I tried the following but, I get the 404 error:

npm install @jsanahuja/[email protected]

https://github.com/jsanahuja/InstagramFeed/packages/120475

❯ npm install @jsanahuja/[email protected]
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@jsanahuja%2finstagramfeed - Not found
npm ERR! 404 
npm ERR! 404  '@jsanahuja/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/username/.npm/_logs/2020-09-03T17_09_50_891Z-debug.log

Is there an updated install method now that npm is part of Github, perhaps?

Hi, thanks for cool plugin.

I integrated it, but I get this error, any idea what went wrong?

....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 :)

Cant get feed anymore. Looks like its being blocked. Any idea whats going on?

The documentation on https://www.sowecms.com/demos/InstagramFeed/ uses jQuery selectors:

'container': "#instagram-feed1",

should be

'container': document.getElementById("instagram-feed1"),

Hello, I was using it and it only works now while fetching the tag. Username is not working anymore.

Dear all,
I have some issues on this really useful library.
first of all I got the CORS Policy error:

Access to XMLHttpRequest at 'https://www.instagram.com/batman/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

when I retried i got this other error:
InstagramFeed: It looks like YOUR network has been temporary banned because of too many requests. See jsanahuja/jquery.instagramFeed#25

Following the link jsanahuja/jquery.instagramFeed#25 i found the solution to other issues.

I have simply tested the application putting the following in my html:

is some error of my code? can I do something to solve this?
any suggestions?

Thank you very much
Cheers
R

How to center all images in bootstrap card?

On Safari Iphone/iPad the images in the grid are very tall, and are stretched.

I've fixed locally by changing the display: inline-flex; to display: inline-block; on the <a> elements

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>

Looks like images are not showing in any feed , seems like same CORS issue

Many thanks
A

Images not showing via username.
even your demos not showing images from username and only tag images showing.

Instagram Feed: It looks like YOUR network has been temporary banned because of too many requests. See jsanahuja/jquery.instagramFeed#25

ERROR in your demos
Instagram Feed: It looks like YOUR network has been temporary banned because of too many requests. See jsanahuja/jquery.instagramFeed#25 InstagramFeed.min.js:1:1902

The purpose of this issue is implementing the same done here: jsanahuja/jquery.instagramFeed#97

Feel free to send your PR.

Thanks!

Hey, i'm trying to find a way to get the img caption, however it doesn't look like its being pulled.
I'm have no clue how to add this myself, so im asking if its possible to do

checked, console.log( img[ i ] ); but cannot find a field which would represent the caption in any way.

node:
__typename: "GraphImage"
id: "2198312878692136426"
edge_media_to_caption: {edges: Array(1)}
shortcode: "B6B-ep_nHXq"
edge_media_to_comment: {count: 1}
comments_disabled: false
taken_at_timestamp: 1576279338
dimensions: {height: 1077, width: 1080}
display_url: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/75403225_204983533864953_2689988167004388606_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=109&_nc_ohc=oNBmJmAPIwgAX-suKkn&oh=5212027434a0b365434dd26945746737&oe=5E796872"
edge_liked_by: {count: 45}
edge_media_preview_like: {count: 45}
location: null
gating_info: null
fact_check_overall_rating: null
fact_check_information: null
media_preview: "ACop5qirDCNkXbkSchh1z6MPT0I9s1EE9SBQK5OLGYx+aF+TGc9sVVq55jiMxb/kJyV7Zqttz0IP6UCTGUVOgRVbzM7sYQepPcn0A7dyRUNAyUEviNByxxx1J7UtxbSWzbJV2kjPY8fUZFWJrCe2mWL7zn5l2/5GMYqG6klkf9+TvXj5uCPbFIS0LS6cGi8zd1Qv935f90t2PB68ZwOpFUoIHuH8uMbmPOOB09zxSea4Ty9x2Hnbk4/LpTrbzPMHk58w8Db1/wA+vamMHLxExuOVOCD2qP5feuhitVt3CuVlu5c4DcqmRklvU/5HqazaBcZPKfmR/wCy0hLyJmWW1IvBMsxwAQepB7Dn/CromtNTTEoCOB3OGH+63cex/Kueu/8AWN9aq0ErVXFkADEIdygnB6ZHrVi0u3tSzR/eYY6dPf6/5NVTRTLsOMjM24kk9c98+uaDK5OSzEn3NMrsYP8AVr/uj+QpPQmT5eh//9k="
owner: {id: "1278618971", username: "watchitallabout"}
thumbnail_src: "https://scontent-lht6-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/c1.0.1280.1280a/s640x640/75403225_204983533864953_2689988167004388606_n.jpg?_nc_ht=scontent-lht6-1.cdninstagram.com&_nc_cat=109&_nc_ohc=oNBmJmAPIwgAX-suKkn&oh=0135f466cbc674c7bf05143b2637a0a2&oe=5E755E1C"
thumbnail_resources: (5) [{…}, {…}, {…}, {…}, {…}]
is_video: false
accessibility_caption: "Image may contain: night"

Get specific tag from username not working,

'username': 'instagram',
'tag': 'fathersday',

still showing all feed.

fyi: im still new at this

Trying to import through npm using latest version and instructions in Wiki.... doesn't work.

I'm running into the error (Firefox only) "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at..."

I'm using a Plesk Server with nginx as reverse proxy and everything i tried isn't working...

Any Ideas?
Using jsonp instead of xhr?

It seems like this is working but with videos, it doesn't play on the website.

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.

Hello! First I just wanted to say this library is genious. However I'm not currently able to execute it.
I have this code

const insta = document.createElement('div')
    insta.className = "instagram_feed box"
    insta.id = "instagram-feed-demo"
    insta.textContent = "Instagram pics go here"
    boxes.appendChild(insta)

    new InstagramFeed({
        username: 'myusername',
        container: "#instagram-feed-demo",
        display_profile: true,
        items: 10,
    });`

The div is displayed with the intended text but nothing else. What am I missing? Also no error on the console.

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 jsanahuja/jquery.instagramFeed#103 (comment)

I've just been working on a new site with this great script and have had the above/title error message in the console. The script also seems to have broken on other sites as well - and was working fine up until literally a few minutes ago... could Instagram have changed something?

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. :(

I was browsing this website https://www.sowecms.com/demos/InstagramFeed/ and click on example 4 for to test hashtag feeds but unfortunately it fail to display on any mobile browser.
I don't know whether its happen to only my network and devices but seems to be very awkward
I will try to discover the real error from p.c when I get time.

Hi, I just wanted to shout out, this is really cool project that saved me a lot of time!
Thank you so much!

Do we need node.js for to fetch gallery?

Hi,
Thanks a lot for this great Instagram Feed solution. I have a problem with displaying Instagram images. I had to trust following url to display images:
https://scontent-cdt1-1.cdninstagram.com/v/
https://scontent-cdg2-1.cdninstagram.com/v/
How to know all urls I should accept as trusted sources? How to know which url will be used for next images to display?

Also is it possible to filter the Instagram images with hashtag?

Thanks

Hey everyone, im hoping you can help me i have put my feed in a col-md-12 with the styling to true and my images are going down not across items is set to 8 and per row is set to 4. and anybody help the url for the page is

https://www.us4u.org/covid_equipment/company-4/

Hi! Great library - i love how simple api is!
I was wondering if it will be CORS compatible to load more items this way
Sorry if this is stupid idea, im not very familiar with fancy web programming 😔

Hi, great library!
just one small issue is missing .. to call the "load more" function, to get more than 12 results :)
.. but yes, I know, this JSON is not part of the pre-rendered HTML.
Any idea, how to do it?
Thank you

Accounts which upload a video or have videos tend to stop or kills the script. Not loading. Even tried on the new version with changing only username in demo. Please help with this.