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.