Learn 2 Programming: ALL ABOUT FACEBOOK API

AJAX

Ok, for this practice, we need 3 file (I create within www/test/ajax directory):

ajax.js -> as ajax library
test.php -> as main page
home.html -> will be loaded as content

First, write below line codes within ajax.js

01function callAJAX(url, pageElement, callMessage) {

02      document.getElementById(pageElement).innerHTML = callMessage;

03      try {

04        req = new XMLHttpRequest(); /* e.g. Firefox */

05      } catch(e) {

06          try {

07          req = new ActiveXObject("Msxml2.XMLHTTP");

08   /* some versions IE */

09          } catch (e) {

10              try {

11              req = new ActiveXObject("Microsoft.XMLHTTP");

12  /* some versions IE */

13              } catch (E) {

14                 req = false;

15              }

16          }

17      }

18

19      req.onreadystatechange = function() {responseAJAX(pageElement);};

20    req.open("GET",url,true);

21      req.send(null);

22

23  }

24

25function responseAJAX(pageElement) {

26    var output = '';

27    if(req.readyState == 4) {

28         if(req.status == 200) {

29              output = req.responseText;

30              document.getElementById(pageElement).innerHTML = output;

31            }

32       }

33   }

then, we create test.php, enter following codes:

01<html>

02<head>

03    <SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>

04</head>

05<body onload="callAJAX('home.html','displaydiv')">

06

07<table>

08<tr>

09<td id="displaydiv"></td>

10</tr>

11</table>

12

13</body>

14</html>

last, we create home.html, enter following line code:

`1`	`front page test`

Now, point your browser to http://localhost/test/ajax/test.php, you will get like this:

------------------------------------------------------------------------------------------------------

http://www.phpeveryday.com/articles/Facebook-Programming-Facebook-Platform-P845.html

Facebook Application Architecture

Well, we'll compare how common web application architecture with applications on Facebook. Below is a standard web architecture:
Standar web application architectur

Figure 1.7 Standar web architectur
When you want to open a web page, you send an HTTP Request to the server. On the server there will be a process involving the application and database. The results of this process, an HTML document will be sent to your browser.
Now we see how the Facebook platform works. When you open an existing application on Facebook, you send an HTTP Request to the facebook server. Your request will be forwarded to the owner of the server application. There is some information (eg user id) that will be requested from the server to the server application for Facebook. Next, Facebook server will respond and send data to the server application. After the application is processed on the server, it sends the document in a format that is sent to the FBML Facebook servers. By Facebook document is processed and produces an HTML document that is sent to your page.
Facebook web application architectur

Figure 1.8 Facebook architectur

Facebook Framework Components

In the Facebook platform, there are parts where you will incorporate in your code:

Facebook API
FBML (Facebook Markup Language)
FQL (Facebook Query Language)
Facebook Javascript

Facebook API

API stands for Application Programming Interface. Facebook API is the heart of your application. Facebook API is a Web services programming interface to access the main Facebook services (profile, friends, photo, event) and the function of Facebook (login, redirect, update the view). API is REST-based architecture (Representational State Transfer).

Facebook Markup Language

Facebook Markup Language is a language like HTML but versions of Facebook for display a canvas page in Facebook. Here are three facts about FBML:

FBML also contains a subset of HTML elements. Common elements such as p, ul, and h1 is also part of FBML.
FBML also support for script and style elements. Javascript is not supported in the usual script. However, some javascript code can be supported on the Facebook Javascript. Elements of style can not you use to access the external style sheets. You can only use internal CSS.
FBML provides some extensions for the user interface (UI) in particular.

Facebook Query Language

Facebook Query Language (FBQL) is a SQL-based interface to the Facebook data. Through FBQL, you can access many tables in the database such as Facebook users, friend, group, group_member, event, event_member, photo, albums, and photo_tag. FBQL is a query language similar to the SQL standard, but there are some limitations:

SELECT statement must be one table at a time
Join query is not allowed
A query must be indexed

Facebook JavaScript

As mentioned above, Facebook does not support Javascript elements standard in the script. However, there are some Javascript code (which in a very limited number) that can be run on Facebook through the Facebook JavaScript. Here's the difference between the Facebook Javascript and Javascript:

Facebook provides an alternative implementation of the DOM using JavaScript DOM standard.
Many implementations FBJS objects with a standard Javascript, but there are many differences.
When processing the code in the script element, he will relate the function and variable names of the application
.

Element fb:mediaheader have function to display header and profile picture at once. Example as follows:

01<?php

02// Get these from http://developers.facebook.com

03$api_key = '2c73ae8529134aaaaaaaaaaaaaaaaaaa';

04$secret  = '3c041a7cbd797aaaaaaaaaaaaaaaaaaa';

05

06include_once './facebook-platform/php/facebook.php';

07

08$facebook = new Facebook($api_key, $secret);

09$user = $facebook->require_login();

10

11?>

12<fb:mediaheader uid="<? echo $user;?>"></fb:mediaheader>

Showing picture at header
To showing title, you can use:

1<fb:mediaheader uid="<? echo $user;?>">

2<fb:header-title>My Library</fb:header-title> 

3</fb:mediaheader>

Showing title at header media
You can add a link use fb:owner-action. But this can only be seen by the owner of the page.

1<fb:mediaheader uid="<? echo $user;?>">

2<fb:header-title>My Library</fb:header-title> 

3<fb:owner-action href="http://www.myweb.com">Go to My Web</fb:owner-action>

4</fb:mediaheader>

Add link using fb:owner-action
Finally, we will discuss fb:tabs element. You can create a navigation in tab format with this elements. Examples like the following:

1<fb:tabs>  

2<fb:tab-item href='http://apps.facebook.com/yummietester/new.php' title='Add new Book' selected='true'/>  

3<fb:tab-item href='http://apps.facebook.com/yummietester/list.php' title='Book List' />  

4</fb:tabs>

Navigation with tab format
Previous: Facebook Programming: FBML - UI Element and Widget
Next: Facebook Programming: FBML - Discussion Board

-------------------------------------------------------------------------
So by using the UI Element and widgets, you will benefit:

You do not have to waste your energy for the needs you expect.
Application you create will be felt Facebook taste

Well, in short, you can take advantage of the UI element in making display at canvas page. There are several core UI element for header and navigation that you must know:

Dashboard page header (fb:dashboard)
Dashboard navigational link (fb:action)
Dashboard create button (fb:create-button)
Dashboard help link (fb:help)
Title header (fb:header)
Media header (fb:mediaheader)
Navigation tabs (fb:tabs, fb:tab-item)

The elements above are core elements of the UI Element. These elements are the basis for making the interface in your application.
As mentioned above, you can also add widgets in your application. Facebook has several widgets that you can use. You can just put on your canvas page. Here is a list of widgets that you can use:

Discussion board (fb:board)
Comments wall (fb:comments)
Do-it-yourself wall “constructor kit” (fb:wall, fb:wallpost, fb:wallpost-action)
Friend selector box (fb:friend-selector)
Type-ahead text box (fb:typeahead-input, fb:typeahead-option)

-------------------------------------------------

Table of Content