Como crear aplicaciones para FaceBook

INFO | HACE MS DE 3 AOS

5

62
6

Te gustara escuchar Reggae?
www.Taringa.net/musica
Con un slo click descubre nuevas bandas.

Hola Taringeros! Hoy les voy a ensear como crear una/unas aplicaciones para FaceBook:

Lean atentamente:

Detrs de los tres pilares integracin profunda, distribucin masiva y nuevas oportunidades, la
red social Facebook ofrece una completa API para que los desarrolladores aprovechen al mximo
las virtudes inherentes de una red social.

Facebook logr su popularidad siendo una red social capaz de contener aplicaciones realizadas
por terceros, permitiendo as la realizacin de negocios a partir de la misma. Ms all de las
aplicaciones propias que presenta, como es el caso de: The Wall.

Suerte de pizarra virtual del usuario donde otros usuarios pueden dejarle mensajes o Status, que
permite a los usuarios indicar sus actividades o estados de nimo al resto de la red, Facebook
permite la creacin de aplicaciones mediante la utilizacin de web services para el acceso a los
datos de la red.

Creando aplicaciones en Facebook

Los recursos disponibles a los desarrolladores se agrupan en 3 categoras:

API: es una interfaz basada en REST que permite el acceso a los datos del perfil, amigos, fotos y
eventos del usuario mediante la utilizacin de mensajes GET o POST.

Consultas (FQL, Facebook Query Language): es un lenguaje de consultas similar a SQL
utilizado para acceder a los mismos datos que la API pero permitiendo consultas ms complejas.

Maquetacin (FBML, Faceboook Markup Language): es un lenguaje de markup similar
a HTML que permite ser intercalado con el HTML a utilizar para integrar las aplicaciones a la
experiencia de usuario Facebook. Utilizando FBML se pueden acceder distintos puntos de la red
como ser el perfil, acciones del perfil, canvas y feeds. Este lenguaje tambin incluye soporte para
AJAX y Javascript.

Anatoma de una aplicacin en
Facebook:

Una aplicacin en Facebook posee una compleja estructura que permite brindar una experiencia
de usuario completa:

Product Directory: cuando un usuario navega el directorio de aplicaciones de Facebook, por cada
aplicacin se muestra una pequea seccin con el nombre, una imagen y una pequea
descripcin.

About: esta pgina muestra informacin general de la aplicacin. Debe inducir al usuario a instalar
la aplicacin.

Left Nav: es el panel de navegacin izquierdo. Las aplicaciones pueden tener su cono y nombre
en este panel.

Canvas Page: es la pgina principal de la aplicacin. Home: esta pgina es accedida utilizando el
panel de navegacin de la izquierda, en general muestra informacin de los amigos del usuario.
User Dashboard: es la pgina donde el usuario administra sus datos en una aplicacin y determina
de que forma las aplicaciones acceden a sus datos personales.

Profile: es la representacin online de la identidad del usuario. La API provee mltiples puntos de
integracin con el perfil del usuario permitiendo actualizar datos del mismo. Profile Box: presenta
informacin actualizada sobre las acciones recientes del usuario. Profile Actions Links: debajo de la
foto del usuario en el perfil, se pueden agregar enlaces para invocar acciones en la aplicacin.

Privacy Settings: se utiliza para definir los niveles de privacidad de los datos del perfil por
aplicacin.

News Feed: como su nombre lo indica es un feed de noticias, all las aplicaciones pueden
publicar informacin del usuario de la misma.

Alerts: las aplicaciones pueden enviar notificaciones a los usuarios a travs del correo electrnico.
Message Attachments: las aplicaciones pueden incluir archivos adjuntos que aparecen en la
ventana para componer mensajes.

Requests: las aplicaciones pueden crear peticiones que aparecen en la parte superior izquierda de
la pgina principal. En general son iniciados por amigos que solicitan realizar alguna accin.

Hola mundo! paso a paso:

El primer paso consiste en agregar la aplicacin Developer. Todo contenido que se agrega a
Facebook es una aplicacin, es as que para desarrollarlas es necesaria una aplicacin que las
contenga.



Luego debemos presionar el botn Set Up New Application: all se nos preguntar el nombre
de nuestra aplicacin y clickeando en Optional Fields encontramos informacin necesaria para
el desarrollo.

Por el momento solo le daremos atencin a la Callback URL que ser la direccin a la que
Facebook enviar a nuestros usuarios luego de su autenticacin y a Canvas Page URL que
ser la URL mapeada de Facebook a nuestra aplicacin y por la que los usuarios accedern a la
misma. Definimos entonces:

