Como Hacer Aplicaciones en Facebook

Facebook es una comunidad en linea originalmente orientada a estudiantes de universidad, que ahora esta abierta al publico. Facebook te permite, a traves de su extenso API, crear aplicaciones que todos sus usuarios pueden usar. Aqui vamos a ver como crear una aplicacion, usando una que yo hice de ejemplo. Pueden agregar la aplicacion de ejemplo, aqui. Si necesitan mas información, visiten estas paginas:

• http://developers.facebook.com/get_started.php
• http://developers.facebook.com/resources.php
• http://developers.facebook.com/step_by_step.php
• http://developers.facebook.com/anatomy.php
• http://developers.facebook.com/documentation.php

Tomen en cuenta que Facebook no les da web hosting para su aplicacion, asi que tendran que conseguirlo aparte. Si necesitan una base de datos, ésta tendrá que ser aparte también. Vayan aqui y agreguen el Developer application a su Facebook. Ahora ya pueden pedir una nueva llave para su aplicacion. Esta llave se usa para identificar únicamente a su aplicacion. Si ya tienen el URL del servidor que usaran para la aplicacion, pueden ir agregandola ahi mismo. Una buena explicación de que poner en cada campo está aqui.

Desde este punto asumo que tienen listo el web hosting para la aplicación. Bajen el PHP (4 and 5) Client Library de aqui y ponganlo en el directorio de la aplicación.

Ahora, empezar a programar. La aplicación de ejemplo, Marquee, contiene 2 archivos importantes. Uno de ellos es config.php que tiene cosas comunes e inicialización. El otro es index.php que es la pagina principal de la aplicación.

config.php

<?php

require_once('client/facebook.php');

$fb_apikey = '<Aqui va el API key>';
$fb_secret = '<Aqui va el Secret>';

$facebook = new Facebook($fb_apikey, $fb_secret);
$user = $facebook->require_login();

$app_callbackurl = 'http://www.tuservidor.com/marquee/';

try
{
    if (!$facebook->api_client->users_isAppAdded())
        $facebook->redirect($facebook->get_add_url());
}
catch (Exception $ex)
{
    $facebook->set_user(null, null);
    $facebook->redirect($app_callbackurl);
}

// Incluye la clase Database que simplemente es// una utilidad que hice para consultar una base de datos
require_once('database.php')

?>

Como pueden ver, este archivo es bien sencillo. Preparamos las cosas comunes que se usaran en otros lugares.

Antes de proseguir, tendremos que introducir un termino: FBML. FBML, Facebook Markup Language, es un lenguaje basado en XML que es usado para facilitar la integración de las aplicaciones en Facebook. Provee muchas funciones que son bien utiles para los desarrolladores.

Si tu aplicación quiere poner una caja en el perfil del usuario, vas a tener que llamar la función profile_setFBML. Como el nombre lo sugiere, esta función agarra de parametro el codigo FBML que ira en esa caja. Si se manda una cadena vacia, la caja desaparece del perfil del usuario.

index.php

<?php

require_once('config.php');
require_once('marquee.php');

if (isset($_REQUEST['marquee_text']))
{
    $text = $_REQUEST['marquee_text'];

    $fbml = '<fb:fbml version="1.1">' .
                '<fb:subtitle>' .
                    '<fb:action href="http://www.facebook.com/apps/application.php?api_key=2bc05a98791e24c98c9b5c94407664d8">Home</fb:action>' .
                    '<fb:action href="http://apps.facebook.com/marquee">Marquee</fb:action>' .
                '</fb:subtitle>' .
                '<a href="http://apps.facebook.com/marquee">' .
                get_marquee_code($text) .
                '</a>' .
            '</fb:fbml>';

    $facebook->api_client->profile_setFBML($fbml, $user);

    $database = new Database();
    $database->query("update fb_marquee set value='" . $database->quote($text) . "' where uid = $user");
}
else
{
    $database = new Database();
    $result = $database->query("select * from fb_marquee where uid = $user");
    if (sizeof($result) == 0)
    {
        $text = "Hello, world!";
        $result = $database->query("insert into fb_marquee (uid, value) values ($user, '" . $database->quote($text) . "')");
    }
    else
    {
        $text = $result[0]->value;
    }
}

