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
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