Simple Instafeed JS Tutorial - 2017 (Instagram Feed on Your Website)

[@mrdigitalau]

From Instafeed JS website: ⚠️ IMPORTANT! Instafeed.js will stop working completely on March 2, 2020. Instagram will not allow new integrations with instafeed.js. Before you decide to use instafeed.js, be aware that Instagram is shutting down the API platform that enables instafeed to work, and is not issuing new user access tokens for this API. As of now, instafeed.js works for some common uses (eg. embedding a single user's feed on a web page) as long as you already have a legacy Access Token. It will not work for new integrations or more complex uses (eg. retrieving all public images with a particular hashtag, finding posts based on a location, etc). The platform API will be turned off completely in 2020, which means that instafeed.js in its current form will stop working then. We're currently looking at ways to continue the instafeed.js experience with the new APIs, but no solution or road-map has been agreed upon yet.

[@jeems2142]

so sad

[@iAreZombie]

Oh this sucks, I'm literally doing this right now xD hopefully you find a work around! Thanks for the video

[@sinemsinem498]

I was looking at what i did wrong for almost a hour :'( is there an alternative?

[@lucasseagull8282]

Yes please, is there any alternative?

[@frostsmaker8966]

@@lucasseagull8282 I had tried to find alternative everywhere, can't find it. (free version) But, for WordPress there is a working plugin. (I don't like WordPress). I found others that working perfectly using javascript, but (paid version, minimum service for using Instagram is 10$ monthly). The other way, if you just want to get post data from Instagram, just grab HTML data from the page, then use javascript to get post data and add that post to your web.

[@jonah5908]

One note for this method: doesn't look like it works for videos, just photos. Still, its awesome. I see many paid options online that cost quite a bit. This is a money saver!

[@sandrolume]

Hello, I really liked your video! I believe that it is the only one that does the integration of magnific popup and instafeed, I would love to see this same expo updated for the year 2022 because there were some restrictions on Instagram. Congratulations on the video!

[@mrdigitalau]

Hey Everyone, if this tutorial helped you, please SUBSCRIBE :) It would do me a massive favour! KZbin have changed their rules and I need 400 more subs by Feb 20. If you can subscribe, that would be AWESOME! Cheers

[@sayvilleinc3915]

it doesent show

[@sayvilleinc3915]

please help

[@maartenblokdijk]

Simply great. All I need for my project, and it works like a charm. So satisfying, to see this all come together! What i did to get my images all the same size: add this to the css: .instaimg img { width: 180px; height: 180px;margin-bottom: 30px;}

[@HunterReynolds]

Thanks for this tutorial. I actually found a way to accomplish a similar effect without the need for Bootstrap, which was affecting the entire layout of my site. For anyone looking to do the same thing, use (display: inline-box;). Worked like a charm.

[@faddoo]

Nice tut! If you want your gallery grid images same height just add this into you style.css (height depnds on your layout) .instaimg {overflow: hidden; height: 255px;margin-bottom: 30px;}

[@rocus80m]

Who could even dislike this? This tutorial is just amazing!

[@snowsnow4231]

Great example! Learn JS and got to working with API calls, now i have a nice reference to start!

[@brah1085]

Have to do something like this for an assignment. You're a life saver I also learned other things from this that will be useful in the future. Thanks you! Great tutorial

[@flashmavi]

Worked GREAT. just the user/id thing is outdated, but there are other videos about that. THANX!!!

[@RecordedExcellence]

Excellent tutorial mate, nice one! I'm gunna give it a go now. It would be really handy to supply links in the description to the sites you use in the video.

[@stefza2k7]

Great video dude, you go into the perfect amount of detail! You should totally make a video for getting facebook and Twitter feeds.

[@Boa313]

thank you so much for this great tutorial, you helped me a lot, even one year and a half after ! much love from a begginer ;)

[@amangadpale9284]

What if I only want to show tagged images ! , What changes should I make in codes in custom.js!???

[@naimurhasanrwd]

I found this super easy and helpful, thank you.

[@RyomaGG]

How do you got about using a carousel for the images? Or do you have to include the images seperately to do that? EDIT: just realised that the images are included seperately using the "template" value in the InstaFeed object.

