facebook soundcloud pic1

These instructions are useful for Bands who use Facebook and would like to share their music. We'll use Soundcloud to host the music and take advantage of Facebook networking. Then we will create a new Music Page in Facebook with Thunderpenny Static HTML.

Take a look at this Australian Celtic band page to see the end results.

 

 

 

Soundcloud Player

Signup for a Soundcloud account here https://soundcloud.com

Upload your files and create a playlist. Your playlist will have a custom URL. Something like...
https://soundcloud.com/organic_studios/sets/jarrah-celts

We need to get the embed code of that Playlist. The trick is to logout of Soundcloud - and then visit your Playlist URL. You will then see the Share button...

facebook soundcloud pic2

Click on the Share button - then click on Embed tab (top) to see your Embed code. This code can then be used on your website, blog, or Facebook Tab.

facebook soundcloud pic3

The code we are looking for goes something like this...

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/83547300&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

The beauty of Soundcloud is that they have a good API and documentation to customise is embed HTML code. We this we can design a clean looking player without the clutter of unwanted features.

The API documentation in detail is here... https://developers.soundcloud.com/docs/api/html5-widget

But in short - the good stuff is here...

ParameterDefault valueDescription
auto_play false Whether to start playing the widget after it’s loaded
buying true Show/hide buy buttons
liking true Show/hide like buttons
download true Show/hide download buttons
sharing true Show/hide share buttons/dialogues
show_artwork true Show/hide artwork
show_comments true Show/hide comments
show_playcount true Show/hide number of sound plays
show_user true Show/hide the uploader name
start_track 0

Preselects a track in the playlist, given a number between 0 and the length of the playlist.

 

 You can try some parameters out with this API playground: https://w.soundcloud.com/player/api_playground.html

 The embeded code can be used eveywhere - in your Blog, Facebook page, Website, etc.

ThunderPenny Static HTML

Now we are going to use the Thunderpenny Static HTML to create a new Music tab on your Facebook page - and then paste that Soundcloud code into it. You can use ThunderPenny to create other pages too.

Follow this links to install the Static HTML app...
https://apps.facebook.com/static_html_plus

You need to add <html> and <body> tags to your code. So it will look like this...

<html>
  <body>
    <h2 style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;">Here are some of our Tunes. Enjoy!</h2>

    <iframe width="100%" height="600" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/83547300&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=false">
   </iframe>

  </body>
</html>

 Work your way around the app. Click the [Save & Publish] button. Click the [Done editing] button when finished.

facebook soundcloud pic4

There will now be a "Welcome" Tab on your Facebook page. You'll now need to rename that to "Music".

Changing Facebook Tab Name

Log into Facebook and go to your Band page.

Click on the "More" tab, and select "Manage Tabs" from the dropdown.

facebook soundcloud pic5

You can now drag the "Welcome page" up to near the top.

To change the tab's name from "Welcome" to "Music" - click on "Add/Remove Tabs".

Then click "Edit Settings"

facebook soundcloud pic6

Change the Custom tab name to "Music"

facebook soundcloud pic7

References:

http://www.glenngutierrez.com/2014/10/how-to-add-music-to-your-facebook-fan-page/