Add Instagram Photos In Website Without API – jQuery instagramFeed

Social Media
Add Instagram Photos To Your Website Without API - jQuery instagramFeed
File Size: 12.74 KB
Views Total: 5125 views
Last Update:March 07, 2024
Publish Date: April 25, 2018
Official Website: Go to website
License: MIT
Plugin Author: jsanahuja
Demo    Download

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

Thanks for make jQuery plugin is developed by jsanahuja For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • 3.0.4
  • 3.0.3
  • 3.0.2
  • 3.0.0
  • 2.1.1
  • 2.1.0
  • 2.0.1
  • 2.0.0
  • 1.4.1
  • 1.4.0
  • 1.3.2
  • 1.3.1
  • 1.2.5
  • 1.2.4
  • 1.2.3
  • 1.2.2
  • 1.2.1
  • 1.2
  • 1.1.3
  • 1.1.2
  • 1.0.2
  • 1.0.1
  • 1.0.0

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.