jquery.instagramFeed

Options

Attribute	Type	Default	Description
`username` Required / Optional	String	`null`	Instagram username from where to retrieve the feed. Required if tag, location and user_id are not defined.
`tag` Required / Optional	String	`null`	Instagram tag from where to retrieve the feed. Required if username, location and user_id are not defined.
`location` Required / Optional	String	`null`	Instagram location '{id}/{slug}' from where to retrieve the feed. Required if username, tag and user_id are not defined.
`user_id` Required / Optional	String	`null`	Instagram user ID for GraphQL API. Required if username, tag and location are not defined. Not recommended as Instagram is CORS restricted again
`container` Required / Optional	String	`null`	Selector where to place the feed. Required if callback is not defined.
`callback` Required / Optional	function(data)	`null`	Callback function with all the data fetched from instagram. Required if container is not defined.
`display_profile`	Boolean	`true`	Enables displaying the profile. Not compatible when loading from GraphQL API with user_id
`display_biography`	Boolean	`true`	Enables displaying the biography. Not compatible when loading a tag, location or user_id
`display_gallery`	Boolean	`true`	Enables displaying the gallery
`display_captions`	Boolean	`false`	Enables displaying captions for each post as overlay on hover
`display_igtv`	Boolean	`false`	Enables displaying the IGTV feed if available. Not compatible when loading a tag or from GraphQL API with user_id
`max_tries`	number [Int]	`8`	Number of tries to fetch Instagram data until throwing. Useful to avoid arbitrary CORS issues.
`styling`	Boolean	`true`	Enables default inline CSS styles
`items`	number [Int]	`8`	Number of items to display. Up to 12 for users, up to 72 for tags
`items_per_row`	number [Int]	`4`	Number of items that will be displayed for each row
`lazy_load`	Boolean	`false`	Enable lazy load of images using native web attribute loading="lazy" on img elements
`margin`	number [Float]	`0.5`	Margin (percentage) between items in gallery/igtv
`image_size`	number [Int]	`640`	Native resolution of the images that will be displayed in the gallery. Accepted values [150, 240, 320, 480, 640]. Does not apply to video previews.
`host`	String [url]	`https://www.instagram.com/`	URL where to fetch the data. Useful if instagram changes CORS policy. Recommended as Instagram is CORS restricted again. Set to: 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/'
`cache_time`	number [Int]	`360`	Instagram response cache expiry time in minutes. Increase this if you get banned too often.
`on_error`	function(error_description, error_code)	`console.error`	Function that will be triggered when an error ocurs. Error codes: 1: No username nor tag defined 2: No container nor callback defined 3: Profile is age restricted 4: Network banned 5: Request error

Examples

Example 1: Default feed styling

Don't like it? Check other examples!

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',
                'container': "#instagram-feed1",
                'display_profile': true,
                'display_biography': true,
                'display_gallery': true,
                'display_captions': true,
                'max_tries': 8,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1,
                'lazy_load': true,
                'on_error': console.error
            });
        });
    })(jQuery);
</script>

Example 2: Only want images?

Disable display_profile and display_biography

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'github',
                'container': "#instagram-feed2",
                'display_profile': false,
                'display_biography': false,
                'display_gallery': true,
                'display_captions': false,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1 
            });
        });
    })(jQuery);
</script>

Example 3: Want to load more or change the display?

Change items, items_per_row and margin

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'zara',
                'container': "#instagram-feed3",
                'display_profile': false,
                'display_biography': false,
                'display_gallery': true,
                'display_captions': false,
                'callback': null,
                'styling': true,
                'items': 12,
                'items_per_row': 6,
                'margin': 0.25
            });
        });
    })(jQuery);
</script>

Example 4: Want to fetch a TAG?

Use tag instead of username.

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script >
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'tag': 'paradise',
                'container': "#instagram-feed4",
                'display_profile': true,
                'display_gallery': true,
                'display_captions': true,
                'items': 100,
                'items_per_row': 5,
                'margin': 0.5
            });
        });
    })(jQuery);
</script>

Example 5: Want to display IGTV?

Enable display_igtv. What is IGTV?

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script >
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'fcbarcelona',
                'container': "#instagram-feed5",
                'display_profile': false,
                'display_biography': false,
                'display_gallery': false,
                'display_captions': false,
                'display_igtv': true,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1 
            });
        });
    })(jQuery);
</script>

Example 6: Using GraphQL API

Use user_id to fetch data directly from Instagram GraphQL API

To find the user_id based on the username, use following URL
https://www.instagram.com/web/search/topsearch/?query=<username>

The result page will contain text starting with such structure
{"users":[{"position":0,"user":{"pk":"<user_id>","username":"<username>..."

Where <user_id> is the user_id we are looking for.

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'user_id': '2220311520',
                'container': "#instagram-feed6",
                'display_gallery': true,
                'display_captions': true,
                'styling': true,
                'items': 18,
                'items_per_row': 3,
                'margin': 1 
            });
        });
    })(jQuery);
</script>

Example 7: Don't like our styles at all?

Make your owns disabling styling

This is the html you will have (Note we have enabled profile and biography in this case).

<div class="instagram_profile">
    <img class="instagram_profile_image" src="..." alt="Instagram profile pic">
    <p class="instagram_username">@Instagram (<a href="...">@instagram</a>)</p>
    <p class="instagram_biography">....</p>
</div>
<div class="instagram_gallery">
    <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank">
        <img src="..." alt="instagram instagram image 0" />
    </a>
    ...
</div>
<div class="instagram_igtv">
    <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank">
        <img src="..." alt="instagram instagram image 0" />
    </a>
    ...
</div>

Code:

<script src="jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',
                'container': "#instagram-feed3",
                'display_profile': true,
                'display_biography': true,
                'display_gallery': true,
                'display_captions': false,
                'display_igtv': true,
                'callback': null,
                'styling': false,
                'items': 12,
            });
        });
    })(jQuery);
</script>

Example 8: Don't either like our template?

Define a callback and do not define a container

This is the format you will get.

Code:

<script type="text/javascript" src="jquery.instagramFeed.min.js"></script>
<script type="text/javascript">
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',
                'callback': function(data){
                    $('#jsonHere').html(JSON.stringify(data, null, 2));
                }
            });
        });
    })(jQuery);
</script>