Callback URL = http://miserver/blanconetmaestros
Canvas Page URL = http://apps.facebook.com/blanconetmaestros/

Elegimos:

La opcin Can your application be added on Facebook? para poder agregar nuestra
aplicacin.
La opcin Who can add your application to their Facebook account? marcamos Users y All
Pages.
La opcin Developer Mode.
Por ltimo hacemos click en Save
Ahora debemos agregar nuestra aplicacin: para esto nos dirigimos a Developers y all buscamos
nuestra aplicacin (en la barra derecha) y hacemos un click en el nombre.

All vemos un botn que dice Add Application, lo apretamos y en la pgina siguiente hacemos
lo mismo conAdd NOMBRE_DE_LA_APLICACION. Bien, est todo listo para nuestro Hola
Mundo en Facebook:

Lo primero que necesitamos es alguna mquina visible desde Internet (tanto por nombre o por IP).
Luego necesitamos que esta mquina tenga instalado un servidor Web (Apache por ejemplo).
Con estos dos requerimientos satisfechos, simplemente tenemos que ubicar un documento HTML
en la ubicacin que definimos para Callback URL en la configuracin de la aplicacin (ej:
http://miserver/blanconetmaestros).

Por ejemplo:

<h1>
Mi primer canvas!
</h1>

Probamos que la nuestro primer canvas sea accesible utilizando un navegador(Yo utilizare el
Mozilla FireFox):



Ahora probamos accediendo a nuestra aplicacin dentro de Facebook:



La configuracin inicial de nuestra aplicacin est lista, ahora mejoremos la misma para
aprovechar alguna de las virtudes de la API provista por Facebook.

Usando la API:

En primer lugar hay que obtener la librera para conectarse a la API:

Librera PHP 4 & 5

Librera Java

Bajamos la librera PHP en nuestro caso.
Creamos un archivo appinclude.php que vamos a incluir en la parte superior de todas nuestras
pginas y colocamos dentro los datos que se obtienen de la pgina, all buscamos nuestra
aplicacin y tomamos nota de: API Key y Secret Key.

Luego reemplazamos [API Key], [Secret Key] y [CallbackURL] por nuestros datos. Con respecto
alrequire_once debemos indicar la ubicacin del archivo facebook.php dependiendo de que
versin de PHP usamos:

PHP 4

PHP 5

appinclude.php

<?php
require_once 'facebook.php';

$appapikey = '[API Key]';
$appsecret = '[Secret Key]';
$facebook = new Facebook($appapikey, $appsecret);
$user = $facebook->require_login();

$appcallbackurl = '[Callback URL]';

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isAppAdded()) {
$facebook->redirect($facebook->get_add_url());
}
} catch (Exception $ex) {
//this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect($appcallbackurl);
}


Ahora modificamos nuestra pgina inicial por esta:

1 <?php require_once 'appinclude.php';?>
2 <h1>
3 Mi primer canvas!</p>
4 Hola <fb:name uid="<?=$user;?>" useyou="false"/></p>
5 Tus amigos son:</p>
6 <table>
7 <?php
8 $i = 1;
9 foreach ($facebook->api_client->friends_get() as $friend_id) {
10 if ($i == 1){
11 echo "<tr>";
12 }
13 echo "<td>" . "<fb:profile-pic uid='" . $friend_id . "'/>" . "</td>";
14 echo "<td>" . "<fb:name uid='" . $friend_id . "'/></br>" . "</td>";
15 if ($i == 4) {
16 $i = 0;
17 echo "</tr>";
18 }
19 $i++;
20 }
21 ?>
22 </table>
23 </h1>



Analicemos las secciones resaltadas:

Lnea 1: se incluye el archivo appinclude.php creado anteriormente.

Lnea 4: se utiliza el tag FBML este requiere nicamente al atributo uid (user id) que es el id de
facebook del usuario que se desea mostrar, se agrega en este caso tambin el atributo useyou en
false para que no escriba you en caso de ser uno mismo el usuario visitante. Como uid se pasa el
valor $user que fue obtenido en el archivo appinclude.php haciendo $user = $facebook-
>require_login();

Lnea 9: se obtiene mediante la llamada $facebook->api_client->friends_get() los amigos del
usuario logueado como un array de ids.

Lnea 13: se utiliza otro tag de FBML que renderiza como un elemento de HTML la foto del perfil
de un usuario (el indicado en uid).

Lnea 14: se vuelve a utilizar el tag pero en este caso se utiliza como uid el id de cada amigot.
Vimos entonces como con solo algunas lneas de HTML y FBML se puede obtener una aplicacin
simple que muestre los amigos del usuario logueado.

Gracias por ver...