Add Instagram Photos To Your Website Without API - jQuery instagramFeed

A responsive, highly-customizable Instagram Photo Gallery plugin that adds Instagram photos from any user to your website without the need of the Instagram access token.

1. Create a container element to display the Instagram photos.

<div id="instagram-feed-demo" class="instagram_feed"></div>

2. Download and include the jQuery instagramFeed script after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="jquery.instagramFeed.js"></script>

3. Call the function on the container element and specify the username whose photos you want to fetch.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo"
  });
});

4. Decide wherther to display the user's profile and biography.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true
  });
});

5. Set the maximum number of photos to display.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items': 8
  });
});

6. Set the maximum number of photos per row.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items_per_row': 4
  });
});

7. Set the space between photos.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'margin': 0.5
  });
});

8. If you want to override the default CSS styles.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'styling': false
  });
});

.instagram_profile {
  /* CSS styles here */
}
.instagram_profile_image {
  /* CSS styles here */
}
.instagram_username {
  /* CSS styles here */
}
.instagram_biography {
  /* CSS styles here */
}
.instagram_gallery {
  /* CSS styles here */
}

9. Decide whether to display Instagram photos as a gallery.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_gallery': true
  });
});

10. To customizie the template for the Instagram gallery.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo&,
    'get_raw_json': true,
    'callback': myTemplate
  });
});

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