Facebookcamp Toronto FBML

10,018 views

Published on

A presentation on the Facebook FBML (facebook markup language)

Published in: Technology, Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,018
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
276
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Facebookcamp Toronto FBML

  1. 1. Part of the Facebook Developer Garage series
  2. 2. Facebook (FBML) by: sunil boodram em: sunil.boodram@gmail.com
  3. 3. Table Of Contents <ul><li>What is FBML? </li></ul><ul><li>What is it used for? </li></ul><ul><li>How does it work? </li></ul><ul><li>Where can I find documentation? </li></ul><ul><li>FBML (HTML tag list) </li></ul><ul><li>Code Snippets </li></ul><ul><li>Conclusion </li></ul>
  4. 4. What is FBML? <ul><li>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: </li></ul><ul><ul><li>sending a user e-mail </li></ul></ul><ul><ul><li>creating a two column form </li></ul></ul><ul><ul><li>embedding flash video </li></ul></ul><ul><ul><li>creating a dashboard </li></ul></ul><ul><ul><li>displaying a header…etc </li></ul></ul><ul><li>FBML also allows the use of regular HTML tags; this allows us a great amount of flexibility when formatting content </li></ul>
  5. 5. What is it used for? <ul><li>FBML is used to tap in to various Facebook elements when building our applications. </li></ul><ul><li>Elements such as (some of which I repeated before): </li></ul><ul><ul><li>sending a user e-mail </li></ul></ul><ul><ul><li>posting on a wall </li></ul></ul><ul><ul><li>displaying a profile picture </li></ul></ul><ul><ul><li>laying out content based on the application box displayed on a user’s profile page, namely wide or narrow </li></ul></ul><ul><ul><li>creating buttons </li></ul></ul><ul><ul><li>checking if a user is in a group and much more </li></ul></ul>
  6. 6. How does it work? <ul><li>As I previously stated it works a lot like HTML. </li></ul><ul><li>We use specific tags depending on the needs of our applications </li></ul><ul><li>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 </li></ul><ul><li>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 </li></ul>
  7. 7. Where can I find documentation? <ul><li>Facebook documentation: http://developers.facebook.com/documentation.php?doc=fbml </li></ul><ul><li>The Facebook Wiki: http://wiki.developers.facebook.com/index.php/FBML_documentation </li></ul><ul><li>Facebook developer application: http://www.facebook.com/developers/ </li></ul>
  8. 8. FBML [html that works with FBML] <ul><li>a </li></ul><ul><li>abbr </li></ul><ul><li>acronym </li></ul><ul><li>address </li></ul><ul><li>b </li></ul><ul><li>bdo </li></ul><ul><li>big </li></ul><ul><li>blockquote </li></ul><ul><li>br </li></ul><ul><li>caption </li></ul><ul><li>center </li></ul><ul><li>dfn </li></ul><ul><li>cite </li></ul><ul><li>code </li></ul><ul><li>dd </li></ul><ul><li>del </li></ul><ul><li>div </li></ul><ul><li>dl </li></ul><ul><li>dt </li></ul><ul><li>em </li></ul><ul><li>fieldset </li></ul><ul><li>font </li></ul><ul><li>form </li></ul><ul><li>h1 </li></ul><ul><li>h2 </li></ul><ul><li>h3 </li></ul><ul><li>h4 </li></ul><ul><li>h5 </li></ul><ul><li>h6 </li></ul><ul><li>hr </li></ul><ul><li>i </li></ul><ul><li>img </li></ul><ul><li>input </li></ul><ul><li>ins </li></ul><ul><li>kbd </li></ul><ul><li>label </li></ul><ul><li>legend </li></ul><ul><li>li </li></ul><ul><li>ol </li></ul><ul><li>optgroup </li></ul><ul><li>option </li></ul><ul><li>p </li></ul><ul><li>pre </li></ul><ul><li>q </li></ul><ul><li>s </li></ul><ul><li>samp </li></ul><ul><li>select </li></ul><ul><li>small </li></ul><ul><li>span </li></ul><ul><li>strike </li></ul><ul><li>strong </li></ul><ul><li>style </li></ul><ul><li>sub </li></ul><ul><li>sup </li></ul><ul><li>table </li></ul><ul><li>tbody </li></ul><ul><li>td </li></ul><ul><li>textarea </li></ul><ul><li>tfoot </li></ul><ul><li>th </li></ul><ul><li>thead </li></ul><ul><li>tr </li></ul><ul><li>tt </li></ul><ul><li>u </li></ul><ul><li>ul </li></ul><ul><li>var </li></ul>
  9. 9. Code Snippet [two column form] <ul><li><fb:editor action=&quot;new.php&quot; labelwidth=&quot;50&quot;> </li></ul><ul><li><fb:editor-text label=&quot;Title&quot; name=&quot;title&quot; value=&quot;&quot;/> </li></ul><ul><li><fb:editor-text label=&quot;Author&quot; name=&quot;author&quot; value=&quot;&quot;/> </li></ul><ul><li><fb:editor-custom label=&quot;Status&quot;> </li></ul><ul><li><select name=&quot;state&quot;> </li></ul><ul><li><option value=&quot;0&quot; selected>have read</option> </li></ul><ul><li><option value=&quot;1&quot;>am reading</option> </li></ul><ul><li><option value=&quot;2&quot;>want to read</option> </li></ul><ul><li></select> </li></ul><ul><li></fb:editor-custom> </li></ul><ul><li><fb:editor-textarea label=&quot;Comment&quot; name=&quot;comment&quot;/> </li></ul><ul><li><fb:editor-buttonset> </li></ul><ul><li><fb:editor-button value=&quot;Add&quot;/> </li></ul><ul><li><fb:editor-button value=&quot;Recommend&quot;/> </li></ul><ul><li><fb:editor-cancel /> </li></ul><ul><li></fb:editor-buttonset> </li></ul><ul><li></fb:editor> </li></ul>
  10. 10. Code Snippet [profile box: wide vs. narrow] <ul><li><fb:wide>fbml intended for the wide right columm</fb:wide> </li></ul><ul><li><fb:narrow>fbml intended for the narrow left columm</fb:narrow> </li></ul>
  11. 11. Code Snippet [building a dashboard] <ul><li><fb:dashboard> </li></ul><ul><li><fb:action href=&quot;index.php&quot;>Home</fb:action> </li></ul><ul><li><fb:action href=&quot;buy.php&quot;>Buy</fb:action> </li></ul><ul><li><fb:action href=&quot;sell.php&quot;>Sell</fb:action> </li></ul><ul><li><fb:action href=&quot;stats.php&quot;>Stats</fb:action> </li></ul><ul><li><fb:action href=&quot;fly.php&quot;>Fly</fb:action> </li></ul><ul><li><fb:action href=&quot;top.php&quot;>Top</fb:action> </li></ul><ul><li><fb:action href=&quot;bank.php&quot;>Bank</fb:action> </li></ul><ul><li><fb:help href=&quot;help.php&quot;>Help</fb:help> </li></ul><ul><li></fb:dashboard> </li></ul>
  12. 12. Code Snippet [render a wallpost] <ul><li><fb:wall> </li></ul><ul><li><fb:wallpost uid=&quot;502501165&quot; t=&quot;1180070566&quot;> </li></ul><ul><li>I'm just a bit of text. </li></ul><ul><li><fb:wallpost-action href=&quot;reply.php&quot;> </li></ul><ul><li>Reply </li></ul><ul><li></fb:wallpost-action> </li></ul><ul><li></fb:wallpost> </li></ul><ul><li></fb:wall> </li></ul>
  13. 13. Code Snippet [display a linked profile picture] <ul><li><fb:profile-pic size=“t” uid=&quot;502501165&quot; linked=&quot;yes&quot; /> </li></ul>
  14. 14. Code Snippet [iframe] <ul><li><fb:iframe src=&quot;http://www.apple.com&quot;></fb:iframe> </li></ul>
  15. 15. FBML [test console] <ul><li>http://developers.facebook.com/tools.php?fbml </li></ul>
  16. 16. Conclusion <ul><li>FBML plays an important role in building applications </li></ul><ul><li>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 </li></ul><ul><li>FBML tags are still being produced, check the developer application frequently (add it if you haven’t already) for news and recent changes </li></ul><ul><li>The Facebook API is a great way to create applications and the possibility for applications are endless…Have fun! </li></ul>

×