In this post, we will discuss basic FBML that everyone can use for their Facebook profiles/pages. FBML, like HTML, is the Facebook Markup Language. It is basically used by developers who create facebook applications for us.
However, we can also use FBML on our facebook profiles in boxes & tabs. This allows us to embed music, video & flash in the profiles.
First you gotta have an app which allows you to use HTML/FBML for your profile.
Note : You really need one of the apps listed on the link above to use the FBML given below.
1. The FBML Photo tag
Though Facebook does allow the html tag, the cosserponding FBML for this is <fb:photo>
The FBML tags are also associated with attributes. Now, the above tag with attributes would look something like…
<fb:photo pid=”12345″ />
Now, the 12345 thing is the api of the image. This is when you’re adding an image from facebook itself. Lets say you have a pic in one of your albums that you want to showcase on your profile in a box.
You’ll need to check out the api of that image. For this, you just need to get the url of the image…
It would look something like…
facebook.com/photo.php?pid=39597&id=100000031343773
Now, the thing in red is the api of the image. I would then use this with the FBML tag to get…
<fb:photo pid=”39597″ />
which is the FBML tag for my image.
2. The FBML Music tag
This tag allows you to add any song to your profile…
Its the <fb:mp3> tag.
<fb:mp3 src=”http://www.site.com/filename.mp3″>
The tag with its basic attributes would look something like…
<fb:mp3 src=”http://www.site.com/filename.mp3″ title=”Name” artist=”Artist” album=”Album”/>
3. The FBML Video tag
This lets you add a video frm yutube into your facebook profile…
Simply use the <fb:swf> tag as defined below. The
<fb:swf swfsrc=’http://www.youtube.com/v/xxxxxxxxxx‘ imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg’ width=’340′ height=’270′ />
The thing in green is the video id on youtube. It looks something like this on youtube…
http://www.youtube.com/watch?v=qrjyy_0SipU
Hence, if i embed this video on facebook using FBML, it would look something like…
<fb:swf swfsrc=’http://www.youtube.com/v/qrjyy_0SipU‘ imgsrc=’http://img.youtube.com/vi/qrjyy_0SipU/2.jpg’ width=’340′ height=’270′ />
But again, you need one of the apps here to do this. Enjoy!
13 Comments
i heard about FBML but using this language i could not make a picture on my other profile.
Thanks, it works, but I’m using a deprecated parameter:
(Deprecated) If the pid is not an API-supplied pid, this should be the ID parameter in the query string used to find the pid. This property is not supported in the XFBML variant of this tag and is deprecated for the FBML variant.
For how long is this going to work? I’d really like to learn to do it the right way, generating the a PID supplied by the API, but the docs are just so confusing and vague on the Facebook Developers site.
I assume you got an app with the reqd. permissions. Try uploading with $facebook->api_client->photos_upload(). It uploads the pic and returns an array which will give you the API pid.
Here’s what you do Jerome. Use a parameter “uid” and enter the pid found in the image url. This will be an alternative for the API-supplied PID. Try it out and see if it helps.
For using the PID found in the image URL does not work anymore. Facebook asks to use an An API-supplied pid of the photo ONLY.
I’ve been banging my heads for days trying to get this PID, through the test console, looking for examples, tutorials, and I can’t find out how to get the PID of a photo.
I’d like to use the images I’ve uploaded to my fan page album to illustrate part of an FBML landing page, but right now I can’t use them unless I start hosting them remotely. I’d really like to be able to use the ones I’ve already uploaded to FB.
@george @lilmerlin : you might be using an app that supports xfbml. then try closing the tag and see if that works : </fb:photo>
@george : if you’re trying to use a facebook album, you would have an “aid” instead. for a photo to show up, the above code would work : <fb:photo pid=”12345″ />
I even copy and paste and can’t get a pic on… :o(
okay, maybe this works for me and maybe it doesn’t
I am trying to “show” images previously uploaded to fb photos in a custom fbml fanpage box.
the pid is front the url on the browser for the fanpage
which either is an “api” or not, but I cannot see any other way to get pid.
no luck.
maybe its a sillly coding error, i dunno.
thanks in advance for your prompt response!
bill
what am I doing wrong
fucking hell! thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
you saved my life!
:)
Thank you for the comment! :)
Hai,
thanx 4 Sharing…
THANKS!!! :)