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.