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

Example 1: Default feed styling

Don't like it? Check other examples!

Code:
<script src="dist/InstagramFeed.min.js"></script>
<script>
    (function(){
        new InstagramFeed({
            'username': 'instagram',
            'container': document.getElementById("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
        });
    })();
</script>

Example 2: Only want images?

Disable display_profile and display_biography

Code:
<script src="dist/InstagramFeed.min.js"></script>
<script>
    (function(){
        new InstagramFeed({
            'username': 'github',
            'container': document.getElementById("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 
        });
    })();
</script>

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

Change items, items_per_row and margin

Code:
<script src="dist/InstagramFeed.min.js"></script>
<script>
    (function(){
        new InstagramFeed({
            'username': 'zara',
            'container': document.getElementById("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
        });
    })();
</script>

Example 4: Want to fetch a TAG?

Use tag instead of username.

Code:
<script src="dist/InstagramFeed.min.js"></script>
<script >
    (function(){
        new InstagramFeed({
            'tag': 'paradise',
            'container': document.getElementById("instagram-feed4"),
            'display_profile': true,
            'display_gallery': true,
            'display_captions': true,
            'items': 100,
            'items_per_row': 5,
            'margin': 0.5
        });
    })();
</script>

Example 5: Want to display IGTV?

Enable display_igtv. What is IGTV?

Code:
<script src="dist/InstagramFeed.min.js"></script>
<script>
    (function(){
        new InstagramFeed({
            'username': 'fcbarcelona',
            'container': document.getElementById("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 
        });
    })();
</script>

Example 6: 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="dist/InstagramFeed.min.js"></script>
<script>
    (function(){
        new InstagramFeed({
            'username': 'instagram',
            'container': document.getElementById("instagram-feed3"),
            'display_profile': true,
            'display_biography': true,
            'display_gallery': true,
            'display_captions': false,
            'display_igtv': true,
            'callback': null,
            'styling': false,
            'items': 12,
        });
    })();
</script>

Example 7: Don't either like our template?

Define a callback to get all the data fetched

This is the format you will get.


Code:
<script type="text/javascript" src="dist/InstagramFeed.min.js"></script>
<script type="text/javascript">
    (function(){
        new InstagramFeed({
            'username': 'instagram',
            'callback': function(data){
                document.getElementById("jsonHere").innerHTML = JSON.stringify(data, null, 2);
            }
        });
    })();
</script>

Example 8: AMD (Asynchronous module definition)

Code:

<script>
    // Example for RequireJS
    require.config({
        paths:{
            'InstagramFeed': '../dist/InstagramFeed.min',
        }
    });

    require(["InstagramFeed"], function(InstagramFeed){
        new InstagramFeed({
            'username': 'instagram',
            'container': document.getElementById("instagram-feed1"),
            'display_profile': true,
            'display_biography': true,
            'display_gallery': true,
            'display_captions': true,
            'get_raw_json': false,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1
        });
    });
</script>