Facebook FBML tab which includes a SoundCloud track or set embed.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples
README.markdown

README.markdown

SoundCloud-FBML

SoundCloud track and playlist embeds can be easily added to a Facebook tab via Facebook's Static FBML application. Here's how you do it:

Add Static FBML & Navigate to Edit Page

Add Static FBML

  1. Go here
  2. Click the Add to my Page link in the left column and a window will pop up
  3. Click the Add to Page button next to the page you'd like to add it to
  4. Click Close in the bottom right of the window
  5. Go to your Page
  6. Click on the + tab that is located after Wall Info (and other tabs)
  7. This will bring up the Add a new tab selector, search for FBML and click Static FBML
  8. You have added a Static FBML tab!

Navigate to Static FBML Edit Page

  1. Go to your page
  2. Click the Edit Page link in the left column
  3. Scroll down until you find the FBML application box in the left column
  4. Click the Edit link within its block

Edit Static FBML

Once you've made it to the Edit page, give your tab a title by editing the Box Title field

The FBML area beneath the Box Title field is where you'll add your SoundCloud embed using the fb:swf FBML tag:

 <fb:swf swfsrc='' imgsrc='' height='' width='' quality='best' />

Here's a working example of the tag using the Band of Horses Infinite Arms set:

 <fb:swf swfsrc='http://player.soundcloud.com/player.swf?url=http://soundcloud.com/bandofhorses/sets/infinite-arms&auto_play=true&color=000000' imgsrc='http://github.com/leemartin/soundcloud-fbml/raw/master/examples/basic.png' height='325' width='425' quality='best' />

Once you've added your code, you can save your work by clicking the Save Changes button below.

Finally, return to your page, click the tab with the Box Title you set earlier and make sure everything is in working order.

Customize It

The Static FBML app let's you render HTML or FBML (Facebook Markup Language) for enhanced Page customization. This allows you to design a nice experience around your SoundCloud player with some basic HTML. Check out what Band of Horses did with one of our artwork players.

Custom Tab Screenshot

This look was achieved with some basic HTML.

Make it Private

If you would prefer to make your player only available to those Facebook users who have 'Liked' your page, simply use the fb:visible-to-connection tag in combination with an image or text explaining this. Check out this tab app to see this in action. And here's the code to get you started.

NOTE You will not be able to test this technique when logged in as a page admin. Please use another Facebook account or simply get a friend to visit your work to make sure it's working.

Tips and Tricks

Set as Default Landing Tab

You can set your SoundCloud tab to be the default landing page for your Facebook page. This is great for album/track premieres.

  1. Go to your page
  2. Click the Edit Page link in the left column
  3. Look for the Wall Settings box in the left column
  4. Click the Edit link within its block
  5. Set the Default Landing Tab for Everyone Else dropdown to your tab (it will show up as your Tab's name)

Copyright

SoundCloud-FBML is Copyright (c) 2010 Lee Martin and SoundCloud, released under the MIT License.