Don't like it? Check other examples!
<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,
'lazy_load': true
});
});
})(jQuery);
</script>
Disable display_profile and display_biography
<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>
Change items, items_per_row and margin
<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>
Use tag instead of username.
<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>
Enable display_igtv. What is IGTV?
<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>
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>
<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>
Define a callback and do not define a container
This is the format you will get.