Press "Enter" to skip to content

[Website] InstagramFeed without using the Instagram API

InstagramFeed is Vanilla JavaScript without an access token and not using the Instagram API. Instagram feed plugin, which helps you create a gallery to fetch and display Instagram photos from any user on your webpage.

How to make use of it:

1. Download and load the minified version of the Instagram feed library within the doc.

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

2. Create a placeholder aspect for the Instagram gallery.

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

3. Initialize the instagramFeed library and specify the Instagram user and container aspect as follows:

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

4. Decide whether or not to show 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 show.

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

6. Determine the number of items per row.

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

7. Set the space between images.

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

8. Customize the picture size.

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

9. Get raw information with the callback function.

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

10. Enable the lazy load functionality.

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

11. Retrieve information by tags.

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

12. Determine whether or not to show captions.

new InstagramFeed({
    display_captions: false
});

13. Disable the default styling and apply your individual 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 occurs.

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

Add Instagram Photos To Your Website Without API, InstagramFeed Plugin/Github

Read More  How to Zoom Images Like Medium | zoom.js

See Demo And Download

Official Website(jsanahuja): Click Here

This superior jQuery/javascript plugin is developed by jsanahuja. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *