//paste in the body of the page and place a div with an id of “instagram-feed”// <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/jquery.instagramFeed.js"></script> <script> $(window).on('load', function(){ $.instagramFeed({ 'username': 'flux.academy', 'container': "#instagram-feed", 'items': 5, 'margin': 1 }); }); </script> //Hide unnessesary stuf and wrap all (paste the code in the head of the page)// <style> .instagram_profile { display: none } .instagram_profile { display: none } .instagram_gallery { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap; flex-flow:row wrap; } //controll number of images per row with the "%" .instagram_gallery a { width: 33.33% !important; } .instagram_gallery a img { width: 98%!important; display: block; height: auto; } </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter