In this tutorial i will tell you how to get the Instagram Images with the using of the instagram api.
IN the below tutorial i am using the jquery to get the images from the instagram api.
With using jquery it is easy to use in the Shopify Website also. So without using an app we can retrieve the images from the api.
For the use of the api you will need to get the token key that can be retrieve from the instagram developers site by creating the instagram app.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="container"> <h2 class="section-head">INSTAGRAM</h2> <div class="inst-grid"> <script> var token = '238855795.d7a0c49.90a67dd34b1e4ddba5cefb69485ec380', // get from the instagram app userid = 'd7a0c49e51f6471b88b631d040f6cbbc', num_photos = 10; // to show how many photos you want to display $.ajax({ url: 'https://api.instagram.com/v1/users/self/media/recent/?access_token=238855795.d7a0c49.90a67dd34b1e4ddba5cefb69485ec380', dataType: 'jsonp', type: 'GET', data: {access_token: token, count: num_photos}, success: function(data){ console.log(data); for( x in data.data ){ $('ul#rudr_instafeed').append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>'); // data.data[x].images.low_resolution.url - URL of image, 306х306 } }, error: function(data){ console.log(data); } }); </script> <ul id="rudr_instafeed"></ul> // here will display all images. </div> </div> |
Use above code just to replace your token with the token that you get in your instagram app.
Thanks..
