Viet Ung Dung Facebook

Vit ng dng cho Facebook bng Asp.net [Phn 1 - Chng 1 - Bc 2]

Facebook c vit bng ngn ng lp trnh PHP v hin nhin cc ng dng vit cho facebook cng c vit bng PHP nt, 1 iu m cc lp trnh vin ASP.NET ch thch th cht no khi mun pht trin cc ng dng ca mnh trn facebook . TCS cng c n o nh vy nn th tm cch tng tc gia ASP.NET vi Facebook thng qua lot bi vit ny.

Chng 1:(c 7 bc) Trong chng ny chng ta s ni v nhng ci c bn nht cn phi c ca 1 facebook application, qua tng step 1 cc bn s hiu r hn v cc facebook application hin ang c s dng trn facebook.

Bc 1: To lp ng dngiu u tin l bn phi to ring cho mnh 1 ng dng facebook > http://www.facebook.com/developers/ Click vo button : Ci t ng dng mi

Tip tc to tn cho ng dng

Nhp m bo v

To lp xong cc bc cn thit sau cc bn n tab Facebok Integration

Trong Canvas Page URL s l ng link ng dng ca bn. Canvas URL chnh l a ch gc m ng dng bn vit s c lin kt vi facebook. a ch trong hnh l do TCS ly sn ng dng TCS to lp demo cho d ch host TCS ang s dng l host linux, nu bn mun ng dng th cc demo ca mnh c th reg cho mnh 1 host free asp.net xi tm cng c. Reg here (hng free nhng cng kh tt ) Trong tab Advanced : iu ny c ngha l ch c cc developer mi c th add ng dng ca bn (ty vo s la chn ca bn) Xong xui nh bm Lu li ht nh v sau bn s c 2 key phi quan tm : API KEY v Application Secret , 2 key ny tng ng vi mt khu nn cn bo mt

Bc 2: Thit lp mi trng bc ny chng ta s thc hin cc thao tc thit lp 1 mi trng lm vic facebook asp.net . C l bn nn quan tm n Facebook Graph Toolkit 1.5 Khi download thnh cng cc bn s c cc file nh sau:

OK gi ta n phn chnh ca bc ny, by gi ta s dng Microsoft Visual Studio 2008 thao tc Trong Solution Explorer click chut phi ln th mc gc v chn Add Reference

Sau cc bn tr n th mc va download v add cc file DLL vo

Tinh chnh trong WEB. ConfigCng vic tip theo ca chng ta l chn Add New Item>Web Configuration File add web.config vo ng dng ca chng ta. a n code sau vo iu ny cn thit c th thao tc vi Facebook Graph Toolkit

PostAuthorizeRedirectURL chnh l ng link m bn mun hin th ngay sau khi Facebook chng thc xong ng dng. Mo nh ch ny bn c th lm 1 trang dng nh cho mng bn n vi ng dng ny hoc i loi cc cu cho mng thnh vin tham gia tr chi vy. WebTimeOut: l khong thi gian Facebook Graph Api gi yu cu ti ng dng, mc nh l 5000 ( y l million giy) CachePolicy:chnh l khong thi gian m Facebook cache trn asp.net server mi khi c kt qu tr v, y thi gian l giy.

UPDATE: Lp trnh ng dng cho Facebook s dng Eclipse Galileo Develop a #Facebook #app with #Eclipse Galileo Learn the Facebook Connect API http://su.pr/AckWqo Vit facebook app bng .NET (dng VS2008 v b Toolkit ngun m):http://www.stevetrefethen.com/wiki/Facebook%20application%20development%20in%20ASP.N ET.ashx Ngy 18/11/2010, Facebook thng bo mt tnh nng mi cho cc lp trnh vin. Chng ta c th to TestUser th nghim ng dng m ko phi lo lng v chuyn b Facebook coi l spam. Cc testUser c th kt bn vi nhau (ko cn accept). Khi dng xong c th xo i.

