This time I will share jQuery Plugin and tutorial about Add Instagram Photos To Your Website Without API – jQuery instagramFeed, hope it will help you in programming stack.
A responsive, highly-customizable Instagram Photo Gallery plugin that adds Instagram photos from any user (or any tag you provide) to your website without the need of the Instagram access token.
Vanilla JavaScript Version is available here.
How to use it:
1. Create a container element to display the Instagram photos.
1 |
< div id = "instagram-feed-demo" class = "instagram_feed" ></ div > |
2. Download and include the jQuery instagramFeed
script after loading jQuery library.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "jquery.instagramFeed.js" ></ script > |
3. Call the function on the container element and specify the username whose photos you want to fetch.
1 |
$(window).on('load', function(){ |
3 |
'username': 'instagram', |
4 |
'container': "#instagram-feed-demo" |
4. Decide wherther to display the profile, biography, IGTV.
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'container' : "#instagram-feed-demo" , |
5 |
'display_profile' : true , |
6 |
'display_biography' : true , |
5. Set the maximum number of photos to display.
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'container' : "#instagram-feed-demo" , |
6. Set the maximum number of photos per row.
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'container' : "#instagram-feed-demo" , |
7. Set the space between photos.
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'container' : "#instagram-feed-demo" , |
8. If you want to override the default CSS styles.
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'container' : "#instagram-feed-demo" , |
05 |
.instagram_profile_image { |
13 |
.instagram_biography { |
9. Decide whether to display Instagram photos as a gallery.
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'container' : "#instagram-feed-demo" , |
5 |
'display_gallery' : true |
10. To customize the template for the Instagram gallery, following these steps:
1 |
$(window).on( 'load' , function (){ |
3 |
'username' : 'instagram' , |
4 |
'callback' : function (data){ |
5 |
$( '#jsonHere' ).html(JSON.stringify(data, null , 2)); |
11. The plugin also supports fetching Instagram photos by tags:
1 |
$(window).on( 'load' , function (){ |
12. Determine the image size: Accepted values [150, 240, 320, 480, 640].
1 |
$(window).on( 'load' , function (){ |
13. Enable image lazy load by add the loading="lazy"
attribute. Default: false.
1 |
$(window).on( 'load' , function (){ |
14. Customize the Instagram response cache expiry time. Default: 360.
1 |
$(window).on( 'load' , function (){ |