
Practical Web Design
By :

The end goal here is to be able to implement your own Instagram feed by connecting to the Instagram API and pulling out information from them.
From a design point of view, we want to show a feed of our latest photo from Instagram after our footer, with a hover effect of opacity when you move your mouse over it.
It should look something like this:
The final design of our Instagram feed
To achieve that, first, we need to have an Instagram account. If you already have one, you can use your own. Otherwise, I've created an account for the exercise:
Our awesome Instagram feed
I have, beforehand, uploaded a couple of images of racing. The next step is to install a plugin called Instafeed.js
. Let's go to the website to download it: http://instafeedjs.com/:
Instafeed.js home page
Right click on download
and click on Save link As...
. Place the file in the vendor
folder, located in the js
folder in our Web Project
.
For each plugin, the installation is...