Add Instagram Photos To Your Website Without API – instagramFeed

Preview:

Description:

This is the Vanilla JavaScript version of the jQuery instagramFeed plugin, which helps you create a gallery fetching and displaying Instagram photos from any user (or any tag you provide) on your webpage.

Without the need of the Instagram access token.

This plugin is Deprecated since the latest Instagram changes. Move to an official API based plugin please.

How to use it:

1. Download and load the minified version of the instagramFeed library in the document.

<script src="dist/InstagramFeed.min.js"></script>

2. Create a placeholder element for the Instagram gallery.

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

3. Initialize the instagramFeed library and specify the Instagram user (or tag) and container element as follows:

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo" 
});

4. Decide whether to display the profile, biography, gallery, and IGTV.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true,
    'display_gallery': true,
    'display_igtv': false,
});

5. Determine the max number of items to display. Default: 8.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items': 10
});

6. Determine the number of items per row. Default: 4.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items_per_row': 3
});

7. Set the space between photos. Default: 0.5.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'margin': 0.5
});

8. Customize the image size. Default: 640(px).

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'image_size': 480
});

9. Customize the template for the Instagram gallery.

10. Enable the lazy load functionality. Default: false.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'lazy_load': true
});

11. Retrieve data by tags. Default: false.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'tag': 'tags here'
});

12. Determine whether to display captions. Default: true.

new InstagramFeed({
    display_captions: false
});

13. Disable the default styling and apply your own CSS to the Instagram gallery.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'styling': false
});

.instagram_profile {
  /* custom styles here */
}
.instagram_profile_image {
  /* custom styles here */
}
.instagram_gallery {
  /* custom styles here */
}
.instagram_igtv {
  /* custom styles here */
}

14. Execute a callback when an error ocurs.

new InstagramFeed({
    on_error: function(error_description, error_code){
      // do something
    }
});

15. Customize the Instagram response cache expiry time. Default: 360.

new InstagramFeed({
  'cache_time': 360
});

16. Determine the Instagram location ‘{id}/{slug}’ from where to retrieve the feed. Required if username, tag and user_id are not defined. Default: null.

new InstagramFeed({
  'location': '{id}/{slug}'
});

17. Determine the number of tries to fetch Instagram data until throwing. Useful to avoid arbitrary CORS issues. Default: 8.

new InstagramFeed({
  'max_tries': 8
});

18. Specify the URL where to fetch the data. Useful if instagram changes CORS policy. Default: ‘https://www.instagram.com/’.

new InstagramFeed({
  'host': 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/'
});

Changelog:

v3.0.2 (03/05/2021)

• Bugfix

v3.0.1 (03/02/2021)

• Added support for Instagram locations using the location parameter.
• Automatically fallback to Google when the first try fails.

v2.0.2 (02/22/2021)

• Fixed Object.assign issue for IE.

v2.0.1 (02/22/2021)

• Increased default cache_time from 120 to 360 minutes.

v2.0.0 (02/22/2021)

• Client-side caching using localStorage implemented

v1.5.1 (11/16/2020)

• Fixed escape_string for IGTV captions

v1.5.1 (11/16/2020)

• Fixed escape_string for IGTV captions

v1.5.0 (11/05/2020)

• Added display_captions option.

v1.4.0 (06/23/2020)

• Removed ‘get_data’ to enable the callback. Now the callback is always called if defined. It is now also compatible with container HTML rendering so using both would make callback to act like an ‘on_ready’ event.
• Added ‘on_error’ event.

06/23/2020

• v1.3.8: Added lazy_load functionality

05/01/2020

• v1.3.7: Added age restriction check

04/07/2020

• v1.3.6: Added trailing slash to IG requests.

04/04/2020

• v1.3.5: Added network ban detection.

04/02/2020

• v1.3.4: Fixed null value accessibility_caption issue

02/08/2020

• v1.3.2: hotfix

12/14/2019

• Fixed usernames in image alt tags