How to add Instagram feed to Shopify store without Shopify Apps, Instagram API, Instagram Token
You don’t need any Shopify Apps or Instagram access token you can still add an Instagram feed from any user to your Shopify store with a responsive, highly-customizable the script. Follow these steps to add Instagram feed.
Step 1:
Create a container element to display the Instagram photos.
1 | <div id="shopify-instagram-feed" class="shopify_instagram_feed"></div> |
Step 2:
Include the script after loading jQuery library.
1 | {{ '//cdn.shopify.com/s/files/1/0382/4185/files/shopifytips-instagram-feed.js' | script_tag }} |
Step 3:
Call the function on the container element and specify the username whose photos you want to fetch.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> (function($){ $(window).on('load', function(){ $.instagramFeed({ 'username': 'huynhmaianhkiet', //Username of Instagram 'container': "#shopify-instagram-feed", 'display_profile': false, //Decide whether to display user's profile 'display_biography': false, //Decide whether to display user's biography 'display_gallery': true, //Decide whether to display Instagram photos as a gallery 'get_raw_json': false, 'callback': null, 'styling': true, 'items': 12, //Set the maximum number of photos to display - Maximum is 12 'items_per_row': 4, //Set the maximum number of photos per row 'margin': 1 //Set the space between photos }); }); })(jQuery); </script> |
Note:
- You just can retrieve maximum 12 latest photos
- The account you want to fetch that must a public Instagram account
Man, really nice.
Thank you so much!
Got yourself a fan.
very helpful – thank you!
Hi
this code work perfectly.
but given for error.
you can see your demo not working now
Hi Patel,
Yes, you are right. Instagram has changed so this way is not working. I’m so sorry about that.
its not working it give error
Access to XMLHttpRequest at ‘https://www.instagram.com/’ from origin ‘https://shop.myshopify.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.