Press "Enter" to skip to content

Instagram Feed Without using Instagram API | jquery.instagramFeed

jquery.instagramFeed is a very responsive and customizable Instagram photo gallery plugin that adds Instagram photos from any user (or whatever tag you provide) to your website without needing an Instagram access code. Instagram Feed without access code. Not using Instagram API.

Add Instagram Photos To Your Website Without API, jquery Instagram Feed Plugin/Github, instafeed js example, get instagram images without api, instagram api

How to make use of it:

1. Create a container aspect to show the Instagram pictures.

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

2. Download and embrace the jQuery instagramFeed script after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.instagramFeed.js"></script>

3. Call the function on the container aspect and specify the username whose pictures you need to fetch.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo"
  });
});

4. Decide whether to show the profile, biography, IGTV.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true,
    'display_igtv': false
  });
});

5. Set the utmost variety of pictures to show.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items': 8
  });
});

6. Set the utmost variety of photographs per row.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'items_per_row': 4
  });
});

7. Set the area between pictures.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'margin': 0.5
  });
});

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

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'styling': false
  });
});
.instagram_profile {
  /* CSS styles here */
}

.instagram_profile_image {
  /* CSS styles here */
}

.instagram_username {
  /* CSS styles here */
}

.instagram_biography {
  /* CSS styles here */
}

.instagram_gallery {
  /* CSS styles here */
}

9. Decide whether or not to display Instagram images as a gallery.

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_gallery': true
  });
});

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

$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo&,
    'get_raw_json': true,
    'callback': myTemplate
  });
});

11. The plugin additionally helps to fetch Instagram photographs by tags:

$(window).on('load', function(){
  $.instagramFeed({
    'tag': 'paradise'
  });
});

12. Get uncooked information with the callback function:

$(window).on('load', function(){
  'get_data': true,
  'callback': function(data){
    $('#jsonHere').html(JSON.stringify(data, null, 2));
  }
});

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

$(window).on('load', function(){
  'image_size': 640
});

14. Enable picture lazy load by adding the loading="lazy" attribute.

$(window).on('load', function(){
  'image_size': 640
});

15. Customize the Instagram response cache expiry time.

$(window).on('load', function(){
  'cache_time': 120
});

instagram feed slider jquery, instagram feed without api, instagram graph api jquery, instagram feed on website html, instagram basic display api javascript


See Demo And Download

Official Website(jsanahuja): Click Here

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

Be First to Comment

    Leave a Reply

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