Rich media is one of the cornerstones of the modern Internet…just look at YouTube. If you find a need to use embedded media in your application for music, games, or other rich media, you can use several tags to do this. This is an area in which FBML diverges from HTML because it is missing an <embed> tag। However, you are still able to use this functionality through the following tags:
  • <fb:iframe> inserts an iframe into your application to pull in external sources to your application। This tag cannot be used in the profile page.
  • <fb:photo> renders a picture that is in the Facebook repository and the user has permission to view।
  • <fb:mp3> adds a Flash-based MP3 player that controls the MP3 file specified। Remember, this has to be the absolute path to the file.
  • <fb:swf> renders a Flash object on the page of the specified absolute path। On profile pages, the SWF file is rendered as an image and rendered directly on canvas pages.
  • <fb:flv> renders a Flash-based player to stream FLV content. This tag will use only .flv extensions, not other formats such as AVI।
  • <fb:silverlight> is basically the same as the <fb:swf> tag, but for Microsoft’s Silverlight-based content.

You might find that you need to provide different content depending on where your users are accessing the application from। Facebook provides the following tags for displaying content inside the user’s profile box:

  • <fb:wide> displays content only when the profile box is the wide column।
  • <fb:narrow> displays the content only when the profile box is the narrow column।
  • <fb:profile-action> builds a link on the user’s profile under their photo। You’ll use this in conjunction with setFBML to send information to the user’s profile. As a note, there is a 30-character limit for the contents of this tag.
  • <fb:user-table> renders a table of the users (specified by the <fb:user-item> tag) you have specified। This tag works only on a user’s profile page (will not render on the canvas page).
  • <fb:user-item> defines a user for use inside the <fb:user-table> tag।
  • <fb:subtitle> defines a subtitle for the profile box.

Working with your user’s and group’s information is an important part of any Facebook application। You want to let your users easily interact with other users of your application, and there are some specific FBML tags to help with these interactions:

  • <fb:name> returns the user’s name for the uid passed to the tag। This function has a lot of customizable features to allow you to display the possessive of the user’s name and additional logic to handle users who have protected their profiles. For example, the <fb:name uid="$user" ifcantsee="Anonymous"> tag returns “Anonymous” if the user has chosen not to show their name in their profile.
  • <fb:grouplink> returns the name and a link of the group ID passed to the tag।
  • <fb:user> displays content to the specified user and no one else।
  • <fb:pronoun> renders a pronoun for a specific user। This is a fun tag to use because it has several attributes that let you choose the different formats of the pronoun’s use, including possessive, reflexive, and objective forms.
  • <fb:profile-pic> renders a linked image of a user’s profile picture। By default this is a 50-by-50-pixel image. This is good for “iconifying” your user’s interactions.

FBML contains many conditional tests that can help you cut down on implementing this code in your application. At the heart of these conditionals is the <fb:if> tag:.
<fb:if value="true">
<p>Hi</p>
</fb:if>
At first glance, this isn’t that useful because the value attribute will always be true. This is where your programming language comes into play. To actually make this do something useful, you need to be able to dynamically set this value. Let’s write a short test to see whether the logged-in user has a user ID of 12345 and show a customized message:
<?php
$user = $facebook->require_login();
$test = false; // you may also use 1/0 for true/false
if($user == 0000001){
$test = 1;
}
?>
<fb:if value="<?php echo($test)?>">
<p>This is the secret message.</p>
<fb:else>
<p>No secret message for you!</p>
</fb:if>
This is a nonsense example, but it shows how you can you use the <fb:if>/<fb:else> construct to display custom messages to your users. You will find that through your application development process you will start constructing more complex <fb:if>/<fb:else> statements. Fortunately, the developers of the Facebook platform anticipated this and have a set of tags that will do many of the most common types of conditional checking.
As I stated earlier, Facebook tags act differently in different sections of the web pages. These conditional checks can occur only on the canvas page of your application:
  • <fb:is-in-network> displays content if a UID is in the specified network.
  • <fb:if-can-see> displays content if the logged-in user can view the specified content. This is often used to implement your own privacy features in your applications.
  • <fb:if-can-see-photo> displays content if the user is logged on and has permissions to view the photo specified.
  • <fb:if-is-app-user> displays content if the specified user has accepted the terms of service for the application.
  • <fb:if-is-friends-with-viewer> displays content if the user specified is friends with the logged-in user.
  • <fb:if-is-group-member> displays content if the user is a member of the specified group.
  • <fb:if-is-own-profile> displays content if the viewer is the profile owner
  • <fb:if-is-user> displays content if the viewer is one of the specified users.
  • <fb:if-user-has-added-app> displays content if the specified user has added the application to their account.