[@thomasdemeulenaere1738]

Waauw! Awesome video.. You really helped me out here! Like your vibe. Keep it up

[@gabonessi]

Very nice, I would like to add this to a website for a client, however in the github of Instafeed.js it says that the instagram API which allows this to happen is going to finish at 2020

[@kagishophahlamohlaka2306]

Will This still work in 2020?, because things do get updated.

[@matthijsberghuis1801]

i got a question. how do i display the images all on the same square with? without bootstrap.

[@dracoooh7560]

Super helpful! this makes it look so nice thank you

[@Picador1963]

Thank you very much for this tutorial. It helped me a lot! I have a question: is it possible to put 2 ID=Instafeed ; 1 for the Standard Monitors and other for mobil Devices?

[@mambo2187]

Awesome. Thank you so much. This was exactly what I was looking for.

[@adityakhakhria1396]

Hey , thank you so much , it helped allooattt . just one query - what to do if we want the videos also to be embedded in the feed - its showing in the feed but not playing , how to do ?? Hope there is a way , please revert soon with yes or no. Thanks

[@Picador1963]

Are you planing a new tutorial with the new Instagram-Facebook regulation API Graph to get the token and apply it to this project? this will be great!

[@Dreamzers]

How would you add a "load more" button? Great vid!

[@piv0ted]

Thanks for the tutorial, that was quite helpful!

[@DevNightly]

does this cover load more instagram feed?

[@manuelavalenti]

Question. Is there a way to customize the {{link}} to have each image link to a different custom URL rather than having the images linking back to their respective instagram post? Thanks for this tutorial. It really helped.

[@PVVSL]

Thanks dude!) everything is working.

[@mrdigitalau]

woohoo, glad I could help :)

[@visionfromabove769]

do you know if its possible to filter out all the videos from your insta feed return? (atm it returns cover pics of the vids, and i dont want that)

[@christopher-bisman]

Would you know if it is possible to add a "load more" button to see more images?

[@ronifintech9434]

Thanks for the video. Does this work for react-native apps?

[@isabellaeickenhorst6248]

Hi, do you know how I can display more than 33images? I put the limit to 400 because I am trying to create a tile wall but I am stuck with 33images.

[@notthattayo6774]

Please who knows how to implement this for both videos and images? mine currently displays videos as images.

[@Code56Gaming]

how do you make the video play when it is on your website?

[@rashedhassan877]

Its Very nice. Can u show us how to add hash tag filtering function. Thanks for your nice tutorial...........

[@volodymyrselevertov]

is this plugin have opportunity to show number of likes or views when user will hover on some images?

[@thenotsogreatbiker4093]

This works good, but I have a question. I will be embedding this into a of a table that will only be a certain width and height. I would like to have a scroll bar to scroll through all the different images. Can you tell me how to do this?

[@rizkifirdaus2204]

hey Mr Digital, i see u use the id tag " " as the place that instagram photo show up, is there is the way to use other tag id to make that photos show up ?

[@volodymyrselevertov]

hi, sure you can use any element for showing up your content from instagram :)

[@aleksandargujas2375]

I'm getting intermittent token expiry - anyone have any resources on renewing your access token from the server? I'm working with c# but any general resource is fine, I'm looking for principles

[@jonah5908]

Can confirm as of January 10th 2020, this method works. However if I might just add, its not worth it to add bootstrap to your project just for implementing your instagram feed. The only css you need is less than 10 lines to produce some results. .insta-rows{ width: 100%; display: grid; grid-gap: 1em; grid-template-columns: 1fr 1fr 1fr; } .insta-rows > img{ width: 100%; height: 100%; } Really simple stuff, anyways, the video is still up-to-date.

[@redahassani5745]

You saved my day, thanks ;)

[@b0mbh3ad87]

ok so i got it to work but even if i change the sortBy to random it still only shows the the most recent images on the feed except in random order any suggestions??

[@djkrazay7791]

Some 3rd party plugins make me dizzy.. this is way easier :) thanks for you tutorial. Amazing!

[@daniyalqureshi4456]

very nice video I tried and it's working thanks bro

[@mrdigitalau]

Welcome 👍

[@NickyTuan]

thx man very helpfull love it :)

