Facebook App Example

Its easy to develop and deploy facebook social networking application on a facebook environment. We are showing an example of facebook application which is not an iframe base application but a normal FBML facebook app. We are showing 3 different games swf files in a single PHP file, on click of each game tab we are loading the facebook app page with the query string and loading the game swf file. We are submitting user information and user score in database. Also and successful installation of app we are showing an activity feed. The facebook activity feed also shown when user is submitting the game score after game play. Our sample facebook application is based on PHP facebook API, JavaScript facebook API, CSS, FBML language and flash for game content. In our sample code of facebook application we are showing following points:1. 2. 3. 4. How to extract user information from facebook API and insert it in our database? How to send activity feeds from facebook application? How to set <fb:tabs> and <fb:tab-item >, on click need to highlight the clicked tab? How to request and display more than one of page content in different, different pages using PHP for our facebook application?

1. How to extract user information from facebook API and insert it in our database? User login is must to fetch user information from facebook for that we are using $facebook-> require_login() this is the facebook API function. A PHP function of facebook API is called and we need to pass required fields name as shown in this function users_getInfo($fb_user, ' first_name , uid) and in return we will get array of user information. Check it out from the below code:$fb_user = $facebook->require_login(); $data = $facebook->api_client->users_getInfo($fb_user, 'uid, pic_small, last_name, first_name, sex'); $user_id=trim($data[0]['uid']); $user_gender=trim($data[0]['sex']); $user_profile_url="http://www.facebook.com/profile.php?id=".trim($data[0]['uid']); $display_name=trim($data[0]['first_name'].' '.$data[0]['last_name']); $th_url=trim($data[0]['pic_small']);

Now after fetching user info from facebook API the next step is to insert data in our database normal and it can be done using normal PHP database functions.

2. How to send activity feeds from facebook application? Sending activity feed in other words stream publishing of user activities is very easy with javascript facebook API. We just need to call Facebook.streamPublish facebook JS API. <script> function callback(post_id, exception) { } function activity_feeds_for_submit_score(gameid,score){

var attachment = { 'name':'<facebook app name>','href':' http://apps.facebook.com/<facebook application name>/', 'description':'what ever facebook activity (facebook stream publish) feed messge you want to give type it here. You can display score like (Your Score = +score+) ', 'media' : [{'type':'image','src':'http://<domain name>/<facebook app name>/images/100x100.jpg','href':' http://apps.facebook.com/<facebook application name>'}]}; Facebook.streamPublish("", attachment, null, null, "", callback); } </script>
Note :- Also not that when ever we are calling any javascript function from flash we need to pass <fb:fbjs-bridge/> above the fb:swf swfsrc tag. Also you we wont get javascript alert if our JS function gets called from the

.swf file.

3. How to set fb:tabs and fb:tab-item, on click need to highlight the clicked tab? Below is the code in the family of FBML tabs, the fb:tabs use to display tabs in our facebook application. We can highlight single tab using selected=true. Also we can put brand name beside the tab links using float:right style sheet for the div tag.

<div style="float:right;padding-right:5px;"><b><a href="<brand url>" target="_blank">[Brand Name]</a></b></div> <fb:tabs> <fb:tab-item href="<?=$APP_URL?>?mode=g1" title="Game 1" align="left" selected="<?=(($mode=='g1'||$mode=='')?'true':'false');?>"/> <fb:tab-item href="<?=$APP_URL?>?mode=g2" title="Game 2" align="left" selected="<?=($mode=='g2'?'true':'false');?>"/> <fb:tab-item href="<?=$APP_URL?>?mode=g3" title="Game 3" align="left" selected="<?=($mode=='g3'?'true':'false');?>"/> </fb:tabs>

4. How to request and display more than one of page content in different, different pages using PHP for our facebook application? In our fb:tab tag we have added our application URL with the query string. We are passing variable called mode and passing game id to mode variable, and then we have written if condition in PHP which show if we have request for game id 1 then show game1.swf file. Below PHP code will helps you to clear your doubts. <?php if($mode=="g1"){ $swfpath="http://<domain name>/<facebook app name>/gamefile1.swf?userinfo=".$vars.""; $width="760"; $height="600"; }else if($mode=="g2"){ $swfpath="http://<domain name>/<facebook app name>/gamefile2.swf?userinfo=".$vars.""; $width="500"; $height="500";

}else{ $swfpath="http://<domain name>/<facebook app name>/gamefile3.swf?userinfo=".$vars.""; $width="760"; $height="600"; } ?>

------------------------------------------------------ Facebook App Sample code starts --------------------------------------------------<?php require_once("client/facebook.php"); require_once("db_conf.php"); require_once("db_functions.php"); $APP_URL="http://apps.facebook.com/<facebook application name>/"; $facebook = new Facebook("000000000d000009dc00000000", "0000000033005e00f6100000000"); $fb_user = $facebook->require_login(); if (!$facebook->api_client->users_isAppUser()) { $facebook->redirect($facebook->get_add_url()); } $data = $facebook->api_client->users_getInfo($fb_user, 'uid, pic_small, last_name, first_name, sex'); $mode=$_REQUEST['mode']; $vars=$data[0]['uid']."|".$data[0]['sex']."|".$data[0]['first_name'].' '.$data[0]['last_name']."|".$data[0]['pic_small']; $user_id=trim($data[0]['uid']); $user_gender=trim($data[0]['sex']); $user_profile_url="http://www.facebook.com/profile.php?id=".trim($data[0]['uid']); $display_name=trim($data[0]['first_name'].' '.$data[0]['last_name']); $th_url=trim($data[0]['pic_small']);

$connection = db_connect(); $select_user="select count(id) from user_of_facebook where user_id='".$user_id."' "; $res_user = query($select_user,$connection); list($user_count)=fetch_row($res_user); if($user_count==0 && $user_id!="undefined"){ $insert_user="insert into user_of_facebook (user_id,user_name,profile_url,gender,thumbnil_url,registerdate) values('".$user_id."','".$display_name."','".$user_profile_url."','".$user_gender."','".$th_url."',now())"; //echo $insert_user; query($insert_user,$connection); ?> <script> var attachment = { 'name':'<facebook app name>','href':'<?echo $APP_URL;?>', 'description':'<?php echo $display_name;?> what ever facebook activity (facebook stream publish) feed messge you want to give type it here.', 'media' : [{'type':'image','src':'http://<domain name>/<facebook app name>/images/100x100.jpg','href':'<?echo $APP_URL;?>'}]}; function callback(post_id, exception) { } Facebook.streamPublish("", attachment, null, null, "", callback); </script> <?php } else{ //duplicate entry }

$status = @db_disconnect($connection);/**/ ?> <div style="float:right;padding-right:5px;"><b><a href="<brand url>" target="_blank">[Brand Name]</a></b></div> <fb:tabs> <fb:tab-item href="<?=$APP_URL?>?mode=g1" title="Game 1" align="left" selected="<?=(($mode=='g1'||$mode=='')?'true':'false');?>"/> <fb:tab-item href="<?=$APP_URL?>?mode=g2" title="Game 2" align="left" selected="<?=($mode=='g2'?'true':'false');?>"/> <fb:tab-item href="<?=$APP_URL?>?mode=g3" title="Game 3" align="left" selected="<?=($mode=='g3'?'true':'false');?>"/> </fb:tabs>

<?php if($mode=="g1"){ $swfpath="http://<domain name>/<facebook app name>/gamefile1.swf?userinfo=".$vars.""; $width="760"; $height="600"; }else if($mode=="g2"){ $swfpath="http://<domain name>/<facebook app name>/gamefile2.swf?userinfo=".$vars.""; $width="500"; $height="500"; }else{ $swfpath="http://<domain name>/<facebook app name>/gamefile3.swf?userinfo=".$vars.""; $width="760"; $height="600"; } ?> <fb:fbjs-bridge/> <div align="center" style="background-color:#000;"> <fb:swf swfsrc='<?php echo $swfpath;?>' bgcolor='#000000' flashvars='' width='<?php echo $width;?>' height='<?php echo $height;?>'></fb:swf> </div> <script> <!-function callback(post_id, exception) { } function activity_feeds_for_submit_score(gameid,score){ var gamename=""; var imgname=""; var attachment = { 'name':'<facebook app name>','href':'<?echo $APP_URL;?>', 'description':'<?php echo $display_name;?> what ever facebook activity (facebook stream publish) feed messge you want to give type it here.', 'media' : [{'type':'image','src':'http://<domain name>/<facebook app name>/images/100x100.jpg','href':'<?echo $APP_URL;?>'}]}; Facebook.streamPublish("", attachment, null, null, "", callback); } --> </script> ------------------------------------------------------ Facebook App Sample code ends ---------------------------------------------------

Sign