Unfortunately, there isn’t an FBML construct for else if logic. If you need to perform multiple conditional checks, you will need to properly nest your if statements. Alternatively, you can use the FBML’s switch construct.

The FBML <fb:switch> tag acts a bit differently than many programming languages that implement the construct. In FBML, the <fb:switch> tag evaluates a set of FBML tags and returns the tag information from the first tag that returns something other than an empty string:

<fb:switch>

<fb:user uid="0000001" />

<fb:default>This is the default statement</fb:default>

</fb:switch>


This code will display the contents of the <fb:default> tag since there’s no user with a UID of 0000001. You may at some point need something a bit more complex for your tests. You are able to nest <fb:if> and <fb:switch> statements within an <fb:switch> tag for these more advanced conditional analyses in your code:

<?php

$user = $facebook->require_login();

$test = false;

if($user == 0000001){

// Boolean true = 1

$test = 1;

}

?>

<fb:switch>

<fb:if value="<?php echo($test)?>">

<fb:switch>

<fb:profile-pic uid="<?php echo($user)?>" />

<fb:default>Inner default</fb:default>

</fb:switch>

</fb:if>

<fb:default>Outer Default</fb:default>

</fb:switch>

As you’ve probably noticed, there’s no case statements with breaks that you normally see in other programming languages. If you’re familiar with the switch statements having case and break statements, just think of each tag as a distinct case with no need for a break statement. There are times where this could require more complex nesting of statements, but if you find your conditional statements getting too complicated, it’s probably a good idea to take a step back from what you’re doing and see whether you can find an alternative method to perform the same check. Also, as a programming note, the switch statement essentially has a break after the first true statement in the switch statement. If you place the <fb:default> tag at the top of your code block (which will always return true), the rest of your switch statement will not get evaluated.

FBML-specific tags are really the meat of the Facebook platform. The tag set isn’t overly complex, but it has already gone through two iterations with FBML 1.0 and FBML 1.1. This change actually raises a sometimes-frustrating aspect in how Facebook changes the platform. When FBML 1.1 was announced in August 2007, developers basically had ten days to make their code compliant to the new specification. It is imperative that if you’re developing an application for Facebook that you keep up with the changes to the platform so your application doesn’t stop working. If you haven’t already subscribed, add the Facebook News feed (http://developers.facebook.com/news.php?blog=1) to keep abreast of changes.

I’ll also take a moment here to talk briefly about some of the issues, err, enhancements that you will see when using FBML. One of the big things you’ll notice is that there are FBML tags that will act differently in different locations. As an example, you can use iframes on canvas pages, but you cannot use the same iframe on the code in the profile box. There is also a queue of requested tags that are being considered for inclusion with the next FBML tag set iteration. Although not all of these tags will make it into the official language, it’s interesting to see what the developer community is requesting to be included. You can view and add to these requests at http://wiki.developers.facebook.com/index.php/Requested_FBML_Tags.

The developer’s wiki for the Facebook platform groups the tags by their function. I believe this is perhaps the most useful way to work with the FBML because of the sheer volume of tags (almost 100 as of version 1.1). Also, because of this volume, some tags will necessarily have more information about them than others. If you find some of these descriptions and examples insufficient, please refer to the official documentation for the tags.
FBML tags are set apart from other HTML tags with the fb prefix and follow the format .
<fb:tag_name>.

For the most part, most commonly used HTML tags will work on the Facebook platform. If you’ve worked with HTML in the past, you’re already familiar with this part of the platform. One major difference between typical HTML and FBML is that “normal” JavaScript is stripped from your code. For instance, you cannot use the onclick attribute in the anchor (<a>) tag to call JavaScript:
<p>
<a href="javascript:alert('You\'ll never see me');">click me</a>
</p>
Although completely valid HTML and JavaScript, the previous will raise an error when your users look at the page containing this code.
Don’t worry, if you need access to JavaScript for your application, Facebook has developed FBJS, which will allow you to use many of the conventions you typically see in JavaScript.
When working with FBML, remember that it’s not exactly HTML, even though you use a lot of the same syntax. Your code has to be processed through the Facebook platform to ultimately generate the HTML that gets rendered to the user, so not everything you’re used to doing with HTML code will work.

The Facebook Markup Language (FBML) is the heart of the Facebook platform. You might see some folks referring to FBML as “fancy” HTML tags, but it actually does a little more than static HTML because it has a dynamic connection to the Facebook back end. If you have developed any web applications in ColdFusion or JSP (using JSTL), programming with FBML will be very familiar. The Facebook Markup Language is described on the wiki site as an “evolved subset of HTML,” so you have many of the same tags available to you as you do in normal HTML, but you also get a much richer tag set that allows you to code myriad interactions with the users very quickly.