› ›

Instagram API + p5js

LayzfatLayzfat
edited January 2018 in p5.js Library Questions

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();
Tagged:

Best Answer

Answers

  • GoToLoopGoToLoop
    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>
  • LayzfatLayzfat

    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>
  • GoToLoopGoToLoop
    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!')
  });
}
  • LayzfatLayzfat
    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

  • GoToLoopGoToLoop

    https://GitHub.com/adrianengine/jquery-spectragram/issues/61

Sign In or Register to comment.