Instagram API + p5js


I've looked the forum for a still working explanation but found none. after some searching I found a link to this example to get a token to talk to Instagram and a accompanying code to test it. The only thing is the code is a jquery example. Is it still possible to connect via P5js with a oauth token? And get data from Instagram. And mybe somebody who knows an example page so I can see how it works and get the hang of things? Or how I can read JSON parts of my instagram feed.

Because Jquery is a javascript frame work I thought why on try it out and see what happens.. Which ofcourse got me an error which console logged as

sketch.js:7 Uncaught ReferenceError: $ is not defined
    at Object.init (sketch.js:7)
    at sketch.js:20
init @ sketch.js:7
(anonymous) @ sketch.js:20

So probably the dollar signs is something that's not working in the browser;

var instagramData = {
  instaToken: 'mytoken',
  instaID: 'myid',

  init: function(){
    $.fn.spectragram.accesData = {
      accessToken: this.instaToken,
      clientID: this.instaID

      max: 12,
      query: 'Danielshiffman',
      wrapEachWith: '<div class="photo">'



  • edited January 2018
    • According to its NPM package site:
    • SpectragramJS is a jQuery addon/plugin, just like p5.dom is as well in relation to p5.js.
    • Therefore, before loading it, jQuery needs to be already present.
    • Below's my attempt for an "index.html" template which loads them both; plus p5.js & p5.dom.
    <!DOCTYPE html>
    <meta charset=utf-8>
    <meta name=viewport content=width=device-width,initial-scale=1>
    <script defer src=></script>
    <script defer src=></script>
    <script defer src=></script>
    <script defer src=></script>
    <script defer src=sketch.js></script>
  • Hi I tried to simplify things by just trying the Jquery example and later adding the p5js stuff. Taking it step by step.

    Now I did the jQuery example, but I get nothing no errors even. So I think the code is formatted correctly, but the console.log() (that I learned from p5js) doesn't output me anything to see what is working in the back ground. I queried everything from $ to 'div' to getPopular.

    Is there something I'm overseeing as newbie? :\">

    <meta charset="utf-8"/>
    <!DOCTYPE html>
        <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
        <style> body {padding: 0; margin: 0;} </style>
        <script defer src=></script>;
        <script defer src=></script>;
        <script type="jQuery">
          jQuery.fn.spectragram.accessData = {
          accessToken: 'mytoken',
          clientID: 'id'
          query: 'converse',
          max: 14,
          size: 'big',
          wrapEachWith: '<p></p>'
  • edited January 2018 Answer ✓
    • Your "index.html" is a little hard to read b/c it isn't indented well.
    • Dunno whether there are any actual errors; but it's got at least some inconsistencies.
    • A lil' example: <!DOCTYPE html> isn't placed at the 1st line.
    • Browsers are very forgiving; but it's risky not to follow the HTML5's intended strict rules.
    • Also, avoid having actual JS code inside an ".html" file.
    • Rather, place code in separate ".js" files for much better organization.
    • As in my own "index.html" template, it expects a file named "sketch.js" for the actual JS code:
      <script defer src=sketch.js></script>
    • At least for now, I advise you to use my own "index.html" template w/o any changes to it; b/c I've already tested it.
    • I've made an attempt to write code for the "sketch.js" file.
    • However, given I don't have any accessToken nor clientID, it's just a shot in the dark.

     * Instagram (v1.0)
     * GoToLoop (2018-Jan-17)
    "use strict";
    jQuery.fn.spectragram.accessData = {
      accessToken: '[your-instagram-access-token]',
      clientID: '[your-instagram-application-clientID]'
    function setup() {
      $(createDiv('').elt).spectragram('getRecentTagged', {
        query: 'converse',
        max: 14,
        size: 'big',
        wrapEachWith: '<p></p>',
        complete: () => print('Done!')
  • edited January 2018

    This works, although no images are shown. But thats beyond the scope of this question. I get the response from the console.

    Error: Spectragram.js - Error: the tag converse does not have results.

    So there is probably some authentication thingy's floating in the air. I asked the spectagram github for more information on this. will report back if/when fixed.

    Thanks again @GoToLoop

Sign In or Register to comment.