Primeros pasos para generar aplicaciones de Facebook

Estás en Inicio / Editorial / Desarrollo Web

10.01.2008

Primeros pasos para generar aplicaciones de Facebook

Por Ignacio Blanco | 18,054 Lecturas
Archivado en: PHP, Javascript, Desarrollo Web, Servicios Web

Detrás de los tres pilares “integración profunda”, “distribución masiva” y “nuevas oportunidades”, la red social Facebook ofrece una completa API para que los desarrolladores aprovechen al máximo 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 realización de negocios a partir de la misma. Más 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 creación de aplicaciones mediante la utilización 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 categorías:

API: es una interfaz basada en REST que permite el acceso a los datos del perfil, amigos, fotos y eventos del usuario mediante la utilización 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 más complejas.
Maquetación (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 también incluye soporte para AJAX y Javascript.

Anatomía de una aplicación en Facebook

Una aplicación 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 aplicación se muestra una pequeña sección con el nombre, una imagen y una pequeña descripción.
About: esta página muestra información general de la aplicación. Debe inducir al usuario a instalar la aplicación.
Left Nav: es el panel de navegación izquierdo. Las aplicaciones pueden tener su ícono y nombre en este panel.
Canvas Page: es la página principal de la aplicación. Home: esta página es accedida utilizando el panel de navegación de la izquierda, en general muestra información de los amigos del usuario. User Dashboard: es la página donde el usuario administra sus datos en una aplicación y determina de que forma las aplicaciones acceden a sus datos personales.
Profile: es la representación online de la identidad del usuario. La API provee múltiples puntos de integración con el perfil del usuario permitiendo actualizar datos del mismo. Profile Box: presenta información 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 aplicación.
Privacy Settings: se utiliza para definir los niveles de privacidad de los datos del perfil por aplicación.
News Feed: como su nombre lo indica es un “feed” de noticias, allí las aplicaciones pueden “publicar” información del usuario de la misma.
Alerts: las aplicaciones pueden enviar notificaciones a los usuarios a través del correo electrónico.
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 página principal. En general son iniciados por amigos que solicitan realizar alguna acción.

Hola mundo! paso a paso:

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

FaceBook

Luego debemos presionar el botón “Set Up New Application”: allí se nos preguntará el nombre de nuestra aplicación y clickeando en “Optional Fields” encontramos información necesaria para el desarrollo.

Por el momento solo le daremos atención a la “Callback URL” que será la dirección a la que Facebook enviará a nuestros usuarios luego de su autenticación y a “Canvas Page URL” que será la URL mapeada de Facebook a nuestra aplicación y por la que los usuarios accederán a la misma. Definimos entonces:

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

Elegimos:

La opción “Can your application be added on Facebook?” para poder agregar nuestra aplicación.
La opción “Who can add your application to their Facebook account?” marcamos Users y All Pages.
La opción “Developer Mode”.
Por último hacemos click en “Save”

Ahora debemos agregar nuestra aplicación: para esto nos dirigimos a Developers y allí buscamos nuestra aplicación (en la barra derecha) y hacemos un click en el nombre.

Allí vemos un botón que dice “Add Application”, lo apretamos y en la página siguiente hacemos lo mismo con “Add NOMBRE_DE_LA_APLICACION”. Bien, está todo listo para nuestro “Hola Mundo” en Facebook:

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

Por ejemplo:

<h1>
   Mi primer canvas!
</h1>

Probamos que la nuestro primer canvas sea accesible utilizando un navegador:

FaceBook

Ahora probamos accediendo a nuestra aplicación dentro de Facebook:

FaceBook

La configuración inicial de nuestra aplicación 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 librería para conectarse a la API:

Librería PHP 4 & 5
Librería Java
Bajamos la librería PHP en nuestro caso.
Creamos un archivo ‘appinclude.php’ que vamos a incluir en la parte superior de todas nuestras páginas y colocamos dentro los datos que se obtienen de la página, allí buscamos nuestra aplicación y tomamos nota de: API Key y Secret Key.

Luego reemplazamos [API Key], [Secret Key] y [CallbackURL] por nuestros datos. Con respecto al require_once debemos indicar la ubicación del archivo ‘facebook.php’ dependiendo de que versión 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 página 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>

FaceBook

Analicemos las secciones resaltadas:

Línea 1: se incluye el archivo appinclude.php creado anteriormente.
Línea 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 también 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();
Línea 9: se obtiene mediante la llamada $facebook->api_client->friends_get() los amigos del usuario logueado como un array de ids.
Línea 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).
Línea 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 líneas de HTML y FBML se puede obtener una aplicación simple que muestre los amigos del usuario logueado.

