Add Instagram Photos To Your Website Without API – instagramFeed

Category: Javascript , Social Media | November 16, 2020
Author: jsanahuja
Views Total: 748 views
Official Page: Go to website
Last Update: November 16, 2020
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.

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. Get raw data with the callback function.

new InstagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'get_data': true,
    'callback': function(data) {
      // ...
    }
});

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
    }
});

Changelog:

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:


9 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

Leave a Reply