Slideshow Transcript

1. Slide 1: P a rt of th e F a c e book De ve lope r G a ra g e s e rie s
2. Slide 2: F a c e b ook (F B ML) by: sunil boodram em: sunil.boodram@gmail.com
3. Slide 3: Ta b le Of C onte nts • Wh a t is F B ML? • Wh a t is it us e d for? • How doe s it work? • Wh e re c a n I find doc ume nta tion? • F B ML (HTML ta g lis t) • Code S nippe ts • Conc lus ion
4. Slide 4: Wh a t is F B ML? • F B ML is a n a c ronym for “F a c e book Ma rkup La ng ua g e .” It ope ra te s a lot like HTML a nd it g ive s us th e a bility to do va rious ta s ks with e a s e s uc h a s : – s e nding a us e r e -ma il – c re a ting a two c olumn form – e mbe dding fla s h vide o – c re a ting a da s h boa rd – dis pla ying a h e a de r…e tc • F B ML a ls o a llows th e us e of re g ula r HTML ta g s ; th is a llows us a g re a t a mount of fle xibility wh e n forma tting c onte nt
5. Slide 5: Wh a t is it us e d for? • F B ML is us e d to ta p in to va rious F a c e book e le me nts wh e n building our a pplic a tions . • E le me nts s uc h a s (s ome of wh ic h I re pe a te d be fore ): – s e n d in g a u s e r e -m a il – p os tin g on a wa ll – d is pla yin g a profile pic tu re – la yin g ou t c o nte n t b a s e d o n th e a p plic a tio n b o x d is p la ye d o n a u s e r’s pro file pa g e , na m e ly wid e or na rro w – c re a ting b utton s – c h e c kin g if a us e r is in a g rou p a n d m u c h m o re
6. Slide 6: How doe s it work? • As I pre vious ly s ta te d it works a lot like HTML. • We us e s pe c ific ta g s de pe nding on th e ne e ds of our a pplic a tions • One e xa mple is fb:g oog le -a na lytic s , wh ic h g e ne ra te s th e s nippe t of c ode we us e to ins e rt in our pa g e s , if we us e G oog le a na lytic s for s ta tis tic a l pa g e tra c king • F a c e book a ls o a llows th e us e of re g ula r HTML ta g s , s uc h a s <a h re f=”#”></ >, wh ic h is us e d to g e ne ra te a a h ype rlink. F a c e book a ls o a llows th e us e of ma ny more HTML ta g s for building a pplic a tions
7. Slide 7: Wh e re c a n I find doc um e nta tion? • F a c e book doc ume nta tion: h ttp:/ de ve lope rs .fa c e b ook.c om / um e nta tion.ph p? doc =fb m l / doc • Th e F a c e book Wiki: h ttp:/ wiki.de ve lope rs .fa c e b ook.c om / / inde x.ph p/ B ML_doc um e nta tion F • F a c e book de ve lope r a pplic a tion: h ttp:/ www.fa c e b ook.c om / ve lope rs / / de
8. Slide 8: F B ML [h tml th a t works with F B ML] • s ub • a • h4 • s up • abbr • h5 • table • acronym • h6 • tbody • addres s • hr td • b • • i textarea • bdo • img • • tfoot • big input • • th • blockquote • ins • thead • br • kbd • tr • captio n • label • tt • center • le gend u • dfn • • li ul • cite • ol • • var • code optgroup • • dd • optio n • del • p • div • pre • dl • q dt • s • em • s amp • • fields et • s ele ct • font • s mall • form • s pan • h1 • s trike h2 • • s trong h3 • s tyle •
9. Slide 9: C ode S nippe t [two c olumn form] <fb:e dito r ac tion=\"ne w.php\" labe lwidth=\"50\"> <fb:e dito r-te xt labe l=\"Title \" name =\"title \" value =\"\"/> <fb:e dito r-te xt labe l=\"Author\" name =\"author\" value =\"\"/> <fb:e dito r-c us tom labe l=\"Status \"> <s e le c t name =\"s tate \"> <option value =\"0\" s e le c te d>have re ad</option> <option value =\"1\">am re ading</option> <option value =\"2\">want to re ad</option> </s e le c t> </fb:e dito r-c us to m> <fb:e dito r-te xtare a labe l=\"Comme nt\" name =\"c omme nt\"/> <fb:e dito r-butto ns e t> <fb:e ditor-butto n value =\"Add\"/> <fb:e ditor-butto n value =\"Re c omme nd\"/> <fb:e ditor-c anc el /> </fb:e dito r-buttons et> </fb:e dito r>
10. Slide 10: C ode S nippe t [profile box: wide vs . na rrow] <fb :wide >fb m l inte nde d for th e wide rig h t c olum m </ :wide > fb <fb :na rrow>fb m l inte nde d for th e na rrow le ft c olum m </ :na rrow> fb
11. Slide 11: C ode S nippe t [building a da s h boa rd] <fb :da s h b oa rd> <fb :a c tion h re f=\"inde x.ph p\">Hom e </ :a c tion> fb <fb :a c tion h re f=\"b uy.ph p\">B uy</ :a c tion> fb <fb :a c tion h re f=\"s e ll.ph p\">S e ll</ :a c tion> fb <fb :a c tion h re f=\"s ta ts .ph p\">S ta ts </ :a c tion> fb <fb :a c tion h re f=\"fly.ph p\">F ly</ :a c tion> fb <fb :a c tion h re f=\"top.ph p\">Top</ :a c tion> fb <fb :a c tion h re f=\"b a nk.ph p\">B a nk</ :a c tion> fb <fb :h e lp h re f=\"h e lp.ph p\">He lp</ :h e lp> fb </ :da s h b oa rd> fb
12. Slide 12: C ode S nippe t [re nde r a wa llpos t] <fb :wa ll> <fb :wa llpos t uid=\"502501165\" t=\"1180070566\"> I'm jus t a b it of te xt. <fb :wa llpos t-a c tion h re f=\"re ply.ph p\"> R e ply </ :wa llpos t-a c tion> fb </ :wa llpos t> fb </ :wa ll> fb
13. Slide 13: C ode S nippe t [d is p la y a linke d profile p ic ture ] <fb :profile -pic s iz e =“t” uid=\"502501165\" linke d=\"ye s \" />
14. Slide 14: Code S nippe t [ifra m e ] <fb :ifra m e s rc =\"h ttp:/ www.a pple .c om \"></ :ifra m e > / fb
15. Slide 15: F B ML [te s t c ons ole ] h ttp:/ de ve lope rs .fa c e b ook.c om / / tools .ph p? fb m l
16. Slide 16: Conc lus ion • F B ML pla ys a n importa nt role in building a pplic a tions • Wh e n you de c ide wh a t your a pplic a tion will c ons is ts of, c h e c k th e doc ume nta tion to s e e if a n F B ML ta g e xis ts , wh ic h c a n ma ke your job e a s ie r • F B ML ta g s a re s till be ing produc e d, c h e c k th e de ve lope r a pplic a tion fre que ntly (a dd it if you h a ve n’t a lre a dy) for ne ws a nd re c e nt c h a ng e s • Th e F a c e book AP I is a g re a t wa y to c re a te a pplic a tions a nd th e pos s ibility for a pplic a tions a re e ndle s s …Ha ve fun!