nickf on code

Javascript and code nerdity

A SoundCloud Plugin for Jekyll/Octopress

A little while ago, I started working at SoundCloud — it’s a really fun place to work, and very exciting given the scale and growth of the platform there. They’re so nice, they even put up an interview with me!

I’m working across the HTML5 projects which SoundCloud are producing, including the mobile site and the widget. The widget is the player which users can embed into their websites or blogs, and just recently we’ve released the new version which is entirely based on HTML5. I should mention that very little of the code was produced by me, since it was done before I started, but now I’m working on bugfixes and further improvements.

Anyway, the key point here is that it’s designed to be embedded on blogs. It’s not very difficult to get the code to embed it normally — just go to any track or user or anything, and click on “share” — but since I’m now on a new blogging engine which is specifically marketed as a “hacker’s” blog, I thought I’d put together a little plugin to make it even easier for those people using Jekyll or Octopress.

It’s actually trivially simple in the end, but the source is on github. It’s currently buried within my blog’s repo, but maybe soon I’ll move it to its own repository.

Using it is very simple too. The only downside currenly is that it requires you to know the relevant id if you want to embed a group, playlist, track or app widget. This information can be copied from the HTML which the SoundCloud site gives you, but it’s not immediately obvious. Perhaps I’ll see what we can do about that… The good news is that if you want a widget for a user’s tracks, or their favorite tracks, then you can just use their username in lieu of an id.


Here’s the most basic usage: a resource type (users, favorites, groups, playlists, apps, or tracks), and an id.

{% soundcloud favorites 6431392 %}

There are more options, as described in the widget documentation.

{% soundcloud groups 438 color=282828 show_artwork=true %}
{% soundcloud playlists 162602 show_comments=false show_playcount=false show_user=false show_artwork=false %}
{% soundcloud tracks 26654081 %}

So there you have it. I’ll write more soon about the sidebar plugin, and perhaps I may have organised my code better by then and you’ll be able to get these plugins for yourself. Who knows??