Getcha Instagram on Ya'll

Every Day I'm Instagrammin

A little Jquery plugin (4kb - unminified) that displays Instagram pics by User or HashTag, with some caption options and styles thrown in.

Download from Github

Wait, Another Freakin' Instagram Plugin?

Ha... yeps. Of course there is no shortage a handy Instagram plugins, so Every Day I'm Instagrammin' places an emphasis on being a slim and simple solution, easy peasy to drop in your project on the ready-to-rock tip.

How's It Work Then?

Since Instagram's API uses the OAUTH 2.0 protocol, you'll need to snag the client ID for you account and generate an Access Token.

Not sure how?

Well, no worries homie - I gotcha. Check this step by step right here

Let's Set It Up

The plugin outputs your feed's images as list items, so first set up an unordered list with a unique class. By default, the image output with the class name .everyday-img, but you can define your own image class like so imgClass: 'insta-img'. The actual list items output with the class everyday-item.

/*Call plugin on an unordered list class*/
<ul class="instagrammin"></ul>

Now just initialize it off your class, adding your account's clientID and Access Token. You can also define the number of pics,

$('.instagrammin').everydayImInstagrammin({
  clientID: 'Your-Client-ID',
  accessToken: 'Your-Access-Token',
  urlType: InstaUser,
  numberPics: '12',
  imgClass: 'insta-img',
  captions: 'true',
  captionAlign: 'bottom',
});

Grid Styles

Of course, once you have your stuffs outputting as a list, some styles are required for layout. The demo files include a basic inline grid to getcha going, but you can do whatever you do.

By You or By Tag

By default, Every Day drops pics from your dope-ass feed. But, wait... there's more! Drop pics by hashtag by via option InstaType: byHash, then set your desired hashtag hashTag: 'httpster'.

How About Some Captions?

Gotcha covered. Just set the option captions: 'True' and the pic's captions will appear via a simple hover overlay. The overlay can be styled with css and the caption themselves can be aligned Top or Bottom via captionAlign: 'top' and captionAlign: 'bottom'. Not a fan of using js for styling unless it's unavoidable, so I've included the minimum styles required for the caption hovers. Of course, you can easily alter to best suit your use.

Anything Else

Um... how about a sexy-ass sequence fade in, one image at a time? Just set the option sequenceFadeIn: 'true' then define the duration sequenceDuration: '250'

Options / Defaults

Option Description Default Value
clientID Instagram api client ID null
accessToken Your instagram accessToken null
InstaType Show Pics by byUser or byHash byUser
hashTag Selects hashtag for byHash null
numberPics Number of pics to show 12
imgClass Class for images 'everday-img'
captions Show captions on hover True
captionsAlign Align captions to 'top' or 'bottom' bottom
sequenceFadeIn Fades images in sequentially True
sequenceDuration Duration of sequence fade ins 220

Getcha Self a Slice

Go on a snag up Every Day I'm Instagramin'

Download from Github

Questions? Comments

Wanna tell me why the code is grimy and I'm a retard?
Then hit me up: @StephenScaff

Getting Your Instagram
User ID and Access Token

Using a Niffty Web App

The easiest way to snag you Instagram account's User ID and Access Token is via this:

Instagram access token generator

Simply login to Instagram, then use toke and id generator:

Get Your Token

Or, Create Your Own Instagram Client

  1. Head on over to Instagram Developers

    Go to Instagram's Developer's site at: http://instagram.com/developer/.

    Login with your account info then complete the Developer's signup prompt, providing your site and a brief description of what you want to build with their API.

  2. Register a New Client

    Click the Register Your Application to land on the Manage Clients page, then Register a New Client.

    Here you'll be prompted to fill out some info on your custom app:

    Application Name: Give you app a descriptive name, such as [Insert Your Name]'s Dope Photo Feed. Make sure not to include the Instagram name as it would violate their API guidelines.
    Description: Offer a brief description of you app
    Website: The main website your feed will appear on.
    OAuth redirect_uri: You could simply use your your main url, or if you're the paranoid type, using http://localhost ensures you're private Instagram info is passed only to your computer - just make sure to uncheck the Disable implicit OAuth for this method to work.

    Save that badboy and you'll be provided with you Client ID

  3. Getcha Access Token

    Paste the following url into your web browser. https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=http://localhost&response_type=token Replacing CLIENT_ID with the one you just obtained from the last step.

    Hit enter to be connected to Instagram's servers, then grant Instagram access to the client you just registered. Instagram will redirect you to localhost and your shiny new access token will be appended to the url after localhost/#access_token=

    Again though, the Web App approach above is far less painless.