Looks pretty slick pretty easy to navigate and if we click on an image. It actually takes you to the picture on instagram and the beauty of this is now when this person adds. An image to instagram page will automatically come up on their website. Without them having to edit their website.
Which is kind of cool this example. This guy s actually put the instagram feed on a nice carousel. Which is quite cool so you can see how easy it is to customize this plugin. But what i m going to do today is to show you a basic way how to integrate it on your website.
And then we can go from there so the first thing you need to do is we just need to set up a new folder as you can see i have a blank project. Here and i m going to create a new index dot php file. Okay and i m going to put the html scaffolding. So it s just a standard html5 document and we ll save it and we ll call it a instagram feed test and inside.
There what i m going to do is i m actually a positive id equals into the feed because i ve done it before i know that the insta cj s plug in will actually look for this div. And then it will place all the images in there. So that s the first step now we have the document set up we actually need to download into the feed j s. So what we do is we right click on this download button save the j s file onto our computer and you can obviously i ve already got it on my desktop.
See you can obviously use bower or any of those any of those tools. If you d like but i m just going to do with the plain simple way. And we ll just create a new folder called j s. And we ll drag in so feed.
Min jae s into there. So now if we go to our project. You ll notice we have a j s folder which has info feed min gis and index dot php so let s connect this script with our page. Let s go.
Script. Source. Equals. J.
S. Folder. And then we do into the feed. Stock.
Mindo j. S. And so that s setup. And if we actually go to our site.
You ll notice that in our sauce. We have institute feed min gs and it s located there so that s that s connected now what we need to do is we need to tell into the feed min gs to actually show a specific feed. So to do that the best way to do it would probably be create another js file. Where we can put all the custom stuff in so.
Let s create another one. I m just going to copy that and a call it custom j s..
And i m going to right click. Here. And create a new file and save it as custom j s. So i m going to copy and paste a bit of a script that i have prepared earlier just to save time because i want this to be nice and simple for you now.
I ve pasted that into the custom j s file. And this basically is the options that are for the instagram jo in sophia s program and it will basically tell insta feed what user to grab the images from and also an access token. Which just secures your instagram. So no one can just display your feed from any website.
They want so let s go and get the user id and the access token now to get the user id. We actually need to go to a web. You can do it a few ways. But the easiest way i found is just going to go to this website.
Which is called smashed balloon and you can get your instagram feed from there. I m going to use a customer of mine. I m going to use their id. So it s the victorian bathroom company.
And i m going to get the user id here. So that s nice and easy. We ve got the user id now and i m going to paste it in user id. Whoops and now we want the access token so to get the access token.
We can go to another website. Which is called instagram pixel unions on net and click generate access token and it s doing it because i m already logged into my instagram so if you re already logged in on your computer. It will automatically show it otherwise it will just ask you to login so that it can get it now that i ve got the access token. I ll paste it in there and hit save now let s go to our website and let s see if anything loads.
We actually go there we hit refresh. Nothing s happening and let s find out why so if we go to inspect you ll notice that there is a dollar dollar sign is not defined. Which basically means we need jquery so i stuffed up there we need to actually put jquery on the website. So that this plug in can work so to do that let s just look up jquery and i m just going to use a cdn so that we load it nice and quickly let s just get the latest version of jquery and we ll go back to our index dot php and we ll load jquery at the start here script.
Source script and something stuffed up there what was it it was just this okay there we go let s go back to our project. Now and if we refresh. There you go so now we have currently got 12 images displaying so it s working when we click on one it will actually just show the image and we don t want it to look like this we want it to look a bit better. I think it would look better if we had it in a row row of fours and we display 12.
So to do that the best way to go about this would be to use bootstrap. So let s go to bootstrap and grab bootstrap and integrate it into our project. So let s go to bootstrap for alpha cdn and we ll copy this css file go into our head and we ll do link rel equals. Oops.
Stylesheet and we ll grab don t worry about bootstrap j. S. That s all we need refresh the page. Everything is exactly the same let s put a container around our div and we ll also give insta feed a class of rows.
So that we can then specify each image to be a column size and then it can be displayed in rows. So if we refresh this now. It will actually show in a container. Now let s go back to our custom j s.
File. And assign a class to our images..
So. This is the template area this is basically what dictates each image to look like let s do col lg for r4 and refresh that if we refresh the page now you ll notice that it s actually in a row of three so we re going to do col lg. Three and save it and it will display nicely like that and then what we want to do is probably put a bit of a gap underneath these images. So let s go to our index and we ll create a new style sheet and we ll put it in a css folder.
Okay and the weekend. Let s just call this give this another class of insert image. Okay. So each image will have a class of insert image.
And we will do image margin. Bottom 30 pixels to go back here now and refresh. And that didn t work why not 700 look just refresh. It again.
There we go just had to do a hard refresh. So now we have four images in a row. When you click on that image. It will take you to just the image itself.
I think it could look better if we make it so that if you highlight over the image. The opacity changes. See any have actually highlighted that image. So let s try that let s go to our.
Style sheet and do insert image image. Hover. Capacity 08 miles or pasady. 08 and webkit capacity 08.
And refresh the page again and now. When you highlight over it loads up pretty nicely. Let s give our actual page. A bit of padding at the top.
So padding top 10 v. H. So that take into a bit of padding actually let s do. 5.
Ch there we go and the last thing. I think to make it look even better would be to actually use a lightbox plugin. So that when you click on the image. It loads it in a lightbox and it just gives it that extra bit of customization and user experience.
The best way to go about it would probably be to use magnetic pop up and if we go onto google. And we type in magnifica pop up you ll see a cool website. That shows you how the plugin our show you how it works here so click on one of the images. Here and it will display the image really nicely in a lightbox and you can kind of go back and forth.
Which is really really cool so let s let s install that we ll go to github and we will go to distribution here and we ll download magnifico pop up css i ll just grab the css here and let s go into our css folder. Say that magnificat css and let s include it into our index file. And then we just need to grab the jas file as well look. There are a lot of ways to do this you can use bower or npm.
I m sure i m just doing it the real old school way just to keep it nice and simple. I m also going to download the j s..
File actually which one should i get probably get the minified version go to raw copy that go back here go to our j s. Click create a new file paste. It in lingle calleth. Magnifica.
Dot. Minjae s. And then we just need to include this on our project. As well magnifico minjae is cool so if we go back to our page and refresh.
It and we look at the actual source. There s no errors here. Which is good which means that they re all working. Now let s set up magnifico work with this so go back to the magnificus ide and we ll go to documentation.
And what we want to do is we want to set up a gallery so go to gallery and the probably the best way to go about this would be to copy this. Let s copy that go back to our files. And go to custom j s. And then add this into our custom j.
s file. I ll call it gallery and will now go up here to our index dot php file and add gallery as a class now if we refresh that what should happen now is when we click on the image. It actually should load the image in that particular lightbox. But it s not doing it right now so i m just going to figure out what s going on there okay.
All we need to do to make a work now is go back to our js file and add this little snippet here. Which is delegate. A which basically tells it to target the anchor file or the anchor tag. And that will display the image.
So now if we actually refresh the page and we click on one of the images. You actually notice the image will come up with the description and the tags that you ve typed in on instagram underneath. It and it keeps everything on your website. So people aren t clicking and going back to instagram coming back to your website.
Just gives them a very seamless experience now you ll notice the images are quite small here. And you might want to make them larger. The only problem is that with this particular plug in it only gives you three. Options you have thumbnail low resolution.
Standard resolution. We ve got it set to standard resolution. So. The images are showing at the largest possible size that we can get them so unfortunately.
We can t make them any bigger. But with that being said it still looks pretty good and six twelve by six twelve pixels is the largest you can display it it s better than nothing i guess the last quick thing i ll show you is that if you actually want these images to just display go directly to instagram to that image actually on instagram. What you can do so we go back to the project. And all we have to do is instead of it linking to the image tool to go to the link and we also just need to go to index and take away this magnifico upper class.
And if we refresh. It now. If you go click here. It will actually take you to that image on instagram.
So that s it i hope this tutorial has helped you and you can download this project from the description below leave any comments hopefully some positive ones thanks and ” ..
Thank you for watching all the articles on the topic Simple Instafeed JS Tutorial – 2017 (Instagram Feed on Your Website) . All shares of thetruthaboutdow.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
“This simple tutorial will show you how to integrate instafeed.js into your website and display it with Bootstrap 4 and Magnific PopupnnDownload project files here: http://bit.ly/2vNMffrnnDue to restrictions on Instagram you can only display a specific user s posts. See this issue on GitHub for more (https://github.com/stevenschobert/instafeed.js/issues/408)”,