Add Instagram Photos In Website Without API – jQuery instagramFeed

Social Media
Demo    Download
Add Instagram Photos To Your Website Without API - jQuery instagramFeed
File Size: 12.74 KB
Views Total: 143 views
Last Update:September 30, 2020
Publish Date: September 30, 2020
Official Website: Go to website
License: MIT

Add Instagram Feed without using the instagram API , exceptionally adjustable Instagram Photo Gallery module that includes Instagram photographs from any client (or any label you give) to your site without the need of the Instagram access token.

How to use it:

1. Create a container element to display the Instagram photos.

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

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

<script src="/jquery-3.3.1.min.js"></script>
<script src="jquery.instagramFeed.js"></script>

3. Call the function on the container element

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

4. Decide wherther to display 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 maximum number of photos to display.

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

6. Set the maximum number of photos per row.

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

7. Set the space between photos.

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

8. If you want 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 to display Instagram photos as a gallery.

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

10. To customizie the template for the Instagram gallery.

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

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

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

12. Get raw data with the callback function:

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

Done


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins