Options

Attribute Type Default Description
username Required / Optional String null Instagram username from where to retrieve the feed. Required if tag is not defined.
tag Required / Optional String null Instagram tag from where to retrieve the feed. Required if username is not defined.
container Required / Optional String null Selector where to place the feed. Required if callback is not defined.
callback Required / Optional function null Callback function with all the data fetched from instagram. Required if container is not defined. If container is defined this function is called before rendering (an on ready event)
display_profile Boolean true Enables displaying the profile
display_biography Boolean true Enables displaying the biography. Not compatible when loading a tag feed
display_gallery Boolean true Enables displaying the gallery
display_igtv Boolean false Enables displaying the IGTV feed if available. Not compatible when loading a tag feed
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
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,
            '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,
            '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,
            '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,
            '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_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_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,
            'get_raw_json': false,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1
        });
    });
</script>