Shovan

Head of Digital from London & Cambridge UK

Display instagram feed on website as carousal

30 June 2018

I am working on a single page website for a construction client (builder). The client wants to display Instagram photo feed on their website.

Instagram Photo Feed requirement

  • Show Instagram photo on the website
  • Show up to six latest photo
  • Photos should be displayed as a carousel

I am looking for a simple solution with no plugin. After a bit of research, here is the strategy

  • Instagram API - To retrieve users photo feed
  • Instagram Feed JS - Base code to display Instagram feed
  • Owl Carousel - To display photos as a slider or carousel

Instagram API

Get the following information from Instagram API userId, clientId and accessToken.

Get User ID for Instagram Profile

You can find Instagram User ID using this tool

Adding /?__a=1 at the end of instagram URL will expose JSON Data, in there you will find similar data 'owner":{"id":"2244940797","username":"bbc"}' where ID is your User ID. eg: https://www.instagram.com/bbc/?__a=1

Get Client ID for Instagram Profile

  • Step1: Go to Instagram Developers
  • Step 2: Click on Register Your Application
  • Step 3: Register a New Client
  • Step 4: Enter all the fields. Make a note of ‘Valid redirect URIs’ it will be used to retrieve Instagram App’s access Token

Get Access Token for Instagram Profile

From the above use CLIENT_ID & REDIRECT_URI in the below URL.

(https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token)

If all goes will it will redirect you to the website, which should append a URL at the end (https://website.com/#access_token=XOXOXOX.XOXOXOXXOXOXOX)

Copy access_token from the above URL

Instagram Feed JS

Instagramfeed.js is a javascript to display instagram feed to the website. It has variety of options to choose from. Read Instagram Feed JS documentation

Replace the below items in the code below

<script type="text/javascript">
  var feed = new Instafeed({
    get: 'user',
     userId: 'UXIUXIUXI',
     accessToken: 'ATX.ATXATXATXATXATX',
     clientId: 'CIXCIXCIX',
     imit: '6',
     sortBy: 'most-recent',
     resolution: 'standard_resolution',
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
    });
    feed.run();
</script>

Building the Page to display IG Images

Empty HTML page

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Display Instagram Feed</title>
  <meta name="description" content="Simple way to display IG feed">
  <meta name="author" content="shovan">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: 'UXIUXIUXI',
        accessToken: 'ATX.ATXATXATXATXATX',
        clientId: 'CIXCIXCIX',
        limit: '6',
        sortBy: 'most-recent',
        resolution: 'standard_resolution',
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
    });
    feed.run();
</script>
</head>
<body>
    <p id="instafeed"></p>
</body>
</html>

Owl Carousel is a simple powerful carousel javascript. To get Owl Carousel, add Owl Carousel javascript, css and jquery to the header of the page

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"  crossorigin="anonymous">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"  crossorigin="anonymous">

Update the script to add Owl Carousel to the JS script

<script type="text/javascript">
var galleryFeed = new Instafeed({
  get: "user",
  userId: 'UXIUXIUXI',
  accessToken: 'ATX.ATXATXATXATXATX',
  clientId: 'CIXCIXCIX',
  resolution: "standard_resolution",
  useHttp: "true",
  limit: 10,
  template:
    // '<a href="">'+
      '<div class="img-featured-container">'+
        '<div class="img-backdrop"></div>'+
        '<a href="" target="_blank" id=""><img src="" class="img-responsive"></a>'+
      '</div>',
    // '</a>'+
  target: "instafeed-gallery-feed",
  after: function() {
    // disable button if no more results to load
    if (!this.hasNext()) {
      btnInstafeedLoad.setAttribute('disabled', 'disabled');
    }

    var owl = $(".owl-carousel"),
        owlSlideSpeed = 300;

    // init owl
    $(document).ready(function(){
      owl.owlCarousel({
        // navContainer: '.owl-nav-custom',
        // dotsContainer: '.owl-dots-custom',
        margin:10,
        loop:true,
        margin:10,
        nav:false,
        responsive:{
          0:{
            items:1
          },
          600:{
            items:3
          },
          1000:{
            items:5
          }
        }
      });
    });

    // keyboard controls
    $(document.documentElement).keydown(function(event) {
      if (event.keyCode == 37) {
        owl.trigger('prev.owl.carousel', [owlSlideSpeed]);
      }
      else if (event.keyCode == 39) {
        owl.trigger('next.owl.carousel', [owlSlideSpeed]);
      }
    });
  }
});

galleryFeed.run();

var btnInstafeedLoad = document.getElementById("btn-instafeed-load");
btnInstafeedLoad.addEventListener("click", function() {
  galleryFeed.next()
});

</script>

Add CSS to Style the page

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
body {
  font-family: 'Lato', "Helvetica", Arial, sans-serif;
}

// remove bootstrap gutter
.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}


// the good stuff
body {
  padding: 10px;
}

.img-featured-container {
  overflow: hidden;
  position: relative;
}

.img-featured-container img {
  width: 100%;
}

.img-featured-container .img-backdrop {
  background: linear-gradient(135deg, rgba(38, 163, 255, 0.85), rgba(83, 201, 179, 0.85));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s ease;
}

