Hide Notes 

Slide 1: Part of the Facebook Developer Garage series
Slide 2: Facebook (FBML) by: sunil boodram em: sunil.boodram@gmail.com
Slide 3: 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
Slide 4: 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
Slide 5: 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
Slide 6: 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
Slide 7: Where can I find documentation? • Facebook documentation:  • The Facebook Wiki:  http://developers.facebook.com/documentation.php?doc=fbml http://wiki.developers.facebook.com/index.php/FBML_documentation http://www.facebook.com/developers/ • Facebook developer application:
Slide 8: 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 
Slide 9: 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>
Slide 10: 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>
Slide 11: 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>
Slide 12: 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>
Slide 13: Code Snippet [display a linked profile picture] <fb:profile­pic size=“t” uid="502501165" linked="yes" />
Slide 14: Code Snippet [iframe] <fb:iframe src="http://www.apple.com"></fb:iframe>
Slide 15: FBML [test console] http://developers.facebook.com/tools.php?fbml
Slide 16: 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!