[@mazharbotanicgarden]

hello everyone , i'm wondering about hide access token to be not visible ?how to do it un visible ?

[@SandeepSandeep-ip5or]

yes its good till yet , but if i need only the business account post in instagram then how can we filter those post accordingly?kindly reply.

[@KaranKhandekar]

Even after increasing the from 12 to 300. Still only 33 images are coming from Instagram. Do you have any solution for this.

[@designminion4201]

Quick and easy. Thanks a lot!

[@b0mbh3ad87]

how did you get the user ID? splash balloon didnt work for me

[@b0mbh3ad87]

smash*

[@DannaB67]

well, it's not working for me... I've changed the userId and accessToken and still no image shows up

[@AndrewMarsin]

I'd like to do it on my client's site. How can i get it without token?

[@himanshutyagi1331]

Is this method can work on localhost as well?

[@sebastianovalle8581]

Hi Mr Digital I do the some of the tutorial but y have this problem instafeed.min.js:2 Uncaught Error: Missing clientId or accessToken. at e.run (instafeed.min.js:2) at HTMLDocument. (custom.js:11) at c (jquery.js:3) at Object.fireWith [as resolveWith] (jquery.js:3) at Function.ready (jquery.js:3) at HTMLDocument.H (jquery.js:3) What could be ?

[@mrdigitalau]

Hey mate, you must not have the right client ID or Access token. You need to get the access token for it to work.

[@jonathanmontoya7621]

I've been trying to make a carousel but I'm having no luck. Do you have any resources that'll lead me to the right direction? Thank you!

[@mrdigitalau]

Yeah you could use Owl Carousel for it. Maybe I'll make a new tutorial for that yeah?

[@iLoveTurtlesHaha]

What if you wanted to update your instagram after uploading it to your website instead?

[@suvethachandramohan2468]

I need this. Bt how to do for react

[@5201314Channel]

please help me. how to fix proportion images gallery to 255x255px like yours. my curent images in gallery is defined with original photo proportions from inst. each image in gallery have different proportion. Thank you

[@mrdigitalau]

Try making the image a background image in the div and setting background-size:cover? It really depends on how the images were uploaded to Instagram... eg. template: ''

[@rizkisaputra2811]

Instagram Access Token Generator is no longer available... what can i do?

[@imamsathikn2088]

Hi Its Works Fine - Any way possible to see a Instagram Story ?

[@zero3560]

mine aren't showing up as same height :( idk how to fix it

[@lucianopereira200]

Is it safe to authorize this site to get my token?

[@ricard348]

thank you!!! Do you save my life!!!

[@stevesong4429]

is it still possible to get access token now or did Instagram change their policy? tried many things including pixel union

[@hungipham]

Hi, I just got mine through instagram.com/developer I had to get a Client ID first. There's actually a pretty lengthy process that's described here to get your Client ID weblizar.com/get-instagram-client-id/ Once you have your Client ID, you put it into api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token where CLIENT-ID is your Client ID and REDIRECT-URI is the website where you want to use your plugin. You should get redirected to the website and the access token will be a part of the URL.

[@stevesong4429]

i can never get redirected to the website where you get the access token after I follow the steps. You can see from weblizar people having similar problems

[@hungipham]

Steve Song what did you put as your REDIRECT-URI? In my case, I set it the same as the company website, and I got a working access token.

[@linusrogge]

Very helpful! Thanks a lot

[@mrdigitalau]

You're welcome Ieines!

[@wat4man]

Strange thing. non of those examples on instafeedjs.com don't work

[@MikeXwolf]

Instagram Access Token Generator was deactivated on Pixelunion :/

[@WaqarAhmedGlobal]

the project folder link is not working.

[@HackThat]

wonderful tutorial thanks

[@ahadulislam7185]

Is this js libeary still work

[@dec23]

What I don't understand is the Access token. I am doing this for a friend/client. I have them as a sandbox user, they have me as a sandbox user. I have the client Id, but when I do the steps for the access token, it uses MY client ID rather than my clients/friends. How would I change this? I don't have to be logged in as my friend do i? Or get his permission to do get the access token?

[@mrdigitalau]

