Free Download Add Instagram Photos To Your Website Without API – jQuery instagramFeed

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.

File Size:	22.1 KB
Views Total:	38286
Last Update:	22 days ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

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(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo"

5
  });

6
});

4. Decide wherther to display the profile, biography, IGTV.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo",

5
    'display_profile': true,

6
    'display_biography': true,

7
    'display_igtv': false

8
  });

9
});

5. Set the maximum number of photos to display.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo",

5
    'items': 8

6
  });

7
});

6. Set the maximum number of photos per row.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo",

5
    'items_per_row': 4

6
  });

7
});

7. Set the space between photos.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo",

5
    'margin': 0.5

6
  });

7
});

8. If you want to override the default CSS styles.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo",

5
    'styling': false

6
  });

7
});

01
.instagram_profile {

02
  /* CSS styles here */

03
}

04
 
05
.instagram_profile_image {

06
  /* CSS styles here */

07
}

08
 
09
.instagram_username {

10
  /* CSS styles here */

11
}

12
 
13
.instagram_biography {

14
  /* CSS styles here */

15
}

16
 
17
.instagram_gallery {

18
  /* CSS styles here */

19
}

9. Decide whether to display Instagram photos as a gallery.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'container': "#instagram-feed-demo",

5
    'display_gallery': true

6
  });

7
});

10. To customize the template for the Instagram gallery, following these steps:

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'username': 'instagram',

4
    'callback': function(data){

5
      $('#jsonHere').html(JSON.stringify(data, null, 2));

6
    }

7
  });

8
});

11. The plugin also supports fetching Instagram photos by tags:

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'tag': 'paradise'

4
  });

5
});

12. Determine the image size: Accepted values [150, 240, 320, 480, 640].

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'image_size': 640

4
  });

5
});

13. Enable image lazy load by add the loading="lazy" attribute. Default: false.

1
$(window).on('load', function(){

2
  $.instagramFeed({

3
    'lazy_load': true

4
  });

5
});

14. Customize the Instagram response cache expiry time. Default: 360.

`1`	`$(window).on('load',` `function(){`

2

How to use it:

Share this:

Related posts: