How to Add a Music Tab to Your Facebook Fan Page

SoundCloud on a Facebook page

What’s the best way to add music to a recording artist’s fan page on Facebook that’s elegant, easy to navigate, quick to load, completely free and benefits you more than some third party service? I recently made some changes to the way our own pages display songs, and the simplicity of it is worth sharing.

As you may have heard, Facebook is making a change to their platform policy on 5 November 2014 that will ban the use of a “like gate” to reach content. In other words, we’ll no longer be able to require visitors to like our Facebook Page before they can stream or download a song. Right or wrong, it’s happening and it’s a value loss for artists.

If you can’t beat ’em, join ’em. A few years ago, when downloads began taking off, that meant a little “hello” from the artist within the free download version of our songs. It was our own ad platform in a way, and where we may have lost value in sales, we found value by leading people to our websites or whatever else we wanted them to see. Today, that value can be in SoundCloud or YouTube traffic, two media hosts that now offer (or soon will) ad revenue sharing, in addition to being a good source of music discovery on their own. Traffic builds interest, which builds traffic in a self-chain reaction.

The How To

If we already have our music on SoundCloud, for example, how do we get it onto our Facebook page elegantly, simply, and for free? There are third party apps like BandPage, FanRx and ReverbNation, but I have found them to be notoriously slow or sloppy with limited style options (aka ugly). The thing is, SoundCloud offers up a lot of the code that you need already. From your own SoundCloud profile, or from a SoundCloud set, or even from one song, just hit the Share button and switch to the Embed tab.

SoundCloud embed code