Califica esta nota:

(22 votos, promedio: 4.77 de 5)

Loading ...

Comentarios

30 comentarios en total.

Luis Pirir 13.01.2008 - 20:56 - #

Un artículo muy interesante, y muy completo. Se explica brevemente la forma de trabajar para crear aplicaciones dentro de Facebook.

Felicitaciones !
cure 19.01.2008 - 18:12 - #

a mi correo llegan invitaciones de amigos a facebook cuando abro el correo me envia a una direccion para que abra una cuenta ya la abri y no me sale nada que hago
Ivor Padilla 20.01.2008 - 11:54 - #

Excelente tutorial Facebook se ha ganado un buen puesto en nuestros Bookmarks.
Eduardo Durán 21.01.2008 - 16:24 - #

hola, me gusto tu nota pero tengo una duda, espero que me puedas ayudar, cree una aplicacion la cual solo la veo en el lado izquierdo donde estan todas las aplicaciones y funciona pero lo que quiero es que mi aplicacion este visible en el escritorio, ya modifique que sea desktop y no me pone nada en el escritorio espero que me puedas ayudar
Juan Gonzalez 21.01.2008 - 20:08 - #

Cordial Saludo:
Mi pregunta frente al articulo.. es qué derechos tiene facebook frente a los desarrollos que realicemos??
Cheap Cars For Sale 23.01.2008 - 14:48 - #

Mi pregunta es si vale la pena desgastarse tanto creando mas vaians para seguir sociavagoniando. En lo personal a mi Facebook me aburre, parace un atari de niños lleno de cositas y cositas que si uno se pone a pensar en ultimas no sirve mas que para que sigas perdiendo tu valioso tiempo.

Esa es mi humilde opinion. Salu2.
Lucía 24.01.2008 - 01:36 - #

Hola,me gustaría que me aclaraseis la siguiente duda:
1)¿Puedo de alguna manera saber quien ha visitado mi perfil?
Porque alguien me he ha comentado que presione Ctrl f4,o Alt f4 y no obtengo ningún resultado.Si me podeis ayudar genial…Saludos
Martin 26.01.2008 - 14:42 - #

Hola, no se porque pero estoy teniendo un problema con el appinclude.php, desde facebook recivo el siguiente error:

Parse error: syntax error, unexpected T_IF in /home/xxxxxxxx/public_html/miapp/appinclude.php on line 9

donde la linea 9 se corresponde con:

