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:
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter.
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.
December 20, 2010 at 6:40 pm
Could you post the full code for your demo please. I have one instance of the player but unable to get multiple instances working.
December 20, 2010 at 9:25 pm
In the demo I have used the code listed above 3 times. Nothing else about it is different.
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.
October 5, 2010 at 2:29 pm
i am experiencing the same thing. code is on my page, player, title, track, album on page, press play and nothing. this is so frustrating. ideas?
October 7, 2010 at 9:24 am
Hi Matthew – My demo still works so it’s hard to say what the problem is with the code. What browser are you using? Also, where are the songs located – maybe Facebook can’t access them.
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.
October 26, 2010 at 10:16 am
nice post,
it is working firefox fine. but it is not working in IE & crome browers
How to fix it..
October 26, 2010 at 10:29 am
Hi Praveen – It’s hard to say. It’s working for me in IE and Chrome.
November 1, 2010 at 3:14 am
Hey Kim AWESOME tutorials. Here is what my code looks like:
<fb:mp3 src="Mountain Climber”
title=”Mountain Climber”
artist=”Rockridge Productions” album=”Radio Spots”/>
Here is how it’s displaying on Facebook:
http://www.facebook.com/RockridgeProductions?v=app_7146470109
Any ideas why this won’t play?
November 1, 2010 at 3:17 am
I checked the url and it works when I type it into IE…but not Facebook.
November 1, 2010 at 1:34 pm
Hi Aj – Nothing is showing up when I go to the Facebook tab – is the code still there or did you remove it?
November 4, 2010 at 12:34 pm
Kim,
With regards to your statement (quoted below), I’d like to inform you (and all your fans/viewers) that “it is indeed possible” to have a single instance of a music player rotate through a playlist of songs, and be included on a facebook fanpage custom/Static FBML tab.
>> 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.
That being said, it’s not as quick, or as simple as using the FBML tag. It’s a bit more involved, and requires files/coding in PHP, JS, and of course XHTML.
But yes, it can be done…and I’m demonstrating it on this fanpage and tab of mine:
Click here to see my example of a MP3 player playing songs from a playlist
I will shortly be creating a “how-to” video and blog post on this topic, (and many others relating to pulling-in and showing information on Facebook, from various social media sites such as Flickr, YouTube, Twitter, Tumblr etc.).
Once I’m done with the tutorial I’ll send you a link to it so that you could use the link and update this post of yours to say that “it can be done, by following instructions posted on my blog post”.
Hop this helps.
November 5, 2010 at 1:13 pm
Hi Cyril – My solution is using fbml so those things can’t be done and the article isn’t wrong. FBML is the first word in the title. That being said, if you write an article detailing your solution, I would be interested in reading it.
December 20, 2010 at 9:16 pm
Any progress made on this post?
December 20, 2010 at 9:17 pm
Could you post the code for this demo?
November 4, 2010 at 12:41 pm
Oh, one more thing I forgot to mention…..
The problem I notice with your solution is that it’s quite possible for a visitor to click the “Play” button against a number of different songs, and have them all playing at the same time.
Needles to say, that’s not gonna sound too good.
With my solution, advancing to the next song will (first) stop playing the current song.
Cyril
November 20, 2010 at 4:23 pm
i have no idea where i can upload my own music to a website so i can put a URL for this code.
November 21, 2010 at 8:14 am
Hi Shane – Have you tried doing a search on ‘online file storage’?
December 14, 2010 at 4:18 pm
i was looking for a way to provide an .mp3 on my pages and you have answered that.
One other part i was hoping to find is:
I was hoping that my fans would be able to comment on those .mp3s individually.
do you know of a way to post them so that people can comment on them?
December 15, 2010 at 6:47 am
Hi Cory – You could add a comment box for each mp3 although it wouldn’t exactly be associated with it.
http://www.kimwoodbridge.com/how-to-add-comments-to-a-facebook-fan-page/
The best way to get comments on a mp3 is to post a link to it directly to the wall.
December 30, 2010 at 4:30 pm
Hii Kim,
I am having a problem with the tag. I have coded :
FB Fan Page URL: http://www.facebook.com/wecoverupbeautifully?v=app_7146470109&ref=ts
When I press the button, facebook displays the status bar and appears to be in “play” mode with a pause button but nothing plays and the status bar and timer doesn’t move.
Is there something I’m missing?
Pls Help, Pinank.
Thanks in anticipation.
Pinank
January 3, 2011 at 7:16 am
Hi – Did you remove the code? When I go to that page, it is blank.
January 22, 2011 at 11:59 am
how to add autoplay in your code and create background music?
January 24, 2011 at 6:47 am
Hi Ali – Autoplay does not work with this static fbml code.
January 24, 2011 at 10:19 am
how to add background music on my fan page another way?
January 25, 2011 at 6:19 am
This article is about fbml – I don’t know of another way.
January 25, 2011 at 11:25 am
ok ))))
February 4, 2011 at 9:37 am
hi there,
this is a really good article about adding mp3s to your individual FBML tab.
I think FBML is indeed very useful, but it´s very complicated as well.
Therefore I want to share with you our free tool on http://mashlab.com – mashlab makes it possible for you to draw new elements simply on the work surface using drag & drop. You need no knowledge of complex programming languages such as FBML or HTML. in that way you can add mp3s, videos and pictures and address your fans with your own design.
thought this might be interesting for you!?
best, julian
February 6, 2011 at 7:38 am
Hi Julia – Thanks for the info – I’ll have to try it out.
February 11, 2011 at 2:27 pm
i have the mp3 file on my computer so how can i get the URL for that?? i don’t know how, can you please tell me??
February 12, 2011 at 8:29 am
Hi Joseph – You have to upload it to a server somewhere – facebook can’t pull it from your computer – unless your computer *is* a server.
February 12, 2011 at 1:42 am
hi there!. . thanks for the wonderfull code and i’ve got it working properly. however, i want it to auto play. . how can i do that?
February 12, 2011 at 8:30 am
Hi Miguel
The music file will not autoplay.
February 12, 2011 at 1:06 pm
witch server can i upload it on?
February 12, 2011 at 1:07 pm
can you give a site URL so i can upload it and use it please?
February 13, 2011 at 11:38 am
If you don’t have your own web hosting plan, you can try searching for free online storage. I don’t provide hosting or server space.
March 18, 2011 at 6:53 am
Hi how to make tha audio auto play in my fbml page?? please help.
March 19, 2011 at 8:28 am
It will not auto-play – you will have to click to start the music file.
April 2, 2011 at 6:05 pm
I want my facebook users to be able to download a free mp3 lecture from one of my past events. Is this possible using fbml?
April 3, 2011 at 10:03 am
You can link to the mp3 file and tell the users to right click to save the file – you don’t have to do anything special with fbml – regular html will work.
April 8, 2011 at 11:50 am
Very useful article! thank you very much!
April 8, 2011 at 12:05 pm
Glad it helped – thanks!