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
I love how your instructions are always so clear!
.-= vered | blogger for hire´s last blog ..Fat People Not Welcome =-.
Hi Vered – Thanks! I try to write the instructions the way that I would like them. And I try not to assume anything.
Could you post the full code for your demo please. I have one instance of the player but unable to get multiple instances working.
In the demo I have used the code listed above 3 times. Nothing else about it is different.
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 =-.
Hi Lex – I am not aware of an application that will do this. If I come across something I will post about it here.
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
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/
I tried this and it worked in Chrome, but not in Internet Explorer. Any ideas on that?
Hi Deb – I’m not sure. I double checked the one that I made and it does work in IE.
Hey, the player is there, but when you click on it, the song doesn’t play..
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.
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?
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.
How do you move the player around on the page?
Hi Christian – You would position it using html and css.
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 :))
Hi – Autoplay is not allowed on Facebook.
Thanks for the code. Did you ever figure out how to use a single player with multiple songs?
.-= Owen´s last blog ..Cluboo =-.
Hi Owen – No, I never did.
Nicely explained. Thank you for sharing this information. I’m spending the day on the subject.
nice post,
it is working firefox fine. but it is not working in IE & crome browers
How to fix it..
Hi Praveen – It’s hard to say. It’s working for me in IE and Chrome.
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?
I checked the url and it works when I type it into IE…but not Facebook.
Hi Aj – Nothing is showing up when I go to the Facebook tab – is the code still there or did you remove it?
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.
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.
Any progress made on this post?
Could you post the code for this demo?
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
i have no idea where i can upload my own music to a website so i can put a URL for this code.
Hi Shane – Have you tried doing a search on ‘online file storage’?
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?
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.
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
Hi – Did you remove the code? When I go to that page, it is blank.
how to add autoplay in your code and create background music?
Hi Ali – Autoplay does not work with this static fbml code.
how to add background music on my fan page another way?
This article is about fbml – I don’t know of another way.
ok ))))
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
Hi Julia – Thanks for the info – I’ll have to try it out.
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??
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.
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?
Hi Miguel
The music file will not autoplay.
witch server can i upload it on?
can you give a site URL so i can upload it and use it please?
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.
Hi how to make tha audio auto play in my fbml page?? please help.
It will not auto-play – you will have to click to start the music file.
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?
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.
Very useful article! thank you very much!
Glad it helped – thanks!