See that snazzy Instagram feed outputting on our blog page? Well, it’s delivered via a tiny jquery plugin (4kb un minified) I wrote called Everyday I’m Instagrammin.
The plugin enables you to display pics by User or Hashtag, with some built in styles for caption hover effects.
Ha… yeps. While there’s certainly no shortage of Instagram plugins, Everyday places an emphasis on being a slim and simple solution – easy peasy to drop in your project on the ready-to-rock tip.
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. You can do this through Instagram’s Developer Portal, or better yet, with this handy Access Token Generator.
After adding the plugin to your project (don’t forget Jquery), your ready to get started. The plugin outputs images as list items, so first set up an unordered list with a unique class.
/*Call plugin on an unordered list class*/
<ul class="instagrammin"></ul>By default, images output with the class .everyday-img, but you can define your own like so imgClass: 'insta-img'.
Now just initialize the badboy off your class, adding your account’s clientID and accessToken then defining the number of pics with numberPics. A full options table breakdown is available on Everyday’s demo page.
$('.instagrammin').everydayImInstagrammin({
clientID: 'Your-Client-ID',
accessToken: 'Your-Access-Token',
urlType: 'InstaUser',
numberPics: '12',
imgClass: 'insta-img',
captions: 'true',
captionAlign: 'bottom',
});Of course, once your stuffs outputting as a list, some styles are required for layout. The demo files include a basic inline grid to get you going, but the layout is entirely up to you.
Out the box, Everyday gets pics from your dope feed. But, wait… there’s more! You can also display pics by hashtag via InstaType: byHash, then setting your desired hashtag hashTag: 'pigeonwisdom'.
You got it. Just set the option captions: 'True' and captions will appear via a simple hover overlay. The overlay can be easily styled with your own css and the captions can align to 'top' or 'bottom' via option captionAlign. I’m not a fan of styling with js unless it’s unavoidable, so I’ve packaged the minimum css needed for the caption hovers.
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'.
A full break down of the plugin and options can be found on Everyday’s Demo Page
Or, just snag a copy straight from Github
