facebookcamp toronto fbml
DESCRIPTION
A presentation on the Facebook FBML (facebook markup language)TRANSCRIPT
![Page 1: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/1.jpg)
Part of the Facebook Developer Garage series
![Page 3: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/3.jpg)
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
![Page 4: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/4.jpg)
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
![Page 5: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/5.jpg)
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
![Page 6: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/6.jpg)
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
![Page 7: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/7.jpg)
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/
![Page 8: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/8.jpg)
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
![Page 9: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/9.jpg)
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>
![Page 10: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/10.jpg)
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>
![Page 11: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/11.jpg)
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>
![Page 12: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/12.jpg)
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>
![Page 13: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/13.jpg)
Code Snippet [display a linked profile picture]
<fb:profile-pic size=“t” uid="502501165" linked="yes" />
![Page 14: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/14.jpg)
Code Snippet [iframe]
<fb:iframe src="http://www.apple.com"></fb:iframe>
![Page 15: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/15.jpg)
FBML [test console]http://developers.facebook.com/tools.php?fbml
![Page 16: Facebookcamp Toronto FBML](https://reader035.vdocument.in/reader035/viewer/2022081602/55585658d8b42a943b8b4c7f/html5/thumbnails/16.jpg)
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!