to keep record lets create a table named users .

CREATE TABLE `friends` (
`uid` INT NOT NULL ,
`rid` INT NOT NULL ,
) ;

then you have to add a small code snippet in the invitation code.we just need to add &next=’.urlencode(’?rid=’.$user).

have a look in side the content there is a php line which will show the choose with a url .
just after adding the new code the url will look like

echo htmlentities('<fb:req-choice url="http://www.facebook.com/add.php?api_key='.$appapikey.'next='.urlencode('?rid='.$user).'" label="app name" />');

now we have to change the setting of the application .and change the Post-Add Redirect URL like this

this is the install.php

include ‘config.php’;

//$url is ur desired location where u want to user to be redirected after installation (ie : invite page) ;
$url = "http://apps.facebook.com/appname/invite.php";

mysql_query(“insert into users value (‘$user’,$_GET[‘rid’]);”);

$facebook->redirect($url);
?>

how dose it works ? first we are sending the current user id in invitation page. and as we set the Post-Add Redirect URL to a page when any user install the application from the invitation he/she will be redirect to the install.php page and the first user who invited him/her will be passed to install.php page using HTTP GET method .they store those 2 user id as u want .

while developing facebook applications, sometimes we don’t like to use the default facebook popup dialog box, we want to resize/modify to show it on our own way. but how can we do it? we don’t have the css class on our hand right. but don’t worry, we have this simple trick to make it on our own way.

let’s see how we can do it….

first let’s see how a default popup box looks like. let’s print something pretty simple and set a button that will call the javascript function which will create the default popup dialog box. following code will do it for us..

<?php
include_once("config.php");
?>
<input type="button" value="click me" onclick=" return showMe()">
<script language="javascript">
function showMe()
{
   new Dialog().showMessage('Hi There', ' Hi, i\'m a default pop-up, but shh you can play with me!' );
}
</script>

and this will generate a popup like the following screen shot.

Default Dialog Box

now, we want to change this default dialog box right. ok, this default dialog box uses some css classes which can be found using firefox add on firebug. one of them is called “dialog_body” which contains the body of the dialog box. Idea is to overwrite the css class to make it our own let’s change the “dialog_body” class in the following way…

<style>
.dialog_body{
   background-color:#CCCCCC !important;
   font-weight:bold !important;
   font-size:16px;
   text-align:center !important;
   padding-left:0px !important;
   padding-top:10px!important;
   padding-bottom:10px!important;
}
</style>

just set the “!important” to get the priority over the existing properties. now let’s see how out new dialog box looks like ..

Changed Dialog Box

cool eh?
now, how about make this popup dialog box wider than the default size? well, we have that trick too!
this css class called “pop_dialog_table“, which holds the whole dialog box’s div. so increasing it’s width will also increase the size of the dialog box. so let’s do it!

<style>
.pop_dialog_table {
   width: 650px !important;
}
</style>

how this will look like then? have a look at the following screen shot

Wider Dialog Box

simple eh? hope it helps to play with this popup dialog box on your own way!

there are two things we are going to discuss in this article. both of these are very important issues for successful marketing of your app, to generate precise traffic report. and if you want to sell your app or generate revenue, traffic report is very important. so we are going to show you how to maintain a precise list of your active users and how to precisely remove them when they remove your app.

keeping track of your users
this one is fairly easy. but beside storing their user id you should keep track of their session ids. why? for extended permissions and for viral marketing. lets create a mysql table for storing these data, along with the active/inactive

+------------+---------------------+------+-----+---------+-------+
| Field      | Type                | Null | Key | Default | Extra |
+------------+---------------------+------+-----+---------+-------+
| uid        | bigint(20) unsigned | NO   | PRI |         |       |
| sessionkey | varchar(128)        | YES  |     | NULL    |       |
| active     | char(1)             | YES  | MUL | 1       |       |
+------------+---------------------+------+-----+---------+-------+

here is the SQL

CREATE TABLE `users` (
  `uid` bigint(20) unsigned NOT NULL,
  `sessionkey` varchar(128) default NULL,
  `active` char(1) default '1',
  PRIMARY KEY  (`uid`),
  KEY `activity` (`active`)
)

now can you remember that there is a field named “Post authorize redirect url” in the “Authentication” tab of your application settings page? set the data in that field before proceeding further. have a look at the following screenshot. you can see it’s enlarged view by clicking on it

now lets see how to store the user ids and their corresponding session key. in the following code block there are two functions for storing user ids in your database and for updating their session key.

<?php
/**
 * insert a new user and corresponding session key in the users table
 *
 * @param int $uid user id
 * @param string $sk session key
 * @param resource $db mysql connection resource
 * @return bool
 */
function insertUser($uid,$sk,$db)
{
    $data= mysql_query("select uid from users where uid='{$uid}'",$db);
    if(mysql_num_rows($data)==0)
    {
        $sql = "INSERT INTO users (uid,sessionkey, active) VALUES('{$uid}','{$sk}','1')";
        mysql_query($sql,$db);
        return true;
    }
    return false;
}

/**
 * update an user's corresponding session key in users table
 *
 * @param int $uid user id
 * @param string $sk session key
 * @param resource $db mysql connection resource
 * @return bool
 */
function updateSessionKey($uid,$sk,$db)
{
   return mysql_query("update users set sk = '{$sk}' where uid='{$uid}",$db);
}

?>

now in your install.php all you have to do is place the following code.

include_once("config.php");
$sk = $facebook->api_client->session_key;

$db = mysql_connect('host','user','db');
mysql_select_db("db",$db);

insertUser($uid,$sk, $db);
echo "<fb:redirect url='YourApplicationUrl' />";

thats it. now you can periodically update your user’s session key to stay uptodate using updateSessionKey() function.

how to remove your user
remember in the previous screenshot there was a field named “Post-Remove Callback URL” in the application setup page? when any of your application users remove this application from their account, facebook sends some information to this callback url so that you, the application developer, can successfully take necessary steps to remove this user from your database or set the inactive flag “ON”. lets see how to do this. here is the code of “remove.php”

<?php
include_once("config.php");
$facebook = new Facebook($apikey, $secret);
$user = $facebook->get_loggedin_user();
if ($user != NULL &amp;amp;&amp;amp; $facebook->fb_params['uninstall'] == 1)
{
    makeUserInactive($uid,$db); //$db is your mysql link indentifier
}

/**
 * set an user as inactive, indicating that user has removed your application
 *
 * @param int $uid user id
 * @param resource $db mysql connection resource
 * @return bool
 */
function makeUserInactive($uid,$db)
{
    return mysql_query("update users set active = '0' where uid='{$uid}",$db);
}
?>

thats it! for reference you can check out facebook wiki entry.

before proceeding the main topic, at first i want to describe how to develop iframe based facebook application. i assume that, the reader have minimum knowledge of how to develop canvas based facebook application. if you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/creating_your_first_application

steps of developing iframe based facebook application:

1. when you setup a new application in facebook, choose “use iframe” for canvas page url.
2. now set the authentication code, at your bootstrap file:

<?php
include “facebook.php”;
$facebook = new facebook(’api_key’, ’secret_key’);
$user = $facebook->require_login();

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isappadded()) {
$facebook->redirect($facebook->get_add_url());
}
}
catch (exception $ex) { //this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect(callback_url);
}
?>

3. and don’t forget to place the necessary facebook php library. http://wiki.developers.facebook.com/index.php/php

now i’m describing the main topic, that is how to render xfbml or fbml in your iframe based application.

1. first create a file called xd_receiver.htm
2. place xd_receiver.htm in the root directory. suppose your application base directory is: http://myapp.com/iframeapp . then place xd_receiver.htm in iframeapp folder. now add the following html code to xd_receiver.htm .

<!doctype html public “-//w3c//dtd xhtml 1.0 strict//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>cross-domain receiver page</title>
</head>
<body>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/xdcommreceiver.debug.js” type=”text/javascript”></script>
</body>
</html>

