You might want to add the ability for your users to do something along the lines of your wall. There is functionality for this with the following:

• <fb:wall> renders a wall-like section in your application that has <fb:wallpost> elements from your application users.
• <fb:wallpost> is the message for the wall post that can contain an <fb:wallpost-action> element.
• <fb:wallpost-action> adds a link at the bottom of the wall post content. Even if you put it at the beginning of the <fb:wallpost> element, the display will still render at the bottom of that particular post.

Walls are pretty easy to implement, assuming you have some type of persistence mechanism (such as an RDBMS). Assuming you do have an RDBMS, you would simply make a new table with three tuples (columns) to hold the UID (bigint), the actual post (text), and a time stamp (for indexing). Additionally, you could add a primary key field, though the time stamp should suffice for this. Now, all you need to do is loop over these results to provide them in the <fb:wallpost> tags, and all this should be wrapped in <fb:wall>. The only hard part is deciding how many posts you want to display on a page.

As a note, this set of tags is still in beta mode, but basically this is a mechanism to provide modal dialog boxes for your application. This is really a fancy pop-up box to interact with your users. If this tag doesn’t fit your needs, you can also use FBJS to create this type of interaction between your users by utilizing the Dialog object.

• <fb:dialog> is the container tag for the dialog box.
• <fb:dialog-title> is an optional title for your dialog box.
• <fb:dialog-content> is the message contained in the dialog box.
• <fb:dialog-button> renders a button for the dialog box.

Consider the following FBML snippet for constructing a dialog box:
<fb:dialog id="fb_test">
<fb:dialog-title>This is a test</fb:dialog-title>
<fb:dialog-content>Content</fb:dialog-content>
<fb:dialog-button type="button" value="Okay" close_dialog="1" />
</fb:dialog>
<a href="" clicktoshowdialog="fb_test">show fb:dialog</a>

The <fb:dialog> snippet will render a modal window as shown in the below Figure. Within the <fb:dialog-content> tag, you are also able to add other information (and other FBML) tags, such as forms to perform more advanced interactions with your users.

Figure: FBML <fb:dialog>

For example, take this snippet that generates a search form to search Facebook (or some other site):

<fb:dialog id="fb_search" cancel_button="true">
<fb:dialog-title>Search Facebook</fb:dialog-title>
<fb:dialog-content>
<form action="http://www.facebook.com/s.php" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</fb:dialog-content>
</fb:dialog>
<a href="" clicktoshowdialog="fb_search">Show Search</a>

Now, when the user clicks the Show Search link, a modal window will pop up, as shown by the below Figure. When users hit the Search button, they are passed to the new server, which in this case presents users with their search results.

Figure: <fb:dialog> with form.

As mentioned previously, you can make these dialog boxes using FBJS (using the Dialog object). However, not everyone is a JavaScript expert, so the <fb:dialog> tags provide a convenient method to do most of the same things you can do with FBJS without writing any FBJS.

Once you have your application completed, you’re going to want to develop a navigation scheme for your users. The main tag for this task is the <fb:dashboard> tag that builds the familiar dashboard layout in Facebook. There are additional tags that you can lay out within the <fb:dashboard> tag, including buttons, hyperlinks, and even help:

• <fb:dashboard> renders the standard Facebook dashboard for navigation. This is a container tag for <fb:action>, <fb:help>, and <fb:create-button>. Note that you cannot use the <fb:if-user-has-added-app> tag inside this tag.
• <fb:action> is analogous to an anchor tag for the dashboard.
• <fb:help> creates a link to the application’s help. This is rendered to the right side of the dashboard.
• <fb:create-button> creates a button for in the dashboard.
• <fb:header> renders a title header.
• <fb:media-header> renders a media header. This tag is generally used to display user-contributed content to specific users.
• <fb:tabs> is a container to add tabbed-navigation style of links to your application. Individual tab items are added with the <fb:tab-item> tag.

The tag allows you to nest <fb:action>, <fb:help>, and <fb:create-button> tags:
<fb:dashboard>
<fb:action href=".">Add Something</fb:action>
<fb:action href=".">Delete Something</fb:action>
<fb:help href=".">Help me</fb:help>
<fb:create-button href=".">Add Something</fb:create-button>
</fb:dashboard>

The <fb:tabs> tag, by contrast, allows only the <fb:tab> tag to be nested:
<fb:tabs>
<fb:tab_item href="." title="Add Something" />
<fb:tab_item href="." title="Delete Something" />
<fb:tab_item href="." title="Help Me" />
</fb:tabs>
Both of these tag sets provide different functionality to you. Typically you will use <fb:tabs> for creating an overall navigation schema, and you will use <fb:dashboard> for performing functions within your application.

To work with editing data, Facebook has derived a set of tags grouped in this section. The rendered form will display in two columns with the label on the left and an input field on the right. The one caveat to using the <fb:editor> tags to create forms is that you cannot use mock Ajax. If you want to be able to use mock Ajax, you will need to manually create your own form.

• <fb:editor> is the outermost tag used to create an editable form.
• <fb:editor-button> creates a button for your form.
• <fb:editor-buttonset> creates a container for one or more buttons.
• <fb:editor-cancel> creates a cancel button for the form.
• <fb:editor-custom> allows you to insert whatever code you want, as long as it’s valid FBML.
• <fb:editor-date> creates two select boxes in the form for the month and day.
• <fb:editor-divider> adds a horizontal line divider to your form.
• <fb:editor-month> creates a select box populated with the months of the year.
• <fb:editor-text> creates an input box for your form.
• <fb:editor-textarea> creates a textarea box for your form.
• <fb:editor-time> creates select boxes for hours, minutes, and an a.m./p.m. indicator for your form.

As an example of this usage, consider the following.

<fb:editor action="." labelwidth="100">
<fb:editor-text name="input" label="Text" />
<fb:editor-textarea name="textarea" label="Editor Text Area" />
<fb:editor-custom label="Select">

<select name="select">

<option value="editor-custom">Editor Custom Select</option>

</select>

</fb:editor-custom>
<fb:editor-divider />
<fb:editor-date name="date" label="e" />
<fb:editor-month name="month" label="h" />
<fb:editor-time name="time" label="e"/>
<fb:editor-buttonset>

<fb:editor-button value="Add"/>

<fb:editor-button value="Edit"/>

<fb:editor-cancel />

</fb:editor-buttonset>

</fb:editor>

Remember, the form the tag produces uses the Post method. If you use the tag, you will need to write some code on your server to then do something, but the purpose of this example was to show how to use these tags in conjunction with one another to create a form. In this case, the previous snippet will render as depicted in the below figure.

Here are some miscellaneous tags:

• <fb:js-string> allows you to define a string to reference in FBJS. You can set this anywhere in your code, and it is not displayed to the user. For example: <fb:js-string var="foo">This is the rendered text</fb:js-string>.
• <fb:fbml> allows you to define the specific version of FBML. Currently, the valid versions include 1.0 and 1.1.
• <fb:fbmlversion> displays the version of FBML that is currently being used.
• <fb:redirect> redirects the browser to another URL in your application.
• <fb:ref> allows you to define FBML that resides at a specific URL that you then call through the tag. This is generally used when you want to update a lot of profiles without publishing the data on a per-user basis.
• <fb:share-button> creates a share button with either URL information or specific metadata.
• <fb:time> renders a time in the user’s time zone.
• <fb:title> sets the page’s title tag.

Working with form information is important in developing any online application. FBML has some constructs to help with these common tasks.

• <fb:request-form> creates a form for sending requests. This is a great way to let your users send requests to add the application (when used with the <fb:multi-friend- seletor> tag). You cannot use this tag if you are using iframes.
• <fb:request-form-submit> creates a submit button for use with the <fb:request-form> tag.
• <fb:multi-friend-input> renders a multifriend input field like the one used in the message composer.
• <fb:friend-selector> renders an autocomplete input box of the user’s friends.
• <fb:submit> creates a JavaScript submit button for your forms. This is generally used when you want to use an image instead of a submit button, such as <fb:submit><img src="path/to/image" /></fb:submit>.

Tag-based languages such as ColdFusion and JSTL have many tags that build portions of your application for you। Similarly, FBML has a set of tags to help you build some very useful portions of your application:

• <fb:comments> generates code to add comments to an application। It takes care of posting and redrawing pages that are posted to for a given UID.
• <fb:google-analytics> adds the JavaScript to your application so you can use Google Analytics to track your application usage.
• <fb:mobile> displays content for mobile users (http://m.facebook.com/)। Content outside of these tags will be ignored for mobile users.
• <fb:random> randomly rotates certain parts of your application content (for quotes, pictures, or even advertising). This tag not only can randomly choose an element from within the tag (defined by the <fb:random-option> tag) but also can weight these options to appear more often (or less often) than other options.