Instagram Javascript Badge
Recently I discovered Instagram. I love how you can take pictures, apply filters and share them really easily. It’s a service I will be using a lot more of.
I want to be able to show my lovely, arty, filtered pictures on my blog. A quick Google round and I couldn’t find a Javascript widget or badge to stick in my tumblr template so I decided to make my own.
Presenting the Instagram Javascript badge
Here is where the hack comes in.
Instagram is a very new service and doesn’t even have public profiles yet, let alone an API or a feed. It does however, post to services that do, namely Flickr. So I took the code for the flickr badge, altered it slightly, gave it the Instagram design treatment and hey presto.
You can see a working example of the badge in my sidebar or see the picture below (if the sidebar one is not working).
When Instagram posts to flickr on your behalf it tags it, so the Javascript can pull all the pictures from Flickr tagged instagramapp. Easy!
How to use it
- Post your pictures to Flickr
- Put the code in the gist into your template where you want the badge to appear
- Change the user from your_user_id to your own. (You can find your flickr user id if you go here and its on the right under Useful Values)
Fonts & Design
I have included styles for Chunk Five, a font used on the Instagram homepage. To get these working you will need to get the font kit from Font Squirrel and host them somewhere. I use Dropbox and reference them through the public link
Uh oh, problemo
There are a couple of problems with the badge. Firstly the pictures link to flickr, not to Instagram. Because it’s piggybacking on the flickr API this cannot to fixed until Instagram have an API or feed and the badge uses that instead.
Secondly the Chunk Five font does not work in FIrefox because of a security issue with linking to font files, Boo!
Feel free to use the badge on your own blogs, if you run into any problems installing it I would be happy to help. Get in contact through twitter or leave a comment.
Update
You can get Font Squirrel to embed the Chunk Five font into the CSS using Base64 encoding so it displays correctly in Firefox. Warning - It massively bloats your stylesheet, not good for mobile browsers!
