Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save fnicastri/7dcb3399075a13ecdce64b4f1e4d958c to your computer and use it in GitHub Desktop.
Save fnicastri/7dcb3399075a13ecdce64b4f1e4d958c to your computer and use it in GitHub Desktop.
Pull Instagram Images via JavaScript

Get Instagram Images via JavaScript

Get API Info

You will need the user_id from the user. This is difficult to discover at Instagram but easy from this site http://jelled.com/instagram/lookup-user-id

I used http://jelled.com/instagram/access-token for the next few steps

You will also need an access token which ends up being difficult to obtain. Log into the account and go to their Developer Page.

Create a new "Client"

  • Application Name: Just enter "website"
  • Description: Enter whatever
  • Website: Enter your domain name. I don't think it has to exist already. But I know your requests aren't limmited to only this domain - at least as of now.
  • OAuth_redirect_uri: Enter the same website URL
  • Uncheck the "Disable Implicite OAuth"

Doing these steps should result in a Client ID

Go to this URL in the browser:

https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=[OAuth_Redirect_URI]&response_type=token

and substitute your Client ID/OAuth_Redirect_URI. If you get an error, chances are you didn't uncheck that box in the last step. You can always "edit" the client and uncheck the box to do this step over

Going to the URL will reveal your access_token. You may need any combination of client id, access token, or user id depending on how you want to access data. Do not delete the "Client" you made at Instagram.

Get a specific user, and filter on criteria (a specific hash tag in this case)

var feed = new Instafeed({
  get: 'user',
  userId: [user_id],
  accessToken: '[accessToken]',
  resolution: 'low_resolution',
  filter: function(image) {
    return image.tags.indexOf('somehashtag') >= 0;
  }
});
feed.run();

Search all of Instagram for a certain hash tag

var feed = new Instafeed({
  clientId: '[client_id]',
  get: 'tagged',
  tagName: 'newyears',
  resolution: 'low_resolution'
});
feed.run();

The HTML

You provide:

<div id="instafeed"></div>

And InstaFeed will create:

<div id="instafeed">
  <a href="..."><img src="..."></a>
  <a href="..."><img src="..."></a>
  <a href="..."><img src="..."></a>
  <a href="..."><img src="..."></a>
</div>

But this can very easily be changed in terms of what template InstaFeed will use

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment