• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Facebookcamp Toronto FBML
 

Facebookcamp Toronto FBML

on

  • 13,882 views

A presentation on the Facebook FBML (facebook markup language)

A presentation on the Facebook FBML (facebook markup language)

Statistics

Views

Total Views
13,882
Views on SlideShare
13,775
Embed Views
107

Actions

Likes
7
Downloads
273
Comments
0

4 Embeds 107

http://www.slideshare.net 65
http://rizzblow.blogspot.com 28
http://www.caranya.info 13
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Facebookcamp Toronto FBML Facebookcamp Toronto FBML Presentation Transcript

    • 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=&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>
    • 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>
    • 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>
    • Code Snippet [display a linked profile picture]
      • <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>
    • 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!