Add Instagram Photos In Website Without API – jQuery instagramFeed

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.
As we know that Instagram is a Social Media platform where people can share their images and their stories. The photos posted will become under Instagram Feeds. We are using this jQuery Instagram Feed to include the images into our website without any API usage.

How to use it:

Add container with element to display the Instagram photos.

Here, we’re creating a division with an id called “instagram-feed-demo” and with the class name “instagram-feed“

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

include the jQuery library after jQuery instagramFeed script.

Here, we’re inserting JavaScript coded files “/jquery-3.3.1.min.js“, and “jquery.instagramFeed.js” inserted into the jQuery script.

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

Add script with function on the container element :

Here we add a function on the container element with the attributes ‘Username‘, and ‘container‘.

Username: Username is a String Type with default value Null, Instagram Username is nothing, but it is used to retrieve the feed based on the username.Container: Container is also a string type with default value Null, It is used to place the feed, and it is only required if callback is not defined.

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

Decide where to display the profile section, biography, IGTV.

display_profile: This is a Boolean type with a default value true. It is used to enable the displaying of the profile.

display_biography: This is a Boolean type with a default value true. It is used to allow the showing of the biography.

display_igtv: This is a Boolean type with a default value false. It is used to enable the displaying of IGTV feed. If available.

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

Set the maximum number of photos to display.

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

Set the maximum number of photos per row.

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

Set the space between photos.

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

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 */
}

Decide whether to display Instagram photos as a gallery.

display_gallery: This is a Boolean type with a default value true. It will allow for displaying of the gallery.

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

To customizie the template for the Instagram gallery.

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

The plugin also supports fetching Instagram photos by tags:

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

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