With over 300 million daily images posted to instagram, it is the number one social network for sharing images and videos. This tutorial will show you how to display your instagram feed on your website.
If you are more interested in the Sass then click Here
To follow this demo you will need the following Instafeed.js and Instagram developer access
Once you have downloaded instafeed place it your javascript directory and reference it.
<script type="text/javascript" src="js/instafeed.min.js">Then add it to the html
<div id="instafeed-tutorial"></div>Before you can access your photos you must first register your application with Instagram.
The following steps are to set up a developer account. Without developer access Instagram does not permit the retrieval of images.
Click the 'Register Your Application' button.
| Application Name: | This can be anything, As long as it does not contain any of the following: ‘insta’, ‘gram’, ‘IG’ or ‘Instagram’ |
| Description: | Best to keep this simple, e.g. "Gallery for personal site" |
| Company Name: | Company name can be your name |
| Website URL: | This is the url of your website |
| Valid Redirect URIs: | For the purpose of this demo your sites URL will suffice nobody will be logging into your application as we are running in Sandbox mode (see api docs). |
| Privacy Policy: | If you have a privacy policy include it here, if not just add your site URL. |
| Contact Email: | Add your email |
Finally, switch to the Security tab and deselect the ‘Disable implicit OAuth’ checkbox, then hit Register.
There are a number of steps involved here, it may take one or two tries to get it all correct.
Next step is to get a USER-ID, click here . You want to enter the username, the one you use to sign in. Once you have your own ID keep it handy as you will need it soon.
To get your CLIENT-ID, paste the following into your browser
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=tokenNow replace CLIENT-ID with the CLIENT-ID generated.
Now replace REDIRECT-URI with the REDIRECT-URI that you included when setting up.
Load the URL.
Once you have loaded the URL, your ACCESS-TOKEN should be in the URL
'http://your-redirect-uri#access_token=ACCESS-TOKEN'Copy the ACCESS-TOKEN
You now have everything needed to use the instafeed, now let's briefly explore the API options, For detailed information about the API head over to the Github page .
| Resolution: | Three options:
|
| Target | Either the ID name or the DOM element itself where you want to add the images to. |
| Template: | Allows us to use a custom template to use for images, we will be using the template to create our gallery |
| Get: | There are a number of options here
|
| SortBy: | There are a number of options here
|
| Links: | Wrap the image in a link. |
| Limit: | By default instagram photos will run in sandbox mode, This means that image retrieval is capped at a maximum of twenty images,by adding a limit that is less than the maximum twenty we can paginate through our images and reduce the initial page load. |
There are a number of advanced options such as what to do before and after images are returned.
| Before: | Function called before fetching images from Instagram |
| After: | Function called when images have been added to the page. |
| Success: | Function called when Instagram returns valid data. |
| Error: | Function called when there is an error fetching images. |
| Filter: | Function used to exclude images from your results, e.g Show only photos, videos |
document.addEventListener("DOMContentLoaded", function() {
var tutorialFeed = new Instafeed ({
get: 'user',
userId: '623597756',
clientId: 'Client',
target: 'tutorial-instafeed',
accessToken: 'Access-Token',
resolution: 'standard_resolution',
sortBy: 'most-recent',
limit: 9,
template: '<div class="image-item insta-page">' +
'<a class="image insta-image" href="{{image}}>' +
'<img alt="{{user.full_name}}" src="{{image}}>' +
'<div class="img-backdrop-tutorial">' +
'<div class="insta-caption">' +
'<p>{{caption}}</p>' +
'</div>' +
'</div>' +
'<div class="captions">' +
'<a></a>' +
'</div>' +
'</a>' +
'</div>'
});
tutorialFeed.run();
});Having briefly introduced the advanced instafeed options, now let's explore how to use the Filter and the After functions.
We are going to use the Filter function to only return images.
document.addEventListener("DOMContentLoaded", function() {
var tutorialFeed = new Instafeed ({
get: 'user',
userId: '623597756',
clientId: 'Client',
target: 'tutorial-instafeed',
accessToken: 'Access-Token',
resolution: 'standard_resolution',
sortBy: 'most-recent',
limit: 9,
template: '<div class="image-item insta-page">' +
'<a class="image insta-image" href="{{image}}>' +
'<img alt="{{user.full_name}}" src="{{image}}>' +
'<div class="img-backdrop-tutorial">' +
'<div class="insta-caption">' +
'<p>{{caption}}</p>' +
'</div>' +
'</div>' +
'<div class="captions">' +
'<a></a>' +
'</div>' +
'</a>' +
'</div>'
filter: function(image) {
return image.type === 'image';
}
tutorialFeed.run();
});We can now use the After function to display a loading animation while the photos are being returned. This is a nice way to let your users know the images are on their way.
You can check to see if any more images are available, if images are available show the load more button, if no images are available hide the button.
document.addEventListener("DOMContentLoaded", function() {
var tutorialFeed = new Instafeed ({
get: 'user',
userId: '623597756',
clientId: 'Client',
accessToken: 'Access-Token',
resolution: 'standard_resolution',
sortBy: 'most-recent',
limit: 9,
template: '<div class="image-item insta-page">' +
'<a class="image insta-image" href="{{image}}>' +
'<img alt="{{user.full_name}}" src="{{image}}>' +
'<div class="img-backdrop-tutorial">' +
'<div class="insta-caption">' +
'<p>{{caption}}</p>' +
'</div>' +
'</div>' +
'<div class="captions">' +
'<a></a>' +
'</div>' +
'</a>' +
'</div>'
filter: function(image) {
return image.type === 'image';
},
after: function () {
loader.style.display = 'none';
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
}
}
});
tutorialFeed.run();
});You now have your instagram photos showing on your site.
If you hover the image you can see that the caption is also returned, instafeed allows developers to return more than the caption, you can return likes, comments, post type etc. See here for a full list of returnable properties.
We are going to use flexbox to display our images, combine this with Sass and we can style our images quickly, we can also add animations and transition delays using Sass loops.
Using flexbox set the image-wrapper to display as a row that will wrap when there is no more space left.
To keep the images fluid, use the flex property. I could write a whole post on flexbox, but for now I will just briefly explain.
flex: 1 0 33%;Each image will now grow and shrink at the same rate while maintaining 33% of the space available
Using a loop, add a new animation delay to each item. I chose to add 1s delay between each item. Setting each item to be invisible prior to the animation running.
animation-delay: (#{$i * .1s});$insta-wrapper-max-width: 965px;
$insta-wrapper-min-height: 100px;
$transition: all .17s cubic-bezier(.4, 0, 1, 1);
.image-wrapper {
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
flex-grow: 1;
justify-content: space-around;
margin: 0 auto 24px;
max-width: $insta-wrapper-max-width;
min-height: $insta-wrapper-min-height;
position: relative;
width: $width;
}
.image-item {
animation: slide-item .3s ease forwards;
box-sizing: border-box;
flex: 1 0 33%;
transform: translateY(250px);
visibility: hidden;
width: $width;
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
animation-delay: (#{$i * .1s});
}
}
}
.insta-page {
padding: 12px;
}
.image {
display: block;
position: relative;
transition: $transition;
width: $width;
img {
display: block;
max-width: $width;
}
}And finally the animations
@keyframes slide-item {
60% {
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
}