Add Instagram Photos To Your Website Without API – jQuery instagramFeed – Coding Shiksha

Add Instagram Photos To Your Website Without API – jQuery instagramFeed – Coding Shiksha

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>

 

READ  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>

 

READ  jQuery Fetch And Display Instagram Photo Feeds By Tags - Instastory.js

 

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>

 

READ  Build a Simple Password Generator in Node.js - Coding Shiksha

 

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>

 

READ  How to Upload Files to Google Drive using Google Drive API V3

 

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>

 

READ  jQuery Plugin For Easy Youtube Video Embedding - EasyEmbed

 

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>

 

READ  Working with Asynchronous Javascript in Node.js Using Async.js - Coding Shiksha

 

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>

 

READ  Generate Custom Social Share Buttons With jQuery C Share Plugin

 

Download Source Code

 

Leave a Reply

Close Menu