Display Your Instagram Feed Using The New Instagram API

Almost all Instagram feed plugins (like jQuery instagramFeed) that do not require the Instagram API have been broken since the latest Instagram changes.

To address this, I recommend using this jQuery script to display your Instagram feed on the webpage using the official Instagram Graph API and AJAX requests. Have fun with it.

How to use it:

1. Create a container to hold your Instagram feed.

<div id="instagram-feed1" class="instagram_feed"></div>

2. Insert your Instagram authorization token into the jquery-feed-instagram-graph.js. See How to get Instagram Feed Access Token for details .

// jquery-feed-instagram-graph.js
var token = 'YOUR INSTGRAM TOKEN HERE';

3. Determine the number of Instagram items to show. Default: 6.

// jquery-feed-instagram-graph.js
var limit = 8;

4. Insert the jquery-feed-instagram-graph.js after jQuery and done.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-feed-instagram-graph.js"></script>

5. Apply your own CSS styles to the Instagram feed.

.instagram_feed {
  overflow: hidden;
}

.instagram_feed .instagram_new {
  width: 16.666%;
  float: left;
  padding: 0 1px 1px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.instagram_feed img.insta-image {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
}

.instagram_feed .insta-link {
  position: relative;
  display: block;
  background: #232323;
  padding-top: 100%;
}

.instagram_feed .insta-link:hover .insta-image {
  opacity: 0.2;
}

---

This awesome jQuery plugin is developed by ribeiroeder. For more Advanced Usages, please check the demo page or visit the official website.