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?

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

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

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

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/

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

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

<fb:editor action=&quot;new.php&quot; labelwidth=&quot;50&quot;>

<fb:editor-text label=&quot;Title&quot; name=&quot;title&quot; value=&quot;&quot;/>

<fb:editor-text label=&quot;Author&quot; name=&quot;author&quot; value=&quot;&quot;/>

<fb:editor-custom label=&quot;Status&quot;>

<select name=&quot;state&quot;>

<option value=&quot;0&quot; selected>have read</option>

<option value=&quot;1&quot;>am reading</option>

<option value=&quot;2&quot;>want to read</option>

</select>

</fb:editor-custom>

<fb:editor-textarea label=&quot;Comment&quot; name=&quot;comment&quot;/>

<fb:editor-buttonset>

<fb:editor-button value=&quot;Add&quot;/>

<fb:editor-button value=&quot;Recommend&quot;/>

<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>

<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=&quot;index.php&quot;>Home</fb:action> <fb:action href=&quot;buy.php&quot;>Buy</fb:action> <fb:action href=&quot;sell.php&quot;>Sell</fb:action> <fb:action href=&quot;stats.php&quot;>Stats</fb:action> <fb:action href=&quot;fly.php&quot;>Fly</fb:action> <fb:action href=&quot;top.php&quot;>Top</fb:action> <fb:action href=&quot;bank.php&quot;>Bank</fb:action> <fb:help href=&quot;help.php&quot;>Help</fb:help> </fb:dashboard>

<fb:dashboard>

<fb:action href=&quot;index.php&quot;>Home</fb:action>

<fb:action href=&quot;buy.php&quot;>Buy</fb:action>

<fb:action href=&quot;sell.php&quot;>Sell</fb:action>

<fb:action href=&quot;stats.php&quot;>Stats</fb:action>

<fb:action href=&quot;fly.php&quot;>Fly</fb:action>

<fb:action href=&quot;top.php&quot;>Top</fb:action>

<fb:action href=&quot;bank.php&quot;>Bank</fb:action>

<fb:help href=&quot;help.php&quot;>Help</fb:help>

</fb:dashboard>

Code Snippet [render a wallpost] <fb:wall> <fb:wallpost uid=&quot;502501165&quot; t=&quot;1180070566&quot;> I'm just a bit of text. <fb:wallpost-action href=&quot;reply.php&quot;> Reply </fb:wallpost-action> </fb:wallpost> </fb:wall>

<fb:wall>

<fb:wallpost uid=&quot;502501165&quot; t=&quot;1180070566&quot;>

I'm just a bit of text.

<fb:wallpost-action href=&quot;reply.php&quot;>

Reply

</fb:wallpost-action>

</fb:wallpost>

</fb:wall>

Code Snippet [display a linked profile picture] <fb:profile-pic size=“t” uid=&quot;502501165&quot; linked=&quot;yes&quot; />

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

Code Snippet [iframe] <fb:iframe src=&quot;http://www.apple.com&quot;></fb:iframe>

<fb:iframe src=&quot;http://www.apple.com&quot;></fb:iframe>

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

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!

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!