Add instagram feed to your webflow

PHOTO EMBED

Tue Jan 25 2022 10:55:06 GMT+0000 (UTC)

Saved by @kevinazoulay #javascript #css

//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>
content_copyCOPY