try {

he mirado arriba y esta todo bien, no entiendo el porque de este error. Alguno podria darme una luz en esto?
Rodrigo 04.02.2008 - 09:36 - #

muy buen tutorial Facebook lijeramente me ha aclarado algunas dudas que tenia, saludos
cindy 18.02.2008 - 13:31 - #

me parecio super chevere ademas he aclarado muchas dudas que tenia sobre esta nueva forma de interatuar
jose antonio redondo 19.02.2008 - 12:03 - #

DESEO DARME DE BAJA EN FACEBOOK, DIGANME COMO LO PUEDO HACER (SI NO VALE CON ESTE ENVIO), CONTESTANDOME A MO CORREO
Kete 21.02.2008 - 02:49 - #

tengo el mismo problema que Martin.

Me da un error en esa línea pero el código es correcto…

¿una ayudica?

Un saludo!
Olivia Barajas 24.02.2008 - 11:59 - #

Muy bueno tu tutorial felicidades. Solo queria hacerte una pregunta, yo tengo en mi computadora un servidor casero APACHE, entonces lo que tengo que poner como CallBack Url seria algo asi:
http://MyIPpublica/Carpetaconaplicacion

El problema es que si yo escribo una URL asi desde cualquier ordenador, ninguno puede accesar a mi servidor apache. Si esto me esta pasando entonces no puedo seguir addelante vdd?
En si, facebook funciona ejecutando las aplicaciones en nuestros propios servidores’? Ojala . de vdd ojala me pudieras responder
Dem 03.03.2008 - 14:05 - #

Soy uno más del monton que han posteado acá y no reciben respuesta.

Hola, no se porque pero estoy teniendo un problema con el appinclude.php, desde facebook recivo el siguiente error:

Parse error: syntax error, unexpected T_IF in /home/xxxxxxxx/public_html/miapp/appinclude.php on line 9

donde la linea 13 se corresponde con:

try {

he mirado arriba y esta todo bien, no entiendo el porque de este error. Alguno podria darme una luz en esto?
Daniel Gonzalez 11.03.2008 - 09:27 - #

para todos los que le da el error en la linea 13 y para el creador del artículo (gracias por cierto), por si lo desea tener en cuenta.

El archivo appinclude.php esta preparado para php5, en php 4 no existe la estructura try / cach por lo que da el error.

Yo directamente me carge la captura de la escepcion:

//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);
}

por

if (!$facebook->api_client->users_isAppAdded()) {
$facebook->redirect($facebook->get_add_url());
}

Un saludo a todos
caca 17.03.2008 - 22:37 - #

Hola, ls aplicacion accounter no me permite ver los candados negros.No se que pasa, mando las invitaciones y no puedo ver quien ingresa ami faceebook.agradezco una solucion
Luis Angel 11.04.2008 - 12:10 - #

Hola me salía tmb el error, lo cual hice lo que dejaste Daniel Gonzáles pero no me funcionó me sale este error.
“Call to a member function on a non-object in la ruta de mi archivo en linea 18″

si tienes algun ejemplo paso a paso y que si funcione se los agradecería que lo enviaran a mi correo. Gracias
Figo 15.04.2008 - 10:29 - #

Tengo un problema pareciera q no me funciona el FBML, ya que no me despliega las imagenes ni mi nombre de usuario, alguien sabe que podriaestar pasando ? a que se debe ?
Gracias
Edward Navarro 15.04.2008 - 17:51 - #

Hola buena tarde, seria muy bueno que nos ayudaras a todos a crear la funcion para que se puedan invirtar a los amigos a usar la aplicación.

en la pagina http://www.aplicacionesfacebook.net/, publicaron el codigo que se supone que serviria pero ya lo utilice y no funciona, salen errores.

Un abrazo y gracias.
zetta 21.05.2008 - 18:41 - #

Esta cosa ya tiene muchisimo tiempo, pero si a la gente que le daba error la API o el error de
“Call to a member function on a non-object in la ruta de mi archivo en linea 18″

Es porque no tienen instalado PHP5
simple, pero suele suceder =P
dani 25.05.2008 - 15:40 - #

ola!! sabes necesito ayuda no puedo ingresar al perfil de mi facebook, hago click y dice cargando, y salen todo en ingles.
además todo sale subrayado.
agradeceria me ayudaran =)

tao!!
Maria A Rebolledo 27.05.2008 - 09:00 - #

Ya no se que hacer para entrar en Facebook, me inscribo hago todo y nunca me llega la aceptacion via email, porque???
Leonardo 31.05.2008 - 13:34 - #

Como puedo saber quien mira mi profile en facebook??????
norma 09.06.2008 - 19:57 - #

tengo una semana que no puedo entrar a mi perfil ,que puedo hacer………..
Erwin Racancoj 11.06.2008 - 16:38 - #

Funciona perfectamente!
JOHANA ANDREA SILVA ALVARADO 25.06.2008 - 13:28 - #

lo que pasa es que me registre en el facebook subi una foto pero ahora no puedo iniciar sesion por que no me acuerdo de mi contraseña, y si aparesco registrada me pueden ayudar porfis y enviarme mi contraseña gracias.
rodrigo olave 26.06.2008 - 14:37 - #

muy buen aporte andaba buscando esto ..
Maria 27.06.2008 - 01:34 - #

yo no se que es lo que pasa con facebook ya que hoy quise entrar y no pude me sale correos de otras personas que na que ver conmigo yo pense que facebook era bueno pero veo que no es asi
antonia 29.06.2008 - 12:58 - #

Como se yo si alguien me elimino de facebook, por que a veces veo su perfil y a recibido o aceptado amigos a la misma hora que yo estoy en linea - online, ademas como se si la persona ya leyo los mensajes enviados en facebook. esperando de su aporte, gracias……….
Piti 04.07.2008 - 20:54 - #

Yo soy muy torpe para esto pero mr gustaria como un tutorial para poder crear la aplicacion, sigo todos los paso pero cuando voy por el paso que dice “Add Application” no sale en la pantalla no lo encuentro. Gracias spero que me puedan ayudar.
Saludos.