Dirty Secretz

I’ve been getting a few questions via Facebook and Twitter about how we got our SoundCloud playlists into our Facebook page. So rather than do the same reply to everyone, we thought we’d show you on here, so prepare for some high grade geekery (actually its not that hard)….

UPDATE: We’ve now got an easy code generator so you don’t have to worry about all this complicated stuff!! Check it out here

1. First thing you are going to want to install on your Facebook page is the Facebook Static FBML application. Go to this page and click on Add to my page. What this little app does is allow you to post mostly anything you want on your page, great for making your page more unique.

2. Go to your page and click edit, then select Edit on the FBML app.

3. This is where it becomes a little bit more complicated. In the FBML box you need to put in the embed code from SoundCloud, however it needs some changing first. Rather than just pasting in the HTML code given by Soundcloud, you need to make it into Facebook code and as its a Flash SWF (the mp3 player), you’re best looking at the Fb:swf code here.

4. Don’t worry though, I’m not going to make you go off and do it all yourself. First off, copy the following code into the FBML box (but don’t click Save Changes yet):

5. Now go to your Soundcloud and find the set you want to embed. Click on the Share button and then grab the code from there. Copy and paste this code somewhere else as we need to look at it and get the SWF location out of it.

6. Now if we look at the code, this is similar to what you’ll see:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="345" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowscriptaccess" value="always" /><param name="src" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fdirtysecretz%2Fsets%2Fremixes-253" /><embed type="application/x-shockwave-flash" width="100%" height="345" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fdirtysecretz%2Fsets%2Fremixes-253" allowscriptaccess="always"></embed></object>
<a href="http://soundcloud.com/dirtysecretz/sets/remixes-253">Remixes</a> by <a href="http://soundcloud.com/dirtysecretz">DirtySecretz</a>

We don’t need all this, we just need to look at the movie value which I’ve put in bold Take this path to the SWF and paste it into your existing code in the FBML box where it says<SWF>.

7. Clicking Save Changes in theory should work fine right about now but if you do, you’ll notice nothing shows up until you click into the empty white space. This is some weird Facebook thing where it wants you to click on an image first before it will load your player. Rubbish eh? To combat this you just need to specify the path to an image which the visitor should click on. I’m sure I don’t have to tell you how to upload an image to the internet and get a link from it, so I’ll leave you to that one. When you have the path to the image, enter it in where the code says <IMG>.

So the final code will look similar to this…

8. All that’s left now is to click save and add the tab to your page. That wasn’t too painful was it?

EDIT: If you’re having problems with your images showing, they may be hosted on a site that doesn’t allowing linking to them. You’re best off to download the image and then upload it to another photo hosting site like Photobucket. They’ll give you a link to use when you upload it.

EDIT 2: If you’re still having problems, it might be down to the apostrophes (’). Try going through the code and replacing all deleting and then putting back in all the apostrophes and that should work. If not, try replacing all the apostrophes with speechmarks (”).

If you have any questions, feel free to leave them in the comments here and don’t forget to follow our Twitter for our latest tracks, info and probably the odd bit of geekery.