FBML – How to Add a MP3 to a Tab on Facebook Fan Page
Last week I wrote an article how to add a flash or youtube video to a Facebook fan page tab using Static FBML.
Continuing this series, I am going to show how you can add a mp3 music file to your custom fan page tab. This would be a great way to add music for a fan page for musicians.
How to Do It
- You will need to add the Static FBML application and create a custom tab, if you haven’t already done so.
- Locate the music file URL. You need to have the file uploaded to your server in order to create the link to it. For example, the one I am using for testing purposes is located at http://kimwoodbridge.com/We Were Promised Jetpacks_01_It’s Thunder And It’s Lightning.mp3
- The music file must be an mp3. This does not work with .wav files.
- The fbml code used is:
<fb:mp3 src="http://location/name of file.mp3" title="name of song" artist="name of band" album="title of album"/>
- Here are the parts of the code that you need to fill out:
- src= this is the location of the file on your server and the name of the mp3 file
- title= the name of the song
- artist= the name of the band or musician
- album= the name of the album
- My complete code looks like the following:
<fb:mp3 src="http://kimwoodbridge.com/We Were Promised Jetpacks_01_It's Thunder And It's Lightning.mp3" title="It's Thunder And It's Lightning" artist="We Were Promised Jetpacks" album="These Four Walls"/>
I have not figured out a way to have a single instance of the music player rotate through a list of songs and I don’t think it can be done. You can, however, have multiple instances of the code on the page to have a listing of different songs. This works ok – the first player seems to start the song immediately but there was a delay when stopped it and started one of the subsequent songs. Again, I don’t know if that’s a bug with the code or just a Facebook quirk that I experience when testing this.
You can view this on the Video tab on the (Anti) Social Development fan page. I didn’t make a separate tab for it because I’m not a musician and won’t be posting music files. There are three instances of the player all with the same song. Of course, each player can have a different song – I only uploaded one file to my server.
Useful? Yes? No? Is there anything else you would like to learn how to do with FBML?
photo credit: Brenda Anderson
Related Posts:
January 11, 2010 at 2:50 pm
I love how your instructions are always so clear!
vered | blogger for hire´s last blog ..Fat People Not Welcome
January 12, 2010 at 6:57 am
Hi Vered – Thanks! I try to write the instructions the way that I would like them. And I try not to assume anything.
January 11, 2010 at 10:59 pm
Uhm, months ago I remember stumbling upon a facebook app for Fan Page that can create a hidden resource tab/info that’s available only for members. Apparently I can’t find it anymore, do you have any idea of such apps and point me to the right directions?
Thank you..
Lex dePraxis´s last blog ..Fakta Dibalik Resolusi Tahun Baru
January 12, 2010 at 7:03 am
Hi Lex – I am not aware of an application that will do this. If I come across something I will post about it here.
April 28, 2010 at 12:11 am
Hi Kim,
Thanks for all your great topics, and I agree that FB and Twitter should be used in different ways, and with different content.
Although other readers seem to follow your advice easily, I am a true Luddite…! and I don’t get it. What do you do with the code? for example with facebook… where do you actually put the code?
I’m trying to generate interest from scratch in our FB fan page but not sure where to start. Twitter seems to be not so effective for us as we have not had much interest in our tweeeets… @nobankruptcy
Plus we have no ad budget to speak of!
many thanks
charles
April 28, 2010 at 8:29 am
Hi Charles – This article explains how to add a custom tab that you can put the code on.
http://www.kimwoodbridge.com/how-to-add-a-custom-tab-to-a-facebook-fan-page/
And I was reading this article yesterday that lists a number of ways to get fans.
http://www.socialmediaexaminer.com/21-creative-ways-to-increase-your-facebook-fanbase/
May 14, 2010 at 6:30 pm
I tried this and it worked in Chrome, but not in Internet Explorer. Any ideas on that?
May 15, 2010 at 7:21 am
Hi Deb – I’m not sure. I double checked the one that I made and it does work in IE.
June 1, 2010 at 7:11 am
Hey, the player is there, but when you click on it, the song doesn’t play..
June 1, 2010 at 12:29 pm
Hi Fadi – Is this on my Fan page or somewhere else? What web browser are you using.
I tested the one on my fan page with Firefox and it worked without any problems.
June 15, 2010 at 10:34 pm
How do you move the player around on the page?
June 16, 2010 at 6:49 am
Hi Christian – You would position it using html and css.
July 16, 2010 at 12:40 am
Hey i would like to ask if what is the code for autoplaying songs and list of songs that will auto play one by one if you open the fan page???can you give the code?
thanks :))
July 16, 2010 at 8:08 am
Hi – Autoplay is not allowed on Facebook.
July 21, 2010 at 4:19 pm
Thanks for the code. Did you ever figure out how to use a single player with multiple songs?
Owen´s last blog ..Cluboo
July 22, 2010 at 9:54 am
Hi Owen – No, I never did.
August 28, 2010 at 3:10 pm
Nicely explained. Thank you for sharing this information. I’m spending the day on the subject.