Add Instagram Photos To Your Website Without API – jQuery instagramFeed

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>

 

See also  Basic CRUD Application in VUE with Firebase

 

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>

 

See also  Deno.js DenoDB Library to Perform CRUD Operations With MySQL, SQLite, MariaDB, PostgreSQL and MongoDB ORM in TypeScript Full Project For Beginners

 

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>

 

See also  Build a Animated SVG Tab Menu Bar in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

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>

 

See also  Build a 2D Brick Breaker Breakout Game in Javascript Full Project For Beginners

 

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>

 

See also  Node.js Tutorial to Print all Names of Files Present in a Directory Using fs.readdir() Method Full Project For Beginners

 

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>

 

See also  JavaScript Program to Implement a Queue Data Structure in Browser Full Project For Beginners

 

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.\n\nLearn 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
        }
      }

 

<script type="text/javascript" src="jquery.instagramFeed.min.js"></script>
<script type="text/javascript">
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',
                'get_data': true,
                'callback': function(data){
                    $('#jsonHere').html(JSON.stringify(data, null, 2));
                }
            });
        });
    })(jQuery);
</script>

 

See also  Koa.js Tutorial to Redirect to External URL (404 Error) Using Koa-router Library in Browser Full Project For Beginners

 

Download Source Code

 

Leave a Reply