Options

Attribute Type Default Description
username Required / Optional String null Instagram username from where to retrieve the feed
tag Required / Optional String null Instagram tag from where to retrieve the feed
container Required / Optional String null Selector where to place the feed. Required if get_data is false
callback Required / Optional function null Function callback. Only applies if get_data is enabled
get_data Boolean false Enables getting raw data with the callback function
display_profile Boolean true Enables displaying the profile
display_biography Boolean true Enables displaying the biography. Only for users
display_gallery Boolean true Enables displaying the gallery
display_igtv Boolean true Enables displaying the IGTV feed if available. Only for users
styling Boolean true Enables default styling
items number [Int] 8 Num of items to display in gallery. Accepted values [0-12]
margin number [Float] 0.5 Margin between items in gallery
image_size number [Int] 640 Scale of items to build gallery. Accepted values [150, 240, 320, 480, 640]. Does not apply to videos previews.
host String [url] https://www.instagram.com/ URL where to fetch the data. Useful if instagram changes CORS policy

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,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1 
            });
        });
    })(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,
                '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,
                '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,
                '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_igtv': true,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1 
            });
        });
    })(jQuery);
</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="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_igtv': true,
                'callback': null,
                'styling': false,
                'items': 12,
            });
        });
    })(jQuery);
</script>

Example 7: Don't either like our template?

Set get_data to true and define a callback

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',
                'get_data': true,
                'callback': function(data){
                    $('#jsonHere').html(JSON.stringify(data, null, 2));
                }
            });
        });
    })(jQuery);
</script>