Add Instagram Photos To Your Website Without API – instagramFeed

Category: Javascript , Social Media | March 5, 2021
Author:jsanahuja
Views Total:13,638 views
Official Page:Go to website
Last Update:March 5, 2021
License:MIT

Preview:

Add Instagram Photos To Your Website Without API – instagramFeed

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

You Might Be Interested In:


20 thoughts on “Add Instagram Photos To Your Website Without API – instagramFeed

  1. joey

    When i add this to my sites template it is going down not across like the demo, its in a col-md-12

    Reply
  2. Marre

    new InstagramFeed({
    ‘username’: ‘instagram’,
    ‘container’: document.getElementById(“instagram-feed-demo”),
    ‘display_profile’: true,
    ‘display_biography’: true,
    ‘display_gallery’: true,
    ‘callback’: null,
    ‘styling’: true,
    ‘items’: 8,
    ‘items_per_row’: 4,
    ‘margin’: 1
    });

    should i put this in the instafeed.min.js file?

    Reply
  3. Steffen

    Easy to customize, it took me less than 3 minutes to run that script on our website. Thank you 🙂

    Reply
  4. H

    How would I go about getting the captions to display along with the photos?

    Reply
  5. T. Cooper

    Finally a native JS solution without any Instagram access token with results in seconds!!!! And extremely well done I might add: clear instructions, simple and fast to implement with excellent results. Added to that, its API is very well documented!

    This is, in my sole opinion and I mean it from the bottom of my heart, by far the best pure JS Instagram plugin developed! Horns up to the developer!!!

    Reply
  6. Adam

    Good work on the plugin! I can see it works on chrome but on firefox the images do not show, are you aware of this issue or is there a fix that can be done?

    Thanks!

    Reply

Leave a Reply