.img-featured-container:hover > .img-backdrop {
  opacity: 1;
}

// center text horizontally and vertically on image hover
.img-featured-container .description-container {
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  padding: 0 30px;
  text-align: center;
  line-height: 20px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  z-index: 2;
  opacity: 0;
  transition: all .2s ease;
}

.img-featured-container .description-container .fa-instagram {
  font-size: 40px;
}

.img-featured-container .description-container p {
  font-weight: 300;
  margin-bottom: 0;
}

.img-featured-container:hover .description-container {
  opacity: 1;
}

.img-featured-container .description-container .caption {
  display: none;
  margin-bottom: 10px;
}

.img-featured-container .description-container .likes,
.img-featured-container .description-container .comments {
  margin: 0 5px;
}

// load more button
#btn-instafeed-load {
  color: #fff;
  background: #26a3ff;
  margin: 20px auto;
  padding: 8px 12px;
  display: block;
  border: none;
}

// media queries
@media screen and (min-width:768px) {
  .img-featured-container .description-container .caption {
    display: block;
  }
}
</style>

Update the div container

<div id="instafeed-gallery-feed" class="owl-carousel owl-theme gallery row no-gutter">

Full Code

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"  crossorigin="anonymous">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"  crossorigin="anonymous">


<script type="text/javascript">
var galleryFeed = new Instafeed({
  get: "user",
  userId: 'UXIUXIUXI',
  accessToken: 'ATX.ATXATXATXATXATX',
  clientId: 'CIXCIXCIX',
  resolution: "standard_resolution",
  useHttp: "true",
  limit: 10,
  template:
    // '<a href="">'+
      '<div class="img-featured-container">'+
        '<div class="img-backdrop"></div>'+
        // '<div class="description-container">'+
        //   // '<p class="caption"></p>'+
        //   // '<span class="likes"><i class="icon ion-heart"></i> </span>'+
        //   // '<span class="comments"><i class="icon ion-chatbubble"></i> </span>'+
        // '</div>'+
        '<a href="" target="_blank" id=""><img src="" class="img-responsive"></a>'+
      '</div>',
    // '</a>'+
  target: "instafeed-gallery-feed",
  after: function() {
    // disable button if no more results to load
    if (!this.hasNext()) {
      btnInstafeedLoad.setAttribute('disabled', 'disabled');
    }

    var owl = $(".owl-carousel"),
        owlSlideSpeed = 300;

    // init owl
    $(document).ready(function(){
      owl.owlCarousel({
        // navContainer: '.owl-nav-custom',
        // dotsContainer: '.owl-dots-custom',
        margin:10,
        loop:true,
        margin:10,
        nav:false,
        responsive:{
          0:{
            items:1
          },
          600:{
            items:3
          },
          1000:{
            items:5
          }
        }
      });
    });

    // keyboard controls
    $(document.documentElement).keydown(function(event) {
      if (event.keyCode == 37) {
        owl.trigger('prev.owl.carousel', [owlSlideSpeed]);
      }
      else if (event.keyCode == 39) {
        owl.trigger('next.owl.carousel', [owlSlideSpeed]);
      }
    });
  }
});

galleryFeed.run();

var btnInstafeedLoad = document.getElementById("btn-instafeed-load");
btnInstafeedLoad.addEventListener("click", function() {
  galleryFeed.next()
});


</script>

<style type="text/css">
/* div#instafeed a {
    width: 33.3%;
    display: inline-block;
    height: auto;
} */

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
body {
  font-family: 'Lato', "Helvetica", Arial, sans-serif;
}

// remove bootstrap gutter
.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}


// the good stuff
body {
  padding: 10px;
}

.img-featured-container {
  overflow: hidden;
  position: relative;
}

.img-featured-container img {
  width: 100%;
}

.img-featured-container .img-backdrop {
  background: linear-gradient(135deg, rgba(38, 163, 255, 0.85), rgba(83, 201, 179, 0.85));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s ease;
}

.img-featured-container:hover > .img-backdrop {
  opacity: 1;
}

// center text horizontally and vertically on image hover
.img-featured-container .description-container {
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  padding: 0 30px;
  text-align: center;
  line-height: 20px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  z-index: 2;
  opacity: 0;
  transition: all .2s ease;
}

.img-featured-container .description-container .fa-instagram {
  font-size: 40px;
}

.img-featured-container .description-container p {
  font-weight: 300;
  margin-bottom: 0;
}

.img-featured-container:hover .description-container {
  opacity: 1;
}

.img-featured-container .description-container .caption {
  display: none;
  margin-bottom: 10px;
}

.img-featured-container .description-container .likes,
.img-featured-container .description-container .comments {
  margin: 0 5px;
}

// load more button
#btn-instafeed-load {
  color: #fff;
  background: #26a3ff;
  margin: 20px auto;
  padding: 8px 12px;
  display: block;
  border: none;
}

// media queries
@media screen and (min-width:768px) {
  .img-featured-container .description-container .caption {
    display: block;
  }
}
</style>

</head>
<body>
  <div id="instafeed-gallery-feed" class="owl-carousel owl-theme gallery row no-gutter">

</div>
</body>

</html>

The above code should display instagram photos to your website.