There are currently two Embed modes: Visual and Classic. The Classic mode displays more songs at once, and lets you change the trim color (#8b9dc3 is official Facebook light blue). Visual mode displays the image associated with the content in a large header over your tracks. If you’ve got it, flaunt it. Note that if you embed straight from your profile page, this will include every song you upload, newest at the top. That’s handy for automatic updates, but that also means everything you upload to that account will show up here.

Facebook Tab

The code given is designed to fit into an existing web page or WordPress post/page, not into a Facebook tab. How do you even make a Facebook tab? We call on something nice and simple from a refreshingly modest third party:

https://apps.facebook.com/static_html_plus/

I went with Static HTML from Thunderpenny because they are popular and seem like they’ll be around for a while. Go to the link above, hit the big button, add the app to your page, then go to your page and look for the new “Welcome” tab. Assuming this is a fresh install, you should see a blank page with an “Edit tab” button up top. Click it and you’ll be presented with a simple HTML editor on dashboard.statichtmlapp.com. This is where we build our new mini-page iframe. An iframe allows a web page to be displayed inside another web page, in this case, our custom page inside of a Facebook tab. So this app builds us a blank tab, then serves up our HTML inside.

Under the index.html tab, we’re going to build the simplest web page possible to give that SoundCloud embed a place to live. And that is:

<html>
<body>
***SoundCloud iframe HTML***
</body>
</html>

That’s all you need. Copy-paste the text in the “Code & Preview” box on SoundCloud, and surround it with “html” and “body” tags as shown above. Hit Preview or Save & Publish and you’re set. As you can see on my own artist pages, Maribel “M:G” LaLanne for example, I’ve added links to iTunes and the Google Play Music Store. Text links are easy. If you want to add images, however, be aware that everything served from Facebook is SSL secured now (https), and your images will need to be as well. If you don’t have access to a secure server of your own, you’ll either need to find one or opt for Thunderpenny’s paid upgrade, where you can make use of that “Upload image…” button.

Displaying Your Tab

Facebook tab management
Now that you’ve got your tab installed, let’s clean things up. As of October 2014, you can customize two tabs at the top of your Facebook page. “Timeline” and “About” are permanent, then you can decide which two come next, then everything else goes into a “More” drop-down menu. To move things around, pop open that More menu and hit “Manage Tabs” at the bottom. The first 2 on the list under “About” get that premium top-of-page placement.

Facebook page - manage tabs

Now your Facebook fans can have quick and elegant access directly to your SoundCloud content, just by hitting that Songs tab (you can customize the name by hitting “Add or Remove Tabs” the edit the settings for that tab). It’s super-clean and will update automatically when you add songs to your profile or sets on SoundCloud. When people visit that tab, you have complete control over what they see and where they go next, and they help to increase your SoundCloud play counts at the same time. Total price? Zero.

Best of all: We didn’t need to use SoundCloud for any of this. It could have been a YouTube video or playlist embed, or even one of SoundCloud’s new competitors like hearthis.at. A teeny bit of coding opens up a whole range of possibility.  You could maybe even throw a Google Analytics tracker code snippet in there… (I haven’t tried this yet, just lobbing ideas).

Enjoy! If I’ve missed anything, please feel free to post questions below.

I have no affiliation with any entity mentioned above, aside from the recording artists.
  • Thanks for this! I wasn’t aware of the “Static HTML” Facebook app and wasn’t looking forward to coding my own app just to embed Soundcloud.

  • Alex Pardini

    Great share, thank you!
    I suppose there is no way to make the new tabs work with the Facebook App?

  • GG

    Sadly, nothing yet on that front. Only posts (if they are seen) can deliver audio to mobile followers. So you’d probably want to do both, posting often enough to cover your audience, but not enough to annoy them.

  • Danny Joey

    the link is now broken, the main part of info I need! nooooo000!!!!!

  • GG

    Hey Danny — Which link? The most important one is still working for me: https://apps.facebook.com/static_html_plus/

  • Thanks so much for this helpful article!

  • Tania Hindu

    wow! super-super THANK YOU!

  • Austrian Apparel

    sharp !

  • Great tutorial..!!

  • DWdrum

    BADAZZ Thank you so much dude

  • JHS420

    Hi…just stumbled upon this. Does this method still work? Thanks!

  • GG

    It does indeed. Even with the Facebook Page design changes in 2016, the end result is still working…

    https://www.facebook.com/maribel.lalanne/app/190322544333196/

    The Thunderpenny “Static HTML” app is active and available on Facebook and the SoundCloud embed code can still be found in the same place.

    Feel free to let me know about anything that doesn’t seem to match up in the step-by-step. Making a quick skim right now, it looks like the part about Displaying Your Tab is now unnecessary, since everything just shows in the Page’s left sidebar.

    Thanks for asking!

  • Giulia Martini Raffaela

    Hi! Thank you so much for your tuto, it works very well on my fb page 😉
    I’d like to know how I could change the Facebook Tab illustration (you know the 111X74 pixels) When I want to edit my tab, it proposes me to edit name and image, no problem fot the name!, but impossible to upload an image, there is just a link (“learn how to add a custom tab image”) and this link doesn’t work, the video stops after a few seconds (here is the link : http://www.screencast.com/t/tn0NuoHz ) Thank You for your help 🙂

  • GG

    Hi Giulia — That has always been a little buried. This is what I see when I follow this path:

    Your Page > Settings > Apps > (choose an app) > Edit Settings

    https://uploads.disquscdn.com/images/c884e417697188cb5370cfb6df187b8490eadc96d56c2f30eb10ce45457f7991.jpg

  • GG

    Now, hover over image and click Edit, then Choose file to upload.

    Are you not seeing the image or upload link at this stage?

    https://uploads.disquscdn.com/images/ae52975dada26c019b0464a98175d0316889a3adb0bcc6c97b82bc8892d8888e.png

  • Giulia Martini Raffaela

    Thanks a lot 😉 It was easier than I expected!

  • Martin Stuart

    Works well on the desktop. When viewing from a smartphone the music tab does not show. Have you found a way to address that by any chance?

  • GG

    I have not. As far as I know, Facebook only allows their own tabs on mobile (About, Videos, Shop, etc.).

    Uploading our own Facebook videos of individual songs is probably the best mobile solution until that changes. If you have no visual content, a static album or single cover will work. It’s too bad Facebook has never supported streaming audio directly.