Instagram jQuery Search not showing anything

Question

I'm a newbie programmer, and I've been following an Instagram search tutorial I found online. Inspired by it, I've decided to try building it myself to learn jQuery. Problem is, I can't get the example to work. I can display the default 'cat' search, but when I try searching through the web form, I get no results—no errors, nothing. I'm really stuck and feel like I’m missing something simple. Any help would be greatly appreciated!

Here is js code:

var Instagram = {};

(function () {
    function toScreen(photos) {
        $.each(photos.data, function (index, photo) {
            photo = "<div class='photo'>" +
                "<a href='" + photo.link + "' target='_blank'>" +
                "<img class='main' src='" + photo.images.low_resolution.url + "' width='250'  height='250' />" +
                "</a>" +
                "<img class='avatar' width='40' height='40' src='" + photo.user.profile_picture + "' />" +
                "<span class='heart'><strong>" + photo.likes.count + "</strong></span>" +
                "</div>";
            $('div#photos-wrap').prepend(photo);
        });
    }

    function search(tag) {
        var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=XXXXXXXXXXXXXXXXXX"
        $.getJSON(url, toScreen);
    }

    $(function () {
        $('form#search button').click(function () {
            var tag = $('input.search-tag').val();
            Instagram.search(tag);
        });
        Instagram.search('cats');
    });
    Instagram.search = search;
})();

and the HTML

    <!DOCTYPE html>
    <html>
    <head>
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'  type='text/javascript' charset='utf-8'></script><script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
    </head>



    <body>
    <div id='photos-wrap'>
      <form id='search'>
       <button type='submit' id='search-button' tabindex='2'>
         <span class='button-content'>Search</span>
      </button>
     <div class='search-wrap'>
       <input class='search-tag' type='text' tabindex='1' />
      </div>
   </form>
  </div>
     </body>
     </html>

rajatha · Answer 1 · Jun 16, 2022

The latest changes in Instagram has affected almost everyone using Instagram Feed on their website. There’s no CMS or website builder which can avoid the risk: WordPress, Shopify, Joomla, and other – if there’s any kind of Instagram integration into your website, it may have issues.

There’s good news for Instashow users, though! You can save the trouble and address support right away. We already have a solution for you, so don’t waste your time! And in case you have to deal with the problem on your own, we have come up with a list of main reasons why your Instagram feed is not working and provided simple and doable instructions for each case.