Hi Alexandra, you need to log in to your friend's instagram and generate the token whilst logged into their instagram. It should then provide you with a token from their instagram account :)

[@dec23]

Thanks so much for your quick reply Mr. Digital! Just one question- is this the process for creating all instafeed.js- I would have to ask for username/password (logging in as them) information from my clients in order to make this work? I'm not sure clients would feel comfortable with me asking for that. Just like your feedback on that. Cheers!

[@mrdigitalau]

Hey Alexandra, of course! I do it all the time with my clients. Just ask them to set a quick temporary password or ask them to generate the code for you I guess. Most of my clients trust me, and have absolutely no reason not to. Have a little faith :) Just ask, I'm sure they will be ok with it if it will benefit their website.

[@dec23]

Thanks so much Mr. Digital! I REALLY appreciate it! You're the only developer that has taken the time to respond to my questions regarding this issue. Have a great day! :)

[@LaNatCosplayer]

Very useful!!! Thanks Thanks :D

[@laurameraglia8981]

Very usefull ! thank you so much

[@captainmash-h8h]

Thank you! This very helping me. But, how can i get the value of the caption? I try {{caption}} and error pop up like "Use of undefined constant caption". Can anyone help?

[@mrdigitalau]

Hey mate, Value of the caption? You mean the caption text right?

[@TimothyDempsey]

Great tutorial, but is it safe to use your Id and Authorization token in the source? Isn't that an invite for hackers to easily hoist your IG account?

[@mrdigitalau]

Hey mate, they can't do much apart from show your images, they can't access the account itself. The worst they could do is display it on their website :)

[@licentiavelnex3500]

Does this method still work? 14/10/2019? I couldn't make it work

[@mrdigitalau]

It's a bit old man. I don't know to be honest. i will need to look into and see if I can do a new tutorial for this one :) I still do get people thanking saying it works so it must still be ok

[@jonathanmontoya7621]

May god bless your soul with this tutorial , thank you! For some reason my images were overlapping each other. I fixed it like this .instaimg img{ margin: 30px; height: 300px; width: 250px; } Although it doesn't look as good as your images. Is there a reason why my images were overlapping?

[@mrdigitalau]

Hey Jonathan, thanks, are you using bootstrap? If you are using Bootstrap 3, add a class to the image to be "img-responsive" if you are using Bootstrap 4 - "img-fluid" or just make them width:100%;

[@stevedavies1609]

For the life of me I can't get it to work. Most likely something very simple I am doing wrong. Could you take a look?

[@mrdigitalau]

Sure, Send the link on here if you want, are you just doing a basic one like in the video?

[@mrdigitalau]

Hi Steve, The issue relates to your instagram not allowing access. If you look in the console or right click "inspect element" on the page, you will see a console error saying "Error from Instagram: This client has not been approved to access this resource." This means that you may not be using the right USERID or AccessToken for the same account. Try follow the steps again, you need to first find out the user id and then generate the token. I have copied the project over and used your JS and the only issue is that the user id and access token, other than that it should load fine. Let me know how you go.

[@stevedavies1609]

I knew it would be something simple!!! I was using the wrong username to get my ID for the wrong account - Thanks so much for your time.

[@mrdigitalau]

You're welcome mate NP

[@hiruthmariestautland8981]

Thank you for the help!

[@tubagusputra5788]

Thank you so much, bud!!

[@janrehor5805]

Hello, I should have a question. We develop our e-shop and try to link the instagram feeds with our site (create a gallery of images on a certain hashtag). Despite the instafeedjs, it worked good just for a specific ID. The problem is that I need photos from the entire instagram, which are filtered to a certain hastag eg #KFC. Does anyone have experience with it? Does anyone know how to do it? Or does anyone have a link where the information needed to look for it? We do not use any CMS due to bad experience, not only in our group, but in general. We write everything from base (HTML, CSS, JS, etc.) Thank you very much in advance, any answer would help me. PS: Sry for my bad English :p :D

[@hungipham]

Ahoj (pro ostatni napisu zbytek odpovedi v Anglictine), if you look at instafeedjs.com (or their github) documentation, it shows the basic usage for showing pictures that have a certain hashtag. Here's how easy it is to get all images tagged with #awesome: var feed = new Instafeed({ get: 'tagged', tagName: 'awesome', clientId: 'YOUR_CLIENT_ID' }); feed.run(); where YOUR_CLIENT_ID is a valid Instagram client ID and tagName is the hashtag you're looking for.