TestUser khng tng tc vi cc account tht ca Facebook c,v cng khng chuyn i thnh account tht c. Khng truy xut c cc ni dung cng khai trn cc Page (tht, hin c). http://mashable.com/2010/11/17/facebook-test-users/CN

c http://developers.facebook.com/get_started.php Chun b k thut, server Thm ng dng Facebook Developer vo account Facebook ca mnh, y l ch qun l v cu hnh cc ng dng m bn pht trin Thit lp tham s cho ng dng mi ca bn Pht trin ng dng ca bn Qun l ng dng ca bn Cn c facebook account Cn bit lp trnh mt ngn ng (dng vit) web no , VD nh PHP, Ruby on Rails, JavaScript, Python, ASP.NET Nht l nhng nn tng ngn ng c sn th vin API vit Facebook app (PHP, ASP.NET).

Hiu bit c bn v Internet, SSH, MySQL, v Unix Bit s dng Web hosting, c host xi ( cha ng dng ca bn) Server cn chy c HTML, ti thiu mt nn tng lp trnh web PHP (c cURL) v/hoc .NET. Nu c kt ni CSDL cng tt Cn ci ng dng Developer ca Facebook Vo mc ny http://www.facebook.com/developers/ , chn allow ( s dng facebook app Developer trong profile ca mnh) Nhn Set Up New Application. Khai bo, submit. Xem thm v cc trng c th khai bo ti y:http://wiki.developers.facebook.com/index.php/Creating_a_Platform_Application

C 2 THNG TIN QUAN TRNG CN LU :

* API key: chui ny l nh danh ng dng ca bn vi Facebook (v sau khi gi API ti facebook lun phi nh chui ny vo) * Chui b mt ca ng dng: Facebook s dng key ny xc nh ng dng no ang gi, bn ko c share key ny cho ai khc. Lu , mi khi sa thng tin ca App, s mt vi chc pht update trn cc Server ca FB. Cc trng thng tin cn sa l:

Canvas Page URL (url trn facebook truy cp ng dng ca bn, lc test bn s chy th t URL ny) Canvas Callback URL (url ca ng dng, m bn host trn site)

TM LI

y l m hnh ca ng dng trn Facebook: User Facebook Website ca bn (hay ng dng ca bn) Do vy, bn nht thit phi c mt webserver trn mng (hosting, hoc server ring). PHP v MySQL l nn c, d khng bt buc.

MT S PHN QUAN TRNG NG DNG CA BN THC S TR THNH MT PHN CA

FACEBOOK

Kiu dng ph hp http://devtacular.com/articles/bkonrad/how-to-style-an-application-likefacebook/ Lit k App ln Application Directory Chnh sa cc thng tin c bn ca ng dng tht y , nht l trang About ca App Canvas Page: l ni hin th chnh ca ng dng, l ni cho user tng tc vi App ca bn Profile Box: ng dng ca bn c th c hin th trn trang Profile ca user Application Menu: menu nh bn di gc phi, tng t nh menu Start ca Windows.

XI FBML HAY IFRAME CHO NG DNG CA BN ?

http://wiki.developers.facebook.com/index.php/Choosing_between_an_FBML_or_IFrame_Applicati on FBML

Dng trang nhanh d, dng th ca facebook

Th hin cc thnh t c bn ca facebook rt n gin (ch cn ghi th tng ng l xong) URL v kim tra xc thc user n gin

IFrames

Linh hot, thch vit g th vit, v bn cht l User tng tc vi trc tip vi trang nm trn hosting ca mnh Chuyn cc ng dng c sn sang dng Facebook d dng Nhanh hn khi s dng, User view trang khng cn qua Proxy ca FB render cc th S dng JavaScript, HTML, CSS ca mnh (xi jquery, blueprint v t) Chy ajax nhanh hn do user chy trc tip trang ca mnh (khng qua proxy) Debug d hn (v m HTML v js l nguyn bn) vn chnh c kch thc (auto resize), khng ngi b scrollbar (dng thm js ca facebook trong iframe)

