Aplicaciones en Facebook 2º Parte - Crear nuestra primera App
Este es la segunda parte de una serie de post sobre desarrollo de aplicaciones para Facebook. El primer post, "Aplicaciones en Facebook 1º parte" fue una introducción a la arquitectura de Facebook, ahora vamos a aprender a crear una aplicación muy sencilla.
Primero lo primero, hay que tener una cuenta en Facebook (supongo que si ya leyeron el primer post ya deben tener una). Una vez registrados debemos agregar la aplicación "Developer". Con ella accedemos a las pantallas con foros, novedades, el status del framework de Facebook y algunos datos de nuestras aplicaciones.
Ahora hay que dar de alta una nueva aplicación y configurar algunos datos para que Facebook pueda acceder a nuestra página. Para dar de alta una nueva aplicación hay que hacer clic en el botón "+ Set Up New Application".
Obtenemos una pantalla para llenar datos que modifican como va a funcionar la aplicación dentro de Facebook. Estas es una descripción de los datos mínimos que debemos completar, el resto queda en ustedes para aprender, no son muy difíciles de entender:
- Application Name: Nombre de la aplicación.
- Developer Contact E-mail: Nuestro e-mail.
- Callback Url: Dirección a la que Facebook va a buscar nuestra aplicación, para el ejemplo seria algo así, http://www.midominio.com/Default.aspx.
Aquí me voy a detener un poco, en la etapa de desarrollo es complicado usar una dirección de tipo localhost, más si usan Web Developer Express como servidor web, es preferible subirlo sobre un IIS local, y usar una dirección así http://localhost:80/Default.aspx que solo funcionaria dentro de nuestra red.
- Canvas Page URL: Como se la dirección a la que accederán los usuarios.
- Use FBML o Use iframe: Esta opción es para que Facebook sepa si tiene que detectar las etiquetas FB. Para nuestro ejemplo usamos iframe.
- Application Type: vamos a elegir Website.
- Can your application be added on Facebook?: elegimos que si.
- Post-Add URL: Dirección de Facebook a donde se redirecciona después de agregar la aplicación, tiene que ser la dirección que formamos en Canvas Page.
- Developer Mode: Tildamos, temporalmente, solo nosotros podemos agregar la aplicación.
Una vez que llenamos todo, hacemos clic en submit. Nos redirecciona a una pantalla donde esta un pequeño resumen de nuestra aplicación. Entre estos datos hay dos muy importante: api key, y secret, más adelante las usaremos.
Una vez que configuramos nuestra aplicación vamos a construirla. Antes que nada este ejemplo lo realizo usando la API Facebook Developer Toolkit (es la que estuve usando hasta ahora, probablemente actualice más adelante para Facebook.Net), entonces tenemos agregar al proyecto las referencias de esta API, Facebook.dll, Facebook.Controls.dll y Facebook.WebControls.dll así tenemos todas las funciones para trabajar.
En el Code Behind de Default.aspx cambiamos la clase que heredada por CanvasIFrameBasePage, está base page tiene dos propiedades, Api y Secret. ( Adivinaron hay van las llaves que nos da Facebook), y un clase FBService que llama los servicios REST. La pagina debería configurarse de esta forma
public partial class _Default : CanvasIFrameBasePage
{
Facebook.Components.FacebookService();
private const string FACEBOOK_API_KEY = "llave api";
private const string FACEBOOK_SECRET = "llave secret";
new protected void Page_Load(object sender, EventArgs e)
{
base.Api = FACEBOOK_API_KEY;
base.Secret = FACEBOOK_SECRET;
base.Page_Load(sender, e);
}
}
Bien vamos ha buscar datos del usuario que accede a la aplicación, y mostrarlos en la pantalla. Agregamos un Label en el aspx. en el Code Behind llamamos a las librerías Facebook, Facebook.Entity, Facebook.WebControls y escribimos el siguiente código:
User usuario = this.FBService.GetUserInfo();
this.Label1.Text = string.Format("Hola {0} ", usuario.FirstName);
Ahora solo queda una cosa, ver la pagina dentro de Facebook, primero agregamos la aplicación a nuestro profile, lo pueden hacer directamente entrando con la URL que completaron en el campo "Canvas Page URL". Al agregar serán redireccionados a la pagina que armamos.
Otro ejemplo, ver las fotos de todos sus amigos agregamos un Literal al aspx y copiamos el siguiente código:
string salida = "Estos son tus amigos:<br />";
Collection<User> amigos = this.FBService.GetFriends();
foreach (User amigo in amigos)
{
salida += string.Format("<img src='{0}' alt='{1}'/>", amigo.PictureSmallUrl,
amigo.Name);
}
Literal1.Text = salida;
Bien, hasta aquí por hoy, intenten hacer una App , pueden dejar sus comentarios y las URL de sus App así otros pueden verlas. También les dejo los links a la aplicación on-line y al código fuente.
Un abrazo.