How to create Facebook apps

    Why write Facebook apps


    Have you ever thought that the most popular applications on Facebook are simple and similar in essence? All these virtual hugs, greeting cards, wishes, sympathies, kicks, emoticons, karma exchange and other psychological “strokes” differ only in the form in which the user receives his next portion of attention. Thus, this niche is always open for those who want to try their own idea. Especially now that Facebook has spoken Russian, and Russian-language applications are especially in demand. Facebook applications are gaining an audience in the manner of word of mouth, like a chain reaction. If you have a really worthwhile idea, then realizing it, you get a potential audience of 20 million Facebook users. With such a scope, it’s not surprising

    However, skeptics can rightly notice here: “If it’s so easy to make money on Facebook, then why aren't we still rich on it ?!” It's like in a lottery - everyone can try it, but luck will only smile at a few. On the other hand, you can offer your Facebook audience any application of your choice. I recently came across a simple compatibility questionnaire for those who like to travel. Do something similar and place the logo of the tour operator on the pages of the application for the agreed amount. However, why fantasize? Ways to monetize a successful application are described on Facebook . In addition, having a couple of popular applications behind you, you can declare yourself on the Facebook Marketplace and receive the desired orders. Or you yourself canSearch for a customer for Facebook apps . Offers like "$ 50,000 - Super Developer Needed" are usually the case on this bulletin board.

    What it takes to write an application for Facebook


    First of all, you need a user account on Facebook. If you still do not have an account there, create one. This will take you no more than a few minutes. Next, you will need your own server to host scripts and other application files. As a programming language, you can use any suitable for creating web applications. Currently, the Facebook catalog contains applications written in ASP.NET, ASP (VBScript), ColdFusion, C, C #, D, Emacs Lisp, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby on Rails, VB.NET . For PHP and Java, Facebook provides client libraries. The application database should also be created on your own server.
    If you have all this, you just have to learn the FBML markup language, the FBJS scripting language, the FQL query language and the Facebook API ... In fact, everything is not as scary as it seems. Later we will look at these languages ​​and talk about how to use them.

    How Facebook apps work


    Before you start designing a new application for Facebook, you should study the anatomy of applications for this platform . In short, you are presented with the workspace (Facebook Canvas Pages) of the application and a link to it in the left navigation panel (Left Nav).

    Facebook application anatomy


    The activity of the user's friends within the framework of this application can be displayed on the user's main page. To do this, the application logs user activity by placing entries in New Feed.

    News Feed Facebook


    The application in abbreviated form can be presented in a special block (Profile Box) on the user profile page. An application can add a link to some action in the user profile. Suppose, if your application involves mutual praise of users, it would be logical to add the “Praise the user” link to the application’s subscribers profile.
    The application can send notifications by Email (Alert), as well as send users invitations to participate in any event. Say your application invites all participants to virtually join hands in support of Tibet. You can invite users of the application to send an invitation to this event to random Facebook users.

    Where to begin


    We go to the page http://www.facebook.com/developers and click on Add Developer to add the Developer application.


    Adding a Developer Application


    Now that this application has appeared in the left navigation bar, we can open it. There will be a link to the client library and an example application. Now click the “Set Up New Application” button and get to the “New Application” page. Fill out the form. In the "Application Name" we enter a short but intriguing name. In the field “Callback Url” we indicate the address of the application on our remote server. In the “Canvas Page URL” we inform you what address we would like on Facebook. Set the “Can your application be added on Facebook?” Checkbox to the “Yes” position. This will open the “Installation Options” section. In it, to the question “Who can add your application to their Facebook account?” We answer “All pages” and put a checkmark in front of “Users”. In the "Post-Add URL" indicate the expected address on Facebook (http://apps.facebook.com/my_cool_app/ ). We are not lazy to adequately describe the application in the "Application Description". In the “Integration Points” section, in the “Side Nav URL” field, specify the Facebook address again to get a link to the application in the left navigation panel. Click "Submit" and get the application home page, which will present the API Key and Secret. We will need them in the future.


    Application settings



    How to program the application


    As I said, to create an application you should familiarize yourself with at least the FBML and FBJS languages. However, for serious tasks you can not do without the FQL and Facebook API. As you probably guessed, each time you access the page of your application, Facebook will take the page code from your site, then convert it in your own way and display it to the user. If he comes across FBML language constructs, he follows them. Those. you don’t need to write the code of your pages in a new language unknown to you. You are free to use (x) HTML, but extend it with FBML. In this regard, FBML reminds me of XML Sapiens so close to the heart . For example, the URL for the user profile and the name you can get by the following construction:






    TheA reference to the FBML language you will find many tools for obtaining information about users, groups and their statuses, representing a profile, using various media formats, displaying ready-made widgets for commenting, sending out requests to a selected group, data entry forms, dialog boxes, captcha and much more . All in the style of Facebook, as you understand. FBML also serves logical expressions (fb: if / fb: else, fb: switch, etc.). You can see how this happens in the "sandbox" of Facebook . In many cases, using FBML is convenient enough, which can hardly be said about FBJS. All Java Script inclusions on your application pages will also be converted.
    For example, the 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};
    }
    Here we are. You can part with your vain dreams of using your personal JS libraries or your favorite frameworks in the Facebook application. We'll have to write all the required functions in a new way, moreover, checking each step with the documentation . On the other hand, Facebook provides a simple framework that allowsServe asynchronous controller requests (AJAX) and create dialog boxes .
    FBML and FBJS allow you to build a simple application. However, if you need, say, a selection of Facebook users according to their interests, ready-made FBML widgets can hardly help you. For this case, there is a Facebook REST server serving a wide range of remote procedures. All of them are described in the documentation , and for a test of strength there is a "sandbox" . But more than that, you can get selections directly from Facebook databases through queries that are very reminiscent of the familiar SQL. All tables and fields are carefully described . There are various sample queries.. All that is required is to generate a request, send it in the parameters of the REST-call to facebook.fql.query and parse the server response.

    Creating an application in practice


    How your software will be organized does not really matter, at least for Facebook. You just have to render (x) HTML inside the BODY tag when requesting application pages. In this case, you should initiate the class downloaded from the 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 thing I can add here is to use the Facebook user interface where appropriate. For example, the main menu of the application can be placed in tabs:
    <fb: tabs>
    <fb: tab-item href = " apps.facebook.com/study_english"Title =" Quizze "selected =" true "/>
    <fb: tab-item href =" apps.facebook.com/study_english/?page=course "title =" Course "/>
    <fb: tab-item href = “ Apps.facebook.com/study_english/?page=rating ” title = “TOP 50 Users” />
    <fb: tab-item href = “ apps.facebook.com/study_english/?page=invite ” title = “Invite friends »/>
    </ Fb: tabs>
    To invite friends to use your application, you can use a ready-made widget:
    <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 =" apps.facebook.com/study_english "label =" Add My APP! "/>");?> ">
    <fb: multi-friend-selector showborder =" false "Actiontext =" Invite your friends to use Brush Up Your English. ">
    </ Fb: request-form>
    </ fb: fbml>
    But with FBSJ, my experience can save you time. The example of using AJAX provided by Facebook is unlikely to suit you. It is too simplistic.
    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) {
    // Show error message
    new Dialog (). showMessage ('Error', data.ErrorMsg);
    } else {
    if (data.ActionCode == 1) {
    // Example:
    // In the case of requesting type 1 action
    // put the received data into the given DIV
    $ ("ex" bind_id) .setInnerXHTML (data.Body);
    }
    }
    }
    ajax.requireLogin = 1;
    ajax.post ('http: //my_server/facebook.ctrl.php',params);
    }
    The callRemoteProc () function serves requests to the controller and its responses. The ajax.ondone = function (data) {} section describes what we will do with the controller response. Using the ActionCode attribute, we specify in the controller response how the response should be serviced. If the ErrorMsg attribute is set, the function displays an error message. The Body attribute contains the response code, for example (x) HTML. In this case, the Body content is placed in the DIV with the given identifier.
    You can assign functions similar to user_event () to various events in the application to execute a request to the controller. For example, my application “ Brush Up Your English ” displays a list of sentences that are proposed to be filled out using phrasal verbs. When the user clicks on the button for checking the response, a request is sent to the controller.
    Facebook.ctrl.php 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 = 'Correct sentence';
    return false;
    }
    }
    $ rd = new RD ();
    if (isset ($ _ REQUEST ["ctrl_action"])) {
    $ rd -> $ _ REQUEST ["ctrl_action"] ();
    }
    $ rd-> respond ();
    ?>
    Controller.inc.php library
    <?
    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 (" / [rn] / "," ", $ this-> ErrorMsg)): ""). '",
    " Body ":

    header ("Content-type: text / html; charset = UTF-8");
    print $ out;
    exit
    }
    }
    ?>

    In the controller, we refer to the procedure requested in the ctrl_action parameter when calling the callRemoteProc () function from JS. In this case, it is user_event (), during the execution of which the attributes ErrorMsg, ActionCode, Body are assigned. Note that the Body response is placed in span tags. This is because we are forced to use the setInnerXHTML () method on the FBJS side, which requires XML conformance for the input parameters.
    Now with more you have everything in order to try your hand at creating applications for Facebook. Unless, the list of URLs for various actions on the user can still be useful . (view the profile, “kick” the user, send him an email, etc.).

    The application is ready. What's next?


    As you understand, users themselves will not come to your application. They simply will not know about its existence. You say, “What about the Facebook app catalog?” So in order to get into this directory you will need to acquire at least five users. However, the last position in the catalog, behind 20 thousand other applications, is also not a way to gain popularity.
    You can search for Facebook users who might be interested in your application, by interest or in groups. Invite them to become friends and send them a request to install the application. If they like the application, they will send a request to their friends. If you’re willing to invest in advertising, go to the Developer app pageand click on the “Advertise” link in the “more” drop-down list opposite your application.


    Original article at http://blog.cmsdevelopment.com

    Also popular now: