Display Your Instagram Feed Using The New Instagram API

Display Your Instagram Feed Using The New Instagram API
File Size: 4.55 KB
Views Total: 7488
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.