(i.e.userengagement,viraleffect)3GettingStartedStep1:RegisteringapplicationStep2:Setting-upapplicationStep3:AuthorizingapplicationStep4:AccessinguserinformationStep5:InteractingwithFacebookStep1:RegisteringApplicationHerewegosource::iFrameFBMLTinyscreensource::Scalabilityinthelongrun(i.e.easytomovetoFacebookConnectwebsite)LetyouuseJavascript,HTML,CSS(Ajaxanyone?)EasytodebugFBMLBenefits:EasytoaccessFacebookelementsFasterloadsNote:FBMLmightbedeprecated9Step2:Setting-upApplication-CanvasHelloworld!Codingtime!DevelopmentenvironmentassumptionJavaStruts2TomcatmySqlMosttutorialsandexamplesonthewebisinPHPStep3:AuthorizingapplicationIsitrequired?No!BUTitisnecessarytocreateapersonalizeduserexperience(i.e.retrieveuseremailaddress,posttowall)Appcreatorcontrolsthedegreeofpermissionsrequiredduringauthorization13Tellmehow?14AddthisapplicationSamplecode-Part116Samplecode-Part2if(uri!=null){try{uri=java.net.URLEncoder.encode(uri,UTF-8);}catch(java.io.UnsupportedEncodingExceptione){}}url=url+&redirect_uri=+uri;out.println(varurl=\+url+\;);%if(url!=null){window.open(url,_parent,);}--/script17What’snext?Havetoknowfact!FacebookpassesuserinformationintheformofparametertothecanvasURLThisparameterisabase64urlencodedJSONobjectHuh?Simplysaying,hastobedecodedtobemeaningful!18SuperSecret/Whybother?Withintheencodedparameter,liestheveryimportantCool,sowhatisitfor?isnecessarytogainaccesstoprivateinformationgrantedduringauthorizationAndoh,FacebookdefinesthestepstodecodeFacebooksayssource:=null;StringsignedRequest=request.getParameter(signed_request);if(signedRequest==null||signedRequest.length()==0){log.error(AUTHERROR:Facebooksignedrequestismissing);returnERROR;}intcount=0;Stringpayload=null;22Samplecode-Part2//BreakthecodeusingtokenizerStringTokenizerst=newStringTokenizer(signedRequest,.);while(st.hasMoreTokens()){if(count==1){payload=st.nextToken();break;}elsest.nextToken();count++;}23Samplecode-Part3//DecodeBase64BASE64Decoderdecoder=newBASE64Decoder();//Replacespepayload=payload.replace(-,+).replace(_,/).trim();//DecodeBase64-payloadtry{byte[]decodedPayload=decoder.decodeBuffer(payload);payload=newString(decodedPayload,UTF8);}catch(IOExceptione){//TODOAuto-generatedcatchblocklog.error(ERROR:UnabletoperformBase64Decode);returnnull;}24Samplecode-Part4//JSONDecode-payloadtry{JSONObjectpayloadObject=newJSONObject(payload);//ParseJSONdataaccessToken=+payloadObject.get(oauth_token);//Retrieveoauthtoken}catch(JSONExceptione){log.error(ERROR:UnabletoperformJSONdecode);}25Step4:AccessinguserinformationThesimplicityofGraphAPIRESTstandard,returnsdatainJSONformatTrythefollowing26UtilizingaccesstokenMoststillreturnsinformationwithoutaccesstokenBUTDataislimitedtopublicinformationTrythefollowingwithaccesstokenWHILESomestrictlyrequiresaccesstoken27TheJavaWayEasywaytoexecuteGraphAPIrequestGenericfunctionssupportedGettheAPIfromSamplecodeFacebookClientfacebookClient=newDefaultFacebookClient(accessToken);JsonObjectfbUserJSON=facebookClient.fetchObject(me,JsonObject.class);StringfacebookId=fbUserJSON.getString(id);StringfirstName=fbUserJSON.getString(first_name);29Step5:InteractingwithFacebookAccessingpopularFacebookfeaturesClient-sidescriptingusingJavascriptSDKExtensivefunctionalities:FrommakingGraphAPIcallstoopeningPopularDialogs30PopularDialogsJavascriptfunctiontotriggercommonlyusedFacebookdialogsPosttowallInvitefriendsPermissionrequestedduringauthenticationapplieshere!Thefamiliarpop-up!Samplecode-Part1divid=fb-root/divscriptFB.init({appId:'YOURAPPID',status:true,//checkloginstatuscookie:false,//enablecookiestoallowtheservertoaccessthesessionxfbml:true//parseXFBML});/scriptSamplecode-Part2functionpostToWall(){FB.ui({method:'feed',name:‘FacebookDialogs',link:':’ReferenceDocumentation',description:’Dialogsprovidesimple,consistentinterface…',message:’Facebookdialogsaresoeasy'},function(response){if(response&&response.post_id){alert('Successful!');}else{alert('Uh-oh,somethingiswrong.');}});returnfalse;}Congrats!Youarenowafull-fledgeFacebookAppsDeveloper!Whydon’tchallengeyourselftodothefollowing:CreateasimpleFacebookapplicationthatincorporateswhatwehavelearntinthissessionImpressyourteacher!Claimitat