Construye tu primera aplicación de Facebook

Así que quieres construir una aplicación de Facebook y llegar literalmente a millones de usuarios. Por suerte, escribir una aplicación usando la API no es muy difícil de aprender (para lo básico, de todos modos). En este tutorial escribiremos una aplicación de Facebook que genera una cita aleatoria para mostrarla en el perfil del usuario.

Empezando

Cabe destacar que la API de Facebook está disponible en varios idiomas, todos ellos listados en la Wiki de Desarrolladores de Facebook. Usaré PHP 5 para este tutorial. También tendrás que descargar la biblioteca de clientes PHP 5, que he incluido en los archivos SRC. Todo el código que aparece aquí estará en el archivo index.php.

Paso 1: Inicia tu aplicación

El primer paso para obtener una clave de la API de Facebook, que permite a tu aplicación recuperar información de Facebook. Ve a la aplicación para desarrolladores de Facebook y haz clic en el botón "Set Up a New Application (Configurar una nueva aplicación)". Elige un nombre, acepta los Términos y Condiciones y tendrás tu API. Ahora necesitas configurar el nombre de tu página de lienzo y la URL de devolución de llamada (callback URL).

Tu página de lienzo es el área de aplicación dentro de Facebook; el nombre se agrega a la URL y se verá así: http://apps.new.facebook.com/[YOUR APP NAME]. La URL de devolución de llamada apunta al servidor que aloja los archivos de la aplicación. Para configurarlos, en la página "My Applications (Mis Aplicaciones)" haz clic en "Edit Settings (Editar Configuración)" en el lado derecho. Verás los campos para rellenar ambos, como hice en la captura de pantalla de abajo. Aunque hay muchas otras opciones, ninguna es necesaria para este tutorial. Haz clic en "Save (Guardar)" y ya estás listo para crear tu primera aplicación de Facebook. Facebook incluso te proporciona un código de inicio. He recortado las cosas extra y te he dado solo lo que necesitas para inicializar tu aplicación...

1

2

<?php

3

4

require_once 'includes/facebook.php';

5

6

$appapikey = '85e4cd7042467d0b20109aafb6f20117';

7

$appsecret = 'be5a528d73ad191b6b21a84c4af054ee';

8

$facebook = new Facebook($appapikey, $appsecret);

9

$user_id = $facebook->require_login();

10

$callbackurl = 'http://www.casabona.org/nettuts/';

11

12

?>

Es un código bastante sencillo. Creamos un objeto de Facebook usando nuestra clave de la API y el secreto de la aplicación, que se nos dio cuando creamos la clave de la API. Lo primero que hacemos después de eso es obtener la identificación del usuario conectado. Esto será valioso para nosotros si hacemos que las cosas obtengan el nombre del usuario, los amigos del usuario, etc. También he añadido el $callbackurl para facilitar el enlace a imágenes u otros archivos, ya que Facebook no permite el enlace relativo.

Paso 2: Redacción de la solicitud

Si no hacemos llamadas específicas a Facebook, es como escribir una aplicación php. Abajo está nuestro código.

1

2

//initialize an array of quotes

3

$quotes= array("Only those who dare to fail greatly can ever achieve greatly.", "Take my wife. Please!", "I believe what doesn't kill you only makes you... STRANGER");

4

5

//Select a Random one.

6

$i= rand(0, sizeof($quotes)-1);

7

8

//print the CSS

9

print ('

10

<style type="text/css">

11

 h1{ margin: 10px; font-size: 24pt; }

12

 h2{ margin: 15px; font-size: 20pt; }

13

</style>

14

');

15

16

print "<h1>Nettuts Quotes</h1>";

17

print "<h2>". $quotes[$i] ."</h2>";

Esto es todo lo que necesitas hacer para imprimir a la página de lienzo. Una cosa a tener en cuenta es la forma en que creamos el CSS. No podemos llamar a un archivo como style.css, en realidad tenemos que incluir el CSS en el HTML. Esto es para que nuestro CSS no interfiera con el de Facebook. También debes saber que cuando estilizas buceos, solo puedes usar la clase, no la identificación. El código que hemos creado producirá algo como esto:

Paso 3: Crear el cuadro de perfil

Finalmente, algunas cosas específicas de Facebook. El código de abajo es necesario para añadir nuestra cita al perfil del usuario, dado que están mostrando nuestra aplicación en su perfil. En nuestra aplicación, he añadido el siguiente código justo debajo de $i= rand(0, tamaño($compra)-1);

1

2

//prepare string for profile box

3

$text= ('

4

<style type="text/css">

5

 h1{ margin: 10px; font-size: 24pt; }

6

 h2{ margin: 15px; font-size: 20pt; }

7

8

</style>

9

');

10

11

$text.=('<h2>'. $quotes[$i] .'</h2>');

12

13

14

//set profile text

15

$facebook->api_client->profile_setFBML($text, $user_id);

Fíjate que he hecho dos cosas aquí: reimprimí el CSS y puse todo en una cadena llamada $text. Esto se debe a que la función que establece el texto del cuadro de perfil, profile_setFBML, toma dos argumentos: el texto que debe ir en el cuadro de perfil, y el id del usuario. Cualquier CSS definido para la página de lienzo no se transfiere al perfil, así que también debemos añadirlo a nuestro primer argumento. El resultado final es este:

¡Eso es todo!

Obviamente solo hemos arañado la superficie en lo que respecta al desarrollo de la aplicación de Facebook. Sin embargo, con el Wiki y los recursos que Facebook te da cuando obtienes una clave de API, ¡deberías estar bien encaminado para crear la próxima gran aplicación! Si quieres ver esta aplicación en toda su gloria, puedes ir aquí, siempre y cuando tengas una cuenta en Facebook.