Welcome folks today in this post we will be discussing about how to add Instagram Photos to your Website without any kind of 3rd Party API. For this purpose we will be using a special jQuery library called as instagramFeed. This library allows you to embed the photos of your instagram profile straight to your website without having to use their api and provide user credentials such as access_token all that dirty little stuff. This library makes it easy for all non techies out there to do this functionality in simple steps. The screenshot of the application is given below. And also a demo video is also shown in which all the steps are shown. All the source code of the application is also there to download.

Demo of Application

Example 1: Default feed styling

<script src="jquery.instagramFeed.min.js"></script> <script> (function($){ $(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed1", 'display_profile': true, 'display_biography': true, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); }); })(jQuery); </script>

Example 2: Only want images?

<script src="jquery.instagramFeed.min.js"></script> <script> (function($){ $(window).on('load', function(){ $.instagramFeed({ 'username': 'github', 'container': "#instagram-feed2", 'display_profile': false, 'display_biography': false, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); }); })(jQuery); </script>

Example 3: Want to load more or change the display?

<script src="jquery.instagramFeed.min.js"></script> <script> (function($){ $(window).on('load', function(){ $.instagramFeed({ 'username': 'zara', 'container': "#instagram-feed3", 'display_profile': false, 'display_biography': false, 'display_gallery': true, 'callback': null, 'styling': true, 'items': 12, 'items_per_row': 6, 'margin': 0.25 }); }); })(jQuery); </script>

Example 4: Want to fetch a TAG?

<script src="jquery.instagramFeed.min.js"></script> <script > (function($){ $(window).on('load', function(){ $.instagramFeed({ 'tag': 'paradise', 'container': "#instagram-feed4", 'display_profile': true, 'display_gallery': true, 'items': 100, 'items_per_row': 5, 'margin': 0.5 }); }); })(jQuery); </script>

Example 5: Want to display IGTV?

<script src="jquery.instagramFeed.min.js"></script> <script > (function($){ $(window).on('load', function(){ $.instagramFeed({ 'username': 'fcbarcelona', 'container': "#instagram-feed5", 'display_profile': false, 'display_biography': false, 'display_gallery': false, 'display_igtv': true, 'callback': null, 'styling': true, 'items': 8, 'items_per_row': 4, 'margin': 1 }); }); })(jQuery); </script>

Example 6: Don’t like our styles at all?

<div class="instagram_profile"> <img class="instagram_profile_image" src="..." alt="Instagram profile pic"> <p class="instagram_username">@Instagram (<a href="...">@instagram</a>)</p> <p class="instagram_biography">....</p> </div> <div class="instagram_gallery"> <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank"> <img src="..." alt="instagram instagram image 0" /> </a> ... </div> <div class="instagram_igtv"> <a href="https://www.instagram.com/p/Bh-P3IoDxyB" rel="noopener" target="_blank"> <img src="..." alt="instagram instagram image 0" /> </a> ... </div>

<script src="jquery.instagramFeed.min.js"></script> <script> (function($){ $(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed3", 'display_profile': true, 'display_biography': true, 'display_gallery': true, 'display_igtv': true, 'callback': null, 'styling': false, 'items': 12, }); }); })(jQuery); </script>

Example 7: Don’t either like our template?

{ "biography": "Bringing you closer to the people and things you love. ❤️", "blocked_by_viewer": false, "country_block": false, "external_url": "https://help.instagram.com/", "external_url_linkshimmed": "https://l.instagram.com/?u=https%3A%2F%2Fhelp.instagram.com%2F&e=ATOc-9OVmVpf9a6fwm_s5dm4pzDQHdKmLSGxzQsjX7Ru28Nj04QscSZ5Rkvdyd8YXDqbZbJS", "edge_followed_by": { "count": 311339554 }, "followed_by_viewer": false, "edge_follow": { "count": 222 }, "follows_viewer": false, "full_name": "Instagram", "has_channel": false, "has_blocked_viewer": false, "highlight_reel_count": 6, "has_requested_viewer": false, "id": "25025320", "is_business_account": false, "is_joined_recently": false, "business_category_name": null, "is_private": false, "is_verified": true, "edge_mutual_followed_by": { "count": 0, "edges": [] }, "profile_pic_url": "https://instagram.fdel12-1.fna.fbcdn.net/vp/c4812dcfa754429d97d0e47769ef9318/5E03515D/t51.2885-19/s150x150/59381178_2348911458724961_5863612957363011584_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "profile_pic_url_hd": "https://instagram.fdel12-1.fna.fbcdn.net/vp/ed325fba7f2d91b16c23ef47ab122891/5DEEE725/t51.2885-19/s320x320/59381178_2348911458724961_5863612957363011584_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "requested_by_viewer": false, "username": "instagram", "connected_fb_page": null, "edge_felix_video_timeline": { "count": 176, "page_info": { "has_next_page": true, "end_cursor": "QVFEazVpZXVjQVNJOHVpVjctd1JEM1l4TE14MHJUdUpKeE4ydTc3ZENjZHhvUzdKSU5obUN1UmFlMTRNa0diWnRoX0xuQks1R1FUdU9DYmtuYWRIWWgzNA==" }, "edges": [ { "node": { "__typename": "GraphVideo", "id": "2117702805707584453", "edge_media_to_caption": { "edges": [ { "node": { "text": "Falconry is an all-consuming profession – just ask modern-day falconer Adam Baz (@hawkonhand). Whether he’s training Nico the Eurasian eagle-owl at home or flying Fox, the Harris’ hawk, around towering Los Angeles skyscrapers, Adam is on the ⏰ 24/7.



Learn more about Adam’s experience as a falconer and go along for an evening flight in the sunny California hills (hawk POV-style 😉). #HiddenGems 💎 ✨" } } ] }, "shortcode": "B1jl3tSDHPF", "edge_media_to_comment": { "count": 3816 }, "comments_disabled": false, "taken_at_timestamp": 1566670140, "dimensions": { "height": 1680, "width": 1080 }, "display_url": "https://instagram.fdel12-1.fna.fbcdn.net/vp/0010b31aea3fe4faf178bbe44b3f1031/5D690DCC/t51.2885-15/e35/p1080x1080/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "edge_liked_by": { "count": 481907 }, "edge_media_preview_like": { "count": 481907 }, "location": null, "gating_info": null, "media_preview": "ABsqvySGZtw+ZV5wDj9Mc/4UscoVdoOcf5/nUECBlLE7R79/X8KqyMC2E6Dj8uv4elYNPdkO6SZoG4LZ28fzphuiOP61SV9y7sn5f89/5VUMrE5AGKLE6mhHI6W397BwMH36fTP6VWX5pfn5/LGff/AVlh2HAJAPYGnLMYyCORnpW/Lvqa32XY2rgs4IJU4HX0J/mO1UMuvBB49qtSSK8fyfLlcDHYjvWabl+5Oala77jaKpqxaW32liCduKrGpIjjP4Vb2EjRaT7OAq7W25HPPtn/D0qNWbHG39Krv90VNWbDmsf//Z", "owner": { "id": "25025320", "username": "instagram" }, "thumbnail_src": "https://instagram.fdel12-1.fna.fbcdn.net/vp/222f5cbe5f68fe4abb0a471a211019b2/5D68A2EC/t51.2885-15/sh0.08/e35/c0.625.2250.2250a/s640x640/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "thumbnail_resources": [ { "src": "https://instagram.fdel12-1.fna.fbcdn.net/vp/f00dd618c227e84de2e8b8b821481dbe/5D688CCE/t51.2885-15/e35/p150x150/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "config_width": 150, "config_height": 233 }, { "src": "https://instagram.fdel12-1.fna.fbcdn.net/vp/c656f53653a3b77aa1416d363cac9494/5D68B204/t51.2885-15/e35/p240x240/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "config_width": 240, "config_height": 373 }, { "src": "https://instagram.fdel12-1.fna.fbcdn.net/vp/9cb54e997cba5cc6c14868baf1132c5d/5D68F0FE/t51.2885-15/e35/p320x320/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "config_width": 320, "config_height": 497 }, { "src": "https://instagram.fdel12-1.fna.fbcdn.net/vp/c06ba55fc571dfdd724b257c93de4252/5D688FA4/t51.2885-15/e35/p480x480/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "config_width": 480, "config_height": 746 }, { "src": "https://instagram.fdel12-1.fna.fbcdn.net/vp/db3c0701e3436abca26f56579ef93a3d/5D68EF29/t51.2885-15/sh0.08/e35/p640x640/66708798_379985906232257_2849883943676349836_n.jpg?_nc_ht=instagram.fdel12-1.fna.fbcdn.net", "config_width": 640, "config_height": 995 } ], "is_video": true, "felix_profile_grid_crop": null, "encoding_status": null, "is_published": true, "product_type": "igtv", "title": "#HiddenGems: Modern Falconry with @hawkonhand 🦅", "video_duration": 261.306, "video_view_count": 3044570 } }