To become a programmer you need to practice a lot. To program you need data. To get inspired you need hobbies. After Movies and Books, I got to a passion of a lot of people: Music. I started a new Facebook App: Friends Jukebox. This blog post is just a quick overview what it does and some basics on the techniques used.

In a nutshell

Friends Jukebox queries your friends' favorite music artists and links to information and music videos of those artists. Data is cached and the subject is versatile so functionality can be amplified. This also lays in a design principle I mentioned some time ago: stick to the bare minimum and expand from there


APIs - 1a. Facebook login and FQL

First of all it uses the new Facebook PHP SDK 3.0. See this great article with instructions how to use it.

When logging in with Facebook, the user needs to grant this App permissions (post wall and email are for future use). The advanced permissions user_likes and friends_likes are needed to query the music taste of your friends and you.

Then it makes a big FQL query to get all the artists your friends like and presents it per friend, in alphabetical order. It also calculates the "likes" per artist and presents that in a cloud tag way: the artist with more likes has a bigger font-size. This way you visually see what artists are most popular.

Note that not all friends are included, only the ones that "liked" one or more artists. I think I got a rate of 50% of my friends, with 1 up till 40 artists, so even with few friends, you might get some outputs, and with a lot of musical engaged friends, you might get a very large output :)

APIs - 2.

Each artist then can be clicked. When doing so, an overlay (fancybox) loads with more information about the artist (if found). I use the api for that. This is rather simple: parse the XML output you get when querying this web service.

APIs - 3. Youtube

There are also two links in the artist's info: one that goes of to, the first one, more interestingly, will show 6 youtube videos which I get from querying the gdata (youtube) API. I didn't re-invent the wheel for this.

With a bit of CSS, I put a share link on top of each video. This button, when clicked will invoke a call to Facebook's new Send Dialog. This allows for easy sharing of music videos with your friends.

APIs - 1b. Facebook plugins

There are more Facebook widgets integrated like the comment box, the like button, the invite friends dialog. See Facebook's developer documentation for more info. Those plugins are awesome, because they are easy to implement, yet they provide you with a powerful way to involve your users.

Feel free to try !

So if you like the idea, and you are curious what music your friends like to listen to, give it a try:


By the way, a similar feature can be found at you can check out what movies your friends like. See this post for more info (there JS is used, Friends Jukebox is mainly PHP).


Share the word or join..

Did you like this post? Tell your friends via the social media buttons on this site...

You can also join my Facebook group or get a weekly Mailchimp newsletter to keep up with my new blog posts. You can subscribe in the sidebar of this site ...

Ah.. and I am also at twitter: @bbelderbos

Bob Belderbos

Software Developer, Pythonista, Data Geek, Student of Life. About me