[@janrehor5805]

Hùng Phạm Díky moc, zkusíme to :)

[@WaqarAhmedGlobal]

thanks for the video, but the code is not zoomed in.

[@coloradokurt]

Hi Great Video, but for some reason i cannot see all my images, even though i set the limit up to 200. Anyone can help me?

[@AmeerQureshi]

"Uncaught Error: Error from Instagram: This client has not been approved to access this resource." I'm getting this error any idea. I google this issue and found that due to new API changes its not gona work this way. any help would be appreciated. thanks in advance.

[@SeanFreitas]

Hey Ameer, what are you trying to do ? Are you trying to get tags or just images? From my understanding, they only allow you to get recent images, not tags, etc.

[@AmeerQureshi]

If i add my own client id, it's working but i'm working on client website and i have to add it's company instagram imgs, when i see enter client ID it show me above error.

[@mrdigitalau]

Yeah, did you have their Instagram login/password? Each client has their own unique CLIENT ID and Key also.

[@mrdigitalau]

You need to log into their instagram then generate the token. Seen here kzbin.info/www/bejne/rai7o4Njh9uiia8m55s

[@AmeerQureshi]

I don't have it, but i can ask. thank you for your help I will try and will get back to you in case of any issue.

[@francescocugini5401]

Very useful!!! Thanks

[@PVVSL]

working?

[@francescocugini5401]

More last. Thumbnails on my web page didn't have same dimensions (because Instagram's photos on my account have different dimensions!), so I created divs those use Instagram's images as background, with css... now all thumbnails have same dimensions! You can see here: www.bylemon.com/en/works.html

[@PVVSL]

good job!)

[@mrdigitalau]

Looks Good Francesco well done mate!

[@cedricesser7680]

saved my day! :D

[@latashawade1450]

I've been messing around with the html template to include the user profile picture and user name with no luck. I'm trying to duplicate the instagram feed on this website: www.helloyoudesigns.com. Does anyone know how to achieve this?

[@xReTuneSx]

why use php instead of html?

[@sabarishniranjan1936]

i am a novice. Please tell me how to open the code in the browser

[@mrdigitalau]

Hey mate, if you aren't running a local web server (sounds like you aren't) - rename the index.php to index.html and then open it up in your web browser.

[@sabarishniranjan1936]

Hi, Thanks but I am getting a 'failed to load resource' on both custom.js and instafeed.min.js

[@sabarishniranjan1936]

Hey, I was able to change the path and debug those errors but now I am getting the following error: instafeed.min.js:2 Uncaught Error: Error from Instagram: you cannot view this resource at e.parse (instafeed.min.js:2) at recent?access_token=

[@mrdigitalau]

Hi Sabarish Are you using the correct user token and ID?

[@sabarishniranjan1936]

Mr Digital I was using another person's ID....is there a way I can get any other user's feed

[@notthattayo6774]

Great video. Instafeed loads well but I have an error coming from the magnific pop up's min.js. it says "Uncaught TypeError: a is not a function" , and as a result, i think it now also displays another error "magnific pop up is not a function" when i try to call it on gallery. Please any help with this?

[@notthattayo6774]

update: I found out that that the first error i got was because i did not include jquery. I have done that now and i am left with Magnific pop up is not a function

[@notthattayo6774]

update: It works fine now. I didn't arrange the scripts properly. Great tutorial.

[@bitdefender1582]

nice one!! Thank you !

[@mrdigitalau]

Thank you ! Glad it worked for you

[@umair7119]

any solution for video?

[@notthattayo6774]

please have you found this out yet? i need one that works for both image and video

[@afshingm6617]

this is exactly what i needed. thanks.

[@VrlHtzz]

This will not gonna work, unfortunately Hope,, you got some solution?

[@jamalxtz]

nice, very thanks

[@makedafranklin8913]

Thank you so so much.

[@mongopro8835]

Thank u myLord!

[@kevinwg02]

but i don't want to pay for this....

[@Anod26]

Smash Balloon is not free now