now in your view file, or may be layout file, place this code. here i’m showing the layout files format for iframe application.

<!doctype html public “-//w3c//dtd xhtml 1.0 strict//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

<head>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/featureloader.js.php” type=”text/javascript”></script>

</head>

<body>

<!– here is the fbml code in iframe application –>

<fb:serverfbml>
<script type=”text/fbml”>
<fb:fbml>

<fb:request-form action=”<url for post invite action, see wiki page for fb:request-form for   details>” method=”post” invite=”true” type=”xfbml” content=”this is a test invitation from xfbml test app <fb:req-choice url=’see wiki page for fb:req-choice for details’ label=’ignore the connect test app!’ />  ” >  <fb:multi-friend-selector showborder=”false” actiontext=”invite your friends to use connect.”>  </fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>

<!– here is the xfbml code –>

this is <fb:name uid=”<?=$this->userid?>” useyou=’false’> </fb:name>
my photo <fb:profile-pic uid=”<?=$this->userid?>” > </fb:profice-pic>

<!– remember all xfbml tags should be placed before below javascript code –>

<script type=”text/javascript”>
fb_requirefeatures(["xfbml"], function(){
fb.facebook.init(”place here the api key of your application“, “xd_receiver.htm”);
});
</script>

</body>

</html>

** remember xfbml is nothing but a subset of fbml that are supported for iframe application.

<fb:serverfbml> : this tag is used to renders the fbml on a facebook server inside an iframe. details of this tag is here: http://wiki.developers.facebook.com/index.php/fb:serverfbml

references:

1. http://wiki.developers.facebook.com/index.php/xfbml
2. http://wiki.developers.facebook.com/index.php/cross-domain_communication_channel
3. http://wiki.developers.facebook.com/index.php/php
4. http://wiki.developers.facebook.com/index.php/creating_your_first_application

sounds crazy right? but actually you can make a great use of this feature in your facebook application. lets think that your application is kind of a todo-list or birthday reminder. now your users will create tasks or added friend to be notified when their birthdays arrive, or when the eta of a task is in 24 hours. in these cases you may have to update those user’s profile in background so that when they visit their profile page – they will see the latest information, and that will be very useful for them.

there are two ways to accomplish this task

1. by calling setFBML offline, using any of user’s session key.
2. by using <fb:ref /> with an url handler, which is a smart way indeed.

in this article i am going to focus on first technique. next article will focus on 2nd one.

updating using profile_setFBML()
to use this api offline, you first need a session key. the following code will print the session key for you.

<?php
echo $facebook->api_client->session_key;
?>

this code will output something like “6de106fa7e2de0820b091f12-503274632” which is my session key for this application.

now you can update all of your user’s profile using the following code. please note that i have used batch api for the sake of performance.

<?php
require_once 'client/facebook.php';

$appapikey = 'ff0b3d87fc42915533e15dc238f2d447';
$appsecret = 'app_secret_key';
$sessionkey = "6de106fa7e2de0820b091f12-503274632";
$facebook = new Facebook($appapikey, $appsecret);

$uid1 = 657561905;
$uid2 = 503274632;

$facebook->api_client->user = $uid2;
$facebook->api_client->session_key = $sessionkey;

$facebook->api_client->begin_batch();

$facebook->api_client->profile_setFBML(NULL, $uid1, "Offline profile <fb:name uid='{$uid1}' useyou='false' />", NULL, 'mobile_profile', 'profile_main');
$facebook->api_client->profile_setFBML(NULL, $uid2, "Offline profile <fb:name uid='{$uid2}' useyou='false' />", NULL, 'mobile_profile', 'profile_main');

$facebook->api_client->end_batch();
?>

if you need to update thousands of your user’s profile at a time, using the batch api is a must or you will suffer from timeout. now you can execute this script by either command line “php <script_file>.php” or by accessing it via browser

pretty neat, eh?

stay tuned for next part of this article where we will tell you how to update profile data offline using <fb:ref /> with an url handler