?>

<div style="margin: 10px;">

<fb:dashboard>
  <fb:create-button href="invite.php">Invite your friends!</fb:create-button>
</fb:dashboard>
<br />

<div style="width: 50%">
Add a scrolling LED marquee to your profile to let your friends know what's going on. Announce it!
</div>

<br />
<br />

<div style="width: 100%; margin-left: 20%; margin-right: 20%;">
<span style="text-align: center;"><b>Preview</b></span><br />
<?php
    echo get_marquee_code($text);
?>
</div>

<br />
Enter the text you want shown in the marquee. <br />
Enter each message in its own line; they will be separated appropriately.<br />
<br />
<form action="" method="get">
    <textarea name="marquee_text" cols="50" rows="7"><?php echo $text; ?></textarea><br />
    <input name="submit" type="submit" value="Save">
</form>

</div>

Este archivo es un poco más grande, pero si lo ven bien es PHP sencillo con elementos de XHTML y FBML al final. La parte interesante es:

    $fbml = '<fb:fbml version="1.1">' .
                '<fb:subtitle>' .
                    '<fb:action href="http://www.facebook.com/apps/application.php?api_key=2bc05a98791e24c98c9b5c94407664d8">Home</fb:action>' .
                    '<fb:action href="http://apps.facebook.com/marquee">Marquee</fb:action>' .
                '</fb:subtitle>' .
                '<a href="http://apps.facebook.com/marquee">' .
                get_marquee_code($text) .
                '</a>' .
            '</fb:fbml>';

    $facebook->api_client->profile_setFBML($fbml, $user);

Aqui va el codigo que irá en la caja del perfil de usuario. Como pueden ver, tiene dos links (fb:action) en el subtitulo, uno es “Home” y el otro “Marquee”. Tambien, contiene el codigo que pone el marquee en la caja, a traves de la funcion get_marquee_code.

Asi se ve la caja:

Asi se ve index.php:

Espero esto haya ayudado a los que estan empezando a hacer aplicaciones de Facebook. Cualquier pregunta la pueden hacer a traves de comentarios en este articulo.

Addendum : Como Invitar Amigos

// Agarremos la lista de amigos que ya tienen la aplicacion instalada
$rs = $facebook->api_client->fql_query(
	"select uid " .
	"from user " .
	"where has_added_app=1 and uid IN " .
	"   (SELECT uid2 FROM friend WHERE uid1 = $user)");

$arFriends = "";

//  Construimos una lista de estos amigos
if ($rs)
{
	for ( $i = 0; $i < count($rs); $i++ )
	{
		if ($arFriends != "")
			$arFriends .= ",";
	
		$arFriends .= $rs[$i]["uid"];
	}
}

// El URL para referrals
$sNextUrl = urlencode("&refuid=" . $user);

//  Construimos el FBML que ira en el mensaje de invitacion
$invfbml = <<<FBML
You've been invited to add Marquee!
<fb:name uid="$user" firstnameonly="true" shownetwork="false"/> wants you to add Marquee to keep posted on your announcements!
<fb:req-choice url="http://www.facebook.com/add.php?api_key=$fb_apikey&next=$sNextUrl" label="Add Marquee!" />
FBML;

?>

<fb:request-form type="Marquee" action="index.php?c=skipped" content="<?=htmlentities($invfbml)?>" invite="true">
	<fb:multi-friend-selector max="20" actiontext="Here are your friends who don't have Marquee. Invite them to add it!" showborder="true" rows="5" exclude_ids="<?=$arFriends?>" />
</fb:request-form>