How to Create Facebook Applications
What makes sense in writing of Facebook applications
Has it ever occurred to you to fancy about all Facebook applications are simple and similar per se? All of these virtual hugs, gifts, greeting cards, wishes, likenesses, poke, smiles, karma-exchange and other psychological “stroking” differ only with the form, in which user get their portion of attention. Thus this niche is always open for persons interested to test their own ideas. Facebook applications enroll the audience in the way viral marketing works. Users invite their friends to use the application, those friends invite new user the same way. You see, if you have a worth idea, theoretically you can obtain the audience which works out at 20 millions of Facebook users. So there is nothing surprising in that some amateur Facebook applications are sold for tens of thousand dollars.
However, skeptics can here fairly observe: “If it’s so easy to earn on Facebook, why we all have not made a future?” This is like in lottery – everybody can try it, but only a few will have luck. On the other hand we can suggest any application to the Facebook audience. I have recently come across a survey, which helps to pick out the “perfect” companions for a trip. Make something alike and place advertising on it. Ways of monetization for a successful application are described on Facebook. Besides, having a couple of popular applications made you can announce yourself on Facebook Marketplace and get wished offers. You can also look for a customer on your own. Offers like “$50,000 - Super Developer Needed” is a usual thing on Facebook Market.
What you need to write a Facebook application
First of all, you need a user account at Facebook. It won’t take up more than a few minutes to sign up and get one. Then you need access to a server to place there all files of the application. At present Facebook catalogue contains applications, which are written on ASP.NET, ASP (VBScript), ColdFusion, C , C#, D, Emacs Lisp, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby on Rails, VB.NET. There are client libraries for PHP and Java. DB should be placed on your server as well.
If you have all this, it left to you only to learn Facebook markup language (FBML), Facebook Java Script Languge (FBJS), Facebook Query Language (FQL) and Facebook API… In fact this all is not so tough as it can seem. We will consider these languages later and talk about how to use them.
How Facebook applications are organized
Before you started to project a new Facebook application you should learn Facebook platform application anatomy. In brief, you have Facebook application canvas pages and its link in left navigation panel (Left Nav) to manage.
User friend activity of the application can be showed on the main page. Application can log user activity through records placed in News Feed.
The short shape of an application can be presented as Profile Box on user profile page. Application can add the link to an action in the user profile. For example if your application provides users with posibility to praise each other, it would be logicalto add into the profile of a subscriber link “Prise user”.
Applications can send alerts through Email or send invitations to take a part in an event. Let’s say, your application suggets to place the badge to make a protest to support Tibet. You can offer users to send invites for the action to random Facebook users.
What to start with
We come to http://www.facebook.com/developers page and click Add Developer, to add Developer application.
Now when we have the link to the application on left navigation panel, we can open it. There will be the link to download the client library and application sample. Now we can press “ Set Up New Application” button and get on “New Application” page. We fill out the form. We fill in a short, but bright title into “Application Name”. We point out application address on the remote server in “Callback Url”. In “Canvsa Page URL” we assign what the address we would like have on Facebook. Set up “Can your application be added on Facebook?” checkbox as “Yes”, at that “Installation Options” should open. We answer the question “Who can add your application to their Facebook account?” with “All pages” and tick off “Users”. We write the wished address on Facebook (http://apps.facebook.com/my_cool_app/) in “Post-Add URL” field. You should make up and fill in a worth description of the application (“Application Description” field). Then we have to assign the address on Facebook once again, now in “Side Nav URL” field of “Integration Points” section. It’s necessary in order to get the link to the application on the left navigation panel. It’s left to us only press “Submit” . It will lead us to the home page of the application, where there will be API Key and Secret. We will need them later.
How to program a Facebook application
As I have already said, you should get to know, at least, with FBML and FBJS to create Facebook applications. However, you will not manage without FQL and Facebook API when you make serious tasks. As you probably have guessed, Facebook gets the code of your site page with every request to application page and modify it before to show. If it meets FBML constructions, it analyzes them. I.e. you don’t need to write the code of the application on a unknown language. You may use (x)HTML, but extend it with FBML like in the case of XML Sapiens. For a instance, you can get the correct link to the user profile and user name by means following construction:
<a id="userName" href="http://www.facebook.com/profile.php?id=<?=$user_id?>">
<fb:name useyou="false" uid="<?=$user_id?>"></fb:name>
</a>
There is FBML reference book on Facebook, where you can find a quantity of tools to retrieve information of user, their statuses, groups, tools to represent user profile, tools to implement various media formats, widgets to comment application objects, widgets to select receivers and send them invites of any kind, forms to input data, dialog window widgets, capcha-widget and so on. All of those are in Facebook style, as you understand. FBML can provide logical expressions like XSL. (fb:if/fb:else, fb:switch and so on). You can see how it’s going on at Facebook sand-box. In many ways using of FBML is pretty comfortable, what we can hardly say of FBJS. All Java Script includes on pages of your application will be fransformed.
For example, function:
function getWinSize() {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
return {width:w,height:h};
}
Turns into something like:
function a12345_getWinSize() {
a12345_w = a12345_document.documentElement.clientWidth;
a12345_h = a12345_document.documentElement.clientHeight;
return {width: a12345_w,height: a12345_h};
}
There we are. You can leave with your vain hopes to use in the Facebook application your own JS-libraries and favorite frameworks. You should write all needed functions afresh at that collating every step with documentation. On the other hand Facebook gives simple framework, which lets provides AJAX and render dialog windows.
FBML and FBJS allow us to build a simple application. However if you need selecting of Facebook users by interests, for example, made FBML widgets can hardly help you. You should use Facebook REST-server, which operates a great number of remote procedures. All of them are described in documentation and you can test them in Facebook sand-box. Moreover you can get selecting directly from Facebook DBs by means SQL-like requests. All the tables and fields are described in details. There are many samples of request. So all what you need it’s to form the request, send it in parameters of facebook.fql.query REST-call and analyze server respond.
Creation of Facebook applications in practice
How you are going to organize you programming part of the application doesn’t really matter, at least for Facebook. You should only return (x)HTML of BODY tag as application pages are requested. At that you should initialize the class of downloaded from Facebook client library.
require_once 'vendors/facebook/facebook.php';
$appapikey = 'your API Key';
$appsecret = 'your Secret';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
The only what I can add here is use GUI Facebook everywhere where it’s appropriate. For example you can make main menu of the application by means tabs:
<fb:tabs>
<fb:tab-item href="http://apps.facebook.com/study_english/" title="Quizze" selected="true" ></fb:tab>
<fb:tab-item href="http://apps.facebook.com/study_english/?page=course" title="Course" ></fb:tab>
<fb:tab-item href="http://apps.facebook.com/study_english/?page=rating" title="TOP 50 Users" ></fb:tab>
<fb:tab-item href="http://apps.facebook.com/study_english/?page=invite" title="Invite friends" ></fb:tab>
</fb:tabs>
You can FBML-widget to implement into the application the form to invite friends
<fb:fbml>
<fb:request-form action="" method="POST" invite="true" type="new cute app" content="If you have been learning English for long time, you know -- one of the most confusing things in the language is phrasal verbs. Do you know them enough? Test yourself here.
<? print htmlentities("<fb:req-choice url=\"http://apps.facebook.com/study_english/\" label=\"Add My APP!\" ></fb:request>"); ?>">
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use Brush Up Your English.">
</fb:request-form>
</fb:fbml>
Regarding FBJS my experience can save your time. Sample of AJAX using from Facebook will hardly suit you. It’s too simple. I’ve made more universal variant based on it:
Java Script
function $(divName) { return document.getElementById(divName); }
function user_event(div_id) {
callRemoteProc(
{
"ctrl_action":"user_event",
"param1":"param2 data",
"param2":"param3 data"
}, div_id);
return false;
}
function callRemoteProc(params, bind_id) {
var ajax = new Ajax();
ajax.responseType = Ajax.JSON;
ajax.ondone = function(data) {
if(data.ErrorMsg) {
// Display error message
new Dialog().showMessage('Error', data.ErrorMsg);
} else {
if( data.ActionCode==1 ) {
// Sample:
// In the case of a request of type 1 action
// put given data in the DIV
$("ex" bind_id).setInnerXHTML(data.Body);
}
}
}
ajax.requireLogin = 1;
ajax.post('http://my_server/facebook.ctrl.php',params);
}
Function callRemoteProc() provides requests to the controller and its responds. Section ajax.ondone = function(data) { } describes what we are going to do with controller respond. We define within the controller through ActionCode attribute what must be done on JS side. If we have defined ErrorMsg attribute in the controller the ajax.ondone function will show error message. Body attribute is supposed to contain respond code, for example (x)HTML. In this case Body content is moved into DIV with specified identifier.
You can assign to different events of the application functions like user_event() to request the controller. For example, in my application “Brush Up Your English” there is list of sentences, which should be filled in by means phrasal verbs. When a user clicks answer test button, FBJS sends request to the controller.
//...
include("libs/controller.lib.php");
class RD extends controller {
function user_event() {
if(!isset($_REQUEST["param1"])) { $this->ErrorMsg="Param1 is not defined"; return false; }
//...
$this->ActionCode=1;
$this->Body = '<span>Correct sentence</span>';
return false;
}
}
$rd = new RD();
if(isset($_REQUEST["ctrl_action"])) {
$rd->$_REQUEST["ctrl_action"]();
}
$rd->respond();
Library controller.inc.php
<?
class controller {
var $ActionCode=1;
var $ErrorMsg="";
var $Body="";
function respond($message="", $errormsg="") {
if($message) $this->Body = $message;
if($errormsg) $this->ErrorMsg = $errormsg;
$out = '{
"ActionCode": "'.$this->ActionCode.'",
"ErrorMsg" : "'.($this->ErrorMsg?addslashes(preg_replace("/[\r\n]/", "", $this->ErrorMsg)):"").'",
"Body" : "'.($this->Body?addslashes(preg_replace("/[\r\n]/", "", $this->Body)):"").'"
}';
header("Content-type: text/html; charset=UTF-8");
print $out;
exit;
}
}
?>
Within the controller we execute the procedure, which is requested in ctrl_action parameter of JS function callRemoteProc(). In this case it’s user_event(). Executed function defines attributes ErrorMsg, ActionCode and Body. Paid your attention that Body content is wraped with span tag. It’s done because we are obliged to use setInnerXHTML() method on FBJS side, which requires XML-compatibility for input parameters.
Now you have something to try creation of a Facebook application. One another thing I would like to add is the list of URLs for various actions over user (show the profile, poke user, send message and so on).
The application is made. What next?
As you understand, user will not come by themselves to your application. They will not know of application existence. You will say: “What about Facebook application catalog?” But you can be presented in the catalog only if you have at least 5 users on the application. However, the last position in the catalog, behind 20 thousand other applications is not a way to become popular.
But you can look up users on Facebook, who can be interested in your application. Invite them to be friends and then invite them to try your application. If the application pleases them, they send probably invites to their friends. However if you are ready to invest money in advertising go to Developer application page and press link “Advertise” of drop-up menu “more” near your application.