avatar

Michaël Duerinckx

 

Posts Tagged ‘Open Graph’

Embedding a player on Facebook: A guide

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 Sound and SoundChannel to control that. The audio file to be played was requested with an URLRequest object.

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

Using parameters

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: http://example.com/my-player.swf?param=value&otherparam=value

In ActionScript (3), you can access these variables the following way:

loaderInfo.parameters.parameterName

To check if a parameter is actually present:

loaderInfo.parameters.hasOwnProperty('parameterName')

This way you can use default values for parameters:

var myParam = loaderInfo.parameters.hasOwnProperty('myParam') ?
    loaderInfo.parameters.myParam :
    'defaultValue';

Since hasOwnProperty returns a boolean value (true or 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.

(more…)