Hi @Reply, thanks a lot for your update. Ok, I checked out a free solution for you, that does require a little custom code and setup, but here are the instructions. Just follow this step by step, and you should be good to go…
Step 1
Go to http://embedagram.com and click the “Lets get started” link:
Step 2
From the three options listed, select the jQuery plugin option:
Step 3
At this point, you will be asked to authorize embedagram.com to your instagram account, so that the script has access to your image by your instagram account ID. After you authorize this, you will be taken to a screen that shows you your account ID, you will need this so just make a note of the account ID for use in a later step:
Step 4
Copy the following code to your Custom Code section of your site settings. You will need to add some custom styling to the HEAD to style the DIVs that will hold the images. You can style this anyway you want, I have styled this with very basic styling on the images, so that they float left and are display inline block. After that, you will need to paste in the script part also, and that I have already created, so you just need to copy and paste this stuff as shown below.
In the HEAD panel of Custom Code, put the following:
<style>
.instagram div {
display: inline-block;
float: left;
}
</style>
Next, paste in the script for the embedagram jQuery plugin, into the Before Body panel of your site:
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').embedagram({
instagram_id: 1440618534,
thumb_width: 313.33,
wrap_tag: 'div'
});
});
</script>
<script>
/*
* embedagram - embed your instagram photos
* http://embedagram.com/plugin.php
*
* Copyright (c) 2011 Matthew Hokanson (http://h0ke.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
*/
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0($){$.q.h({7:0(d){1 e={8:-v,4:u,2:\'n\',3:\'m\',5:l,f:0(){6 j},};1 d=$.h(e,d);6 g.k(0(){1 o=d;1 b=$(g);1 c="p://7.i/e/r/"+o.8+"/?s=?";c+="&4="+o.4+"&2="+o.2;c+="&5="+o.5+"&3="+o.3;$.t(c,0(a){b.9(a.9);o.f.w(b)});6 b})}})})(x);',34,34,'function|var|wrap_tag|link_type|thumb_width|limit|return|embedagram|instagram_id|html||||||success|this|extend|com|true|each|20|web|li||http|fn|plugin|callback|getJSON|100|999|apply|jQuery'.split('|'),0,{}))
</script>
A couple of notes on the code… in the script that shows “thumb_width”, instagram provides images of width 150, 306, and 612. depending on the set width, embedagram serves an appropriate size. defaults to 100, but in my example, I am using 313.33px (I am using a container that is 940px wide, I want three images per row when shown on desktop mode, thus the image width of 313.33px. You can play around with this, to see how it works…
After updating your HEAD and Before Body panels of the Custom Code section in Site Settings, then make sure to save changes.
Step 5
The next step is to go into design mode in your site, and create a section, container or div block on your site, and then give that element a class name of “instagram”, like in the example below. In my example, I put first a container on the page, then I dragged in a div to the container and gave it a class of “Instagram”
Make sure all your page changes are auto-saved (with the green checkmark) 
Step 6
Now all changes should be saved, your custom code entered into the Site Settings and you are ready to publish. Publish the site, and then see how it looks !
You can also get more info from the Embedagram site, on the jQuery plugin, for more options to use in your jQuery call…
If you need a primer in jQuery, go to Catalog Home | Codecademy and take the free course, (it is really good. I recommend it to ALL Webflowies…) if you take this course, you will know everything you need to know, about using jQuery on Webflow sites (or any site for that matter).
Try this out, see how it works for you… As I mentioned, you can do your own custom styling of the images, and put that custom styling as I showed in the HEAD section. What I like to do, is to create a blank page in my site, then I get create some sample placeholder images with same size as the thumbnail width (306px) and then do all my styling on the placeholder images (you can use any images for this, uploaded to the blank page on your site). After I have finished my styling, I publish the site and blank page, and I view the source of the page, and open up the css that the page is linked to, and I copy all of the settings of the image style class I used to style the image. I paste those css properties into the HEAD section for my Instagram class:
<style>
.instagram div {
display: inline-block;
float: left;
// paste more css properties here .....
}
</style>
I hope this is what you are looking for, it will always show your latest instagram photos in your instagram account, and all image layout will be responsive, and be styled as you wish.
I really hope this helps, Let me know if you have any questions… I am really not a big instagram user anymore, so maybe other instagram users may have some good tips or tricks for you also… Cheers !
