Instagram API + p5js

Hi,

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
    };

    $('.feed').spectragram('getUserFeed',{
      max: 12,
      query: 'Danielshiffman',
      wrapEachWith: '<div class="photo">'
    });
  }
}

instagramData.init();

Answers

  • edited January 2018
    • According to its NPM package site: https://www.NPMjs.com/package/spectragram
    • 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=https://CDN.JSDelivr.net/npm/jquery></script>
    <script defer src=https://CDN.JSDelivr.net/npm/spectragram></script>
    
    <script defer src=https://CDN.JSDelivr.net/npm/p5></script>
    <script defer src=https://CDN.JSDelivr.net/npm/p5/lib/addons/p5.dom.min.js></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>
    <html>
      <head>
        <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=https://CDN.JSDelivr.net/npm/jquery></script>;
        <script defer src=https://CDN.JSDelivr.net/npm/spectragram></script>;
        <script type="jQuery">
          jQuery.fn.spectragram.accessData = {
          accessToken: 'mytoken',
          clientID: 'id'
      };
      $('ul').spectragram('getPopular');
      $('div').spectragram({
          query: 'converse',
          max: 14,
          size: 'big',
          wrapEachWith: '<p></p>'
      });
      console.log($);
    </script>
      </head>
      <body>
        <p></p>
     <ul></ul>
      </body>
    </html>
    
  • 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)
     * https://Forum.Processing.org/two/discussion/25961/instagram-api-p5js#Item_3
     */
    
    "use strict";
    
    jQuery.fn.spectragram.accessData = {
      accessToken: '[your-instagram-access-token]',
      clientID: '[your-instagram-application-clientID]'
    };
    
    function setup() {
      noCanvas();
    
      $(createElement('ol').elt).spectragram('getPopular');
    
      $(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.