Search code examples
javascripthtmlinstagram-api

Instagram API Javascript Example Not Working


I am trying to add a photo feed of my Instagram account using the following tutorial: http://instafeedjs.com/#user

Here is my html code with the instafeed.min.js file added:

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- link CSS and font files here -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=PT+Sans:400italic,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <script src="js/instafeed.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var userFeed = new Instafeed ({
            get: "user",
            userId: "8169627"
        });
        userFeed.run();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="my_life">       
        <h1>A look into my life</h1>
        <!-- Instragram photo feed -->
        <div id="instafeed"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



</body>
</html>

What am I missing here? The pictures are not showing up when I reload the page in my browser. Thanks in advance, Brian.


Solution

  • For some reason you have to have the userId, clientId and accessToken all specified to grab your Instagram photo feed. Below is the correct Javascript code:

    <script type="text/javascript">
            var userFeed = new Instafeed ({
                get: "user",
                userId: "8169627",
                clientId: "CLIENT_ID",
                accessToken: "ACCESS_TOKEN"
            });
            userFeed.run();
    </script>
    

    I removed my personal clientId and accessToken for security and privacy purposes.