Part of the Facebook Developer Garage series

Facebook (FBML)

by: sunil boodram

em: sunil.boodram@gmail.com

Table Of Contents

• What is FBML?• What is it used for?• How does it work?• Where can I find documentation?• FBML (HTML tag list)• Code Snippets• Conclusion

What is FBML?

• FBML is an acronym for “Facebook Markup Language.” It operates a lot like HTML and it gives us the ability to do various tasks with ease such as:– sending a user e-mail– creating a two column form– embedding flash video– creating a dashboard– displaying a header…etc

• FBML also allows the use of regular HTML tags; this allows us a great amount of flexibility when formatting content

What is it used for?

• FBML is used to tap in to various Facebook elements when building our applications.

• Elements such as (some of which I repeated before):– sending a user e-mail– posting on a wall– displaying a profile picture– laying out content based on the application box displayed on a

user’s profile page, namely wide or narrow– creating buttons– checking if a user is in a group and much more

How does it work?

• As I previously stated it works a lot like HTML.• We use specific tags depending on the needs of our

applications• One example is fb:google-analytics, which generates the

snippet of code we use to insert in our pages, if we use Google analytics for statistical page tracking

• Facebook also allows the use of regular HTML tags, such as <a href=”#”></a>, which is used to generate a hyperlink. Facebook also allows the use of many more HTML tags for building applications

Where can I find documentation?

• Facebook documentation: http://developers.facebook.com/documentation.php?doc=fbml

• The Facebook Wiki: http://wiki.developers.facebook.com/index.php/FBML_documentation

• Facebook developer application:http://www.facebook.com/developers/

FBML [html that works with FBML]

• a • abbr • acronym • address • b • bdo • big • blockquote • br • caption • center • dfn • cite • code • dd • del • div • dl • dt • em • fieldset • font • form• h1 • h2 • h3

• h4 • h5 • h6 • hr • i • img• input • ins • kbd • label • legend • li • ol • optgroup • option • p • pre • q • s • samp • select • small • span • strike • strong • style

• sub • sup • table • tbody • td • textarea • tfoot • th • thead • tr • tt • u • ul • var

Code Snippet [two column form]

<fb:editor action="new.php" labelwidth="50"> <fb:editor-text label="Title" name="title" value=""/> <fb:editor-text label="Author" name="author" value=""/> <fb:editor-custom label="Status"> <select name="state"> <option value="0" selected>have read</option> <option value="1">am reading</option> <option value="2">want to read</option> </select> </fb:editor-custom> <fb:editor-textarea label="Comment" name="comment"/> <fb:editor-buttonset> <fb:editor-button value="Add"/> <fb:editor-button value="Recommend"/> <fb:editor-cancel /> </fb:editor-buttonset></fb:editor>

Code Snippet [profile box: wide vs. narrow]

<fb:wide>fbml intended for the wide right columm</fb:wide>

<fb:narrow>fbml intended for the narrow left columm</fb:narrow>

Code Snippet [building a dashboard]

<fb:dashboard> <fb:action href="index.php">Home</fb:action> <fb:action href="buy.php">Buy</fb:action> <fb:action href="sell.php">Sell</fb:action> <fb:action href="stats.php">Stats</fb:action> <fb:action href="fly.php">Fly</fb:action> <fb:action href="top.php">Top</fb:action> <fb:action href="bank.php">Bank</fb:action> <fb:help href="help.php">Help</fb:help></fb:dashboard>

Code Snippet [render a wallpost]

<fb:wall> <fb:wallpost uid="502501165" t="1180070566"> I'm just a bit of text. <fb:wallpost-action href="reply.php"> Reply </fb:wallpost-action> </fb:wallpost></fb:wall>

Code Snippet [display a linked profile picture]

<fb:profile-pic size=“t” uid="502501165" linked="yes" />

Code Snippet [iframe]

<fb:iframe src="http://www.apple.com"></fb:iframe>

FBML [test console]http://developers.facebook.com/tools.php?fbml

Conclusion

• FBML plays an important role in building applications• When you decide what your application will consists of,

check the documentation to see if an FBML tag exists, which can make your job easier

• FBML tags are still being produced, check the developer application frequently (add it if you haven’t already) for news and recent changes

• The Facebook API is a great way to create applications and the possibility for applications are endless…Have fun!