Khuyn dng

nn xi iframe, ko phi ti np cc thnh phn topbar v appbar,chatbar ca Facebook, vn tn dng c tt FBML nu dng XFBML.

JS ca facebook s scan DOM v render li cc th fb trn chnh browser, bt c cc vng roundtrip trn app server ca mnh trch xut dc URL trong iframe ca mnh ra trang facebook container (dng js ca facebook trong iframe ca mnh) Nu ang dng iframe, c th chuyn trang thnh dng FBML, s dng fb_force_mode C th dng HTML, nh du, v dng javascript lib ca Facebook c kh nng hin th tng t FBML http://wiki.developers.facebook.com/index.php/Using_HTML_to_Imitate_XFBML

CC THNH PHN C BN QUAN TRNG CA FACEBOOK APP

* API, gi hm, ly d liu tr v t Facebook. * FBML, Facebook Markup Language, ngn ng m t ca Facebook, khi ng dng tr v FBML, i qua Proxy ca Facebook, cc th fbml s c render tr v HTML thc cho User.

* XFBML, mt m rng ca FBML, s dng javascript render FBML trn trnh duyt ca User, khng i qua proxy. * FQL, Facebook Query Language, ly d liu s dng dng ngn ng ta nh SQL query, khng cn dng API. Gim ti li gi API, ch ly nhng g cn, trnh dng nhiu round trip (nhiu ln gi API) ly thng tin. (cch dng tng t nh gi API v n l mt hm API

m, bn gi API fql.query vi tham s l query ca bn) http://developers.facebook.com/news.php?blog=1&story=257

* FBJS, Facebook javascript

FACEBOOK CONNECT

bit c user facebook ang trn site ca bn a bn b ln site ca bn xut bn thng tin mi t site ln stream ca cc bn facebook connect lm cho user comment c thng tin trn site bn, v hin c trn facebook

DI C NG DNG WEB SOCIAL CA BN LN FACEBOOK

Chuyn ht kho user ln facebook account:http://wiki.developers.facebook.com/index.php/Express_Registration

TNG HP CC KIN THC FACEBOOK

Social Plugins Authentication Personalization Analytics

http://developers.facebook.com/docs/guides/web/

nh gi

Lp trnh vit ng dng Facebook

0

Phng Lm

Cm gic ca bn th no khi nhn thy c thnh phm ca mnh trn Facebook? Bi vit s gi cho bn cch to mt ng dng nh trn Facebook. Hin ti, theo thng k danh mc ng dng ca Facebook c cha khong hn 550.000 ng dng. Bn mun nhng nhng bi trnh by trong h s Facebook ca mnh hay mun chia s nhng quyn sch v b phim yu thch vi bn b, hay ch mun chi mt s tr chi vi nhng thnh vin "khng quen" khc trn Facebook. Tt c iu ni trn s c cc ng dng hin c trn Facebook p ng cho bn. Tuy nhin, nu bn khng thch dng nhng ng dng c dn sn v khng mun nhn thy nhng thng hiu ca hng th 3 hay cc mu qung co, th bn c th t pht trin ng dng Facebook theo cch ring. Di y s l mt s bc gip bn to ra ng dng nh trn Facebook theo mun; y ch l nhng v d n gin v vit ng dng Facebook dng code HTML v ASP.Net. vit ng dng Facebook, bn cn mt s kin thc v cc ngn ng lp trnh web v cn bit mt s my ch (web server) cho php bn c th t ng dng Facebook ln . 1. ng dng Facebook dng code HTML Bc 1: Gi s bn c ti khon trn Facebook, thm ng dng Developer (https://www.facebook.com/developers/) vo h s Facebook ca bn, sau nhn Set Up New App.

Bc 2: Bn t tn cho ng dng Facebook, ng vi nhng iu khon trn Facebook. Tip tc nhp m bo v, sau bn c th ti ln mt s hnh nh chn lm biu tng (logo) cho ng dng ca bn. Bc 3: Bn c th dng cng c trnh bin tp WYSIWYG HTML hay notepad, ghi ni dung bn mun hin th bn trong ng dng Facebook. Trong v d ny s thit lp ng dng my tnh in t (calculator). PC

PC World VN Calculator by JavaScript

value="0" value="." value="=" value="+"

style="width:40px" style="width:40px" style="width:40px" style="width:40px"

Bc 4: Truy cp my ch web ca bn, to mt th mc con gi l facebook v ti ln file code (index.php hay index.html) m bn to trn. Trong trng hp ny, ng dng c t trn my ch web www.thegioigame.vn. Cavas Page: l ng dn URL cho ng dng (http://apps.facebook.com/tgvt_fb_app/ ). Canvas URL: l ni t dch v web (web service) lu tr ng dng s c lin kt vi Facebook (http://www.thegioigame.vn/facebook ). Hon tt xong bn nh lu li cc thao tc va lm. Bn hy quan tm n 2 kha: API Key v App Secret, 2 kha ny cn khai bo trong ng dng khi c truy cp th vin (API) ca Facebook. Bc 5: Thnh qu cui cng ca bn. chnh l ng dng ca ring bn hin c mt trn Facebook. Qua 5 bc ny s gip bn phn no hnh dung ra cch thc to mt ng dng n gin trn Facebook. Cc bn cng c th t to nhng ng dng khc theo s thch v nhu cu ca ring mnh. T ng dng n gin ny, bn cng c th xy dng cc ng dng c mc phc tp hn, chng hn c km thm RSS cp nht tin tc, chn thm cc on video clip Hy vng cc bn s to c nhiu ng dng b ch v hu dng chia s cng vi bn b.

2. ng dng Facebook vi ASP.NetBc 1: ng nhp vo facebook: https://www.facebook.com/ Vo phn pht trin ng dng: https://www.facebook.com/developers/ , nhn nt Set Up New App to ng dng mi. Bc 2: in tn ng dng v chn ng , nhn nt khi to.

Nhp m xc nhn ri submit. Bc 3: Tab About: C th m t ng dng trong phn Description, chn icon, logo cho ng dng Tab Facebook Integration Application ID v Application Secret l 2 key ca ng dng cho php ta vit code truy xut thng tin. Canvas Page l trang ng dng facebook. Canvas URL s l trang ASP.Net m ta vit code truy xut thng tin. Trong v d ny, m lnh (code) s c a ln 1 host free http://phuonglam.somee.com. Cc bn c th vo trang http://somee.com/ ng k 1 host free s dng, trang ny h tr kh tt ASP.Net tt c framework, tuy nhin trang hin th s b phn qung co pha trn v di (chu thi, cha m). Hon tt, nhn Save Changes ng dn ca ng dng s l: http://apps.facebook.com/pcwsample/ Bc 4: Download Ci t Starter kit: Bc 5: Khi chy Visual Studio to website. Chn Facebook Starter Kit v2.1 Bc 6: Starter Kit tch hp vo Visual Studio.

Code; chnh tp tin web.config cc key cho ng vi ng dng Facebook to ban u.

Starter Kit s t to cho chng ta trang Default.aspx c ni dung nh hnh v: Ghi ch Image1 hin th hnh nh ca ngi to ng dng. Control FriendList1 s lit k hnh bn b ca ngi to ng dng. DropDownList1 thay i s lm thay i Image2 hin th hnh nh bn trong danh sch bn b friend list. Bc 7: a website ln host free to. Bc 8: Chy ng dng facebook: http://apps.facebook.com/pcwsample/ Hp Kt thoi Request qu for Permission hin cui ra, chn Allow. cng:

Chc cc bn thnh cng!