Last weekend I had a mission: to build a player component for instaud.io that could play audio people linked to, right in Facebook news feeds. I found that there are plenty of excerpts on how to go about this, but most of them are based on outdated links to Facebook developer documentation. It bugged me greatly that Facebook didn’t bother setting up redirects to relevant pages after restructuring their docs.
Anyway, I think this would work best as a step by step guide. I’ll go through the steps I’ve had to learn about; you may want to skip over some if you’re already know what you’re doing in them.
1. Build your player in Flash
I downloaded the Adobe Flash trial for this. You’ll want to create a stage that is not much wider than 500 pixels. I went with 504px. What you’re going to be playing depends entirely on you. My purpose was simply to play audio files (MP3s), so I used
SoundChannel to control that. The audio file to be played was requested with an
If you want a more thorough introduction on how to set up a simple sound player, this video from 2008 is still a good starting point, even with the latest version of Flash (12, CS6): Build Simple Sound Player: Flash Tutorial AS 3.0
The important part about the ActionScript is using parameters. Parameters will be passed to the eventual SWF through the querystring, that is, the bold part in this URL:
In ActionScript (3), you can access these variables the following way:
To check if a parameter is actually present:
This way you can use default values for parameters:
var myParam = loaderInfo.parameters.hasOwnProperty('myParam') ? loaderInfo.parameters.myParam : 'defaultValue';
hasOwnProperty returns a boolean value (
false), this statement assigns either the value of
myParam from the querystring, or
'defaultValue' if no such parameter was specified, to the
myParam variable. It uses a ternary operator.
2. Export the SWF file and include it in your website’s assets
This is fairly straightforward. You’ll want the swf to live someplace where it’s directly accessible. I let mine live in the document root directory.
3. Add Open Graph meta tags to the page
This is where the Facebook magic happens.