DesarrolloWeb.com > Manuales > Manual de Microsoft WebMatrix

Web social. Facebook Helper

24 de abril de 2012

Valoración del artículo:

Enviar un comentario

Vemos cómo implementar la red social Facebook, en nuestra web creada a partir de WebMatrix.

Por Jaime Peña Tresancos

Seguir a jpt219

En nuestro ejemplo:

Instalaremos el Facebook Helper.
Crearemos un ejemplo simple, sin necesidad de funciones de inicialización.
Trataremos la configuración e inicialización de Facebook Helper.
Crearemos un ejemplo completo, con toda la funcionalidad de Facebook Helper.

Instalación de Facebook Helper

Comenzaremos crearemos un nuevo proyecto basado en una plantilla (Template).

Nota: Repásese el artículo correspondiente a ASP.NET Web Helpers, en el que se trataba la instalación de los complementos o Packages de WebMatrix.

IMAGEN 15 Para comenzar, haremos clic sobre Templates (plantillas) en la pantalla inicial de WebMatrix.

De entre las plantillas existentes, seleccionamos Sitio vacío, le damos un Site Name, por ejemplo FacebookHelper, y finalizamos haciendo clic sobre el botón OK.

Ya en la vista de Site en el entorno de desarrollo de WebMatrix, vemos en el panel de la derecha un enlace a ASP.NET Web Pages Administration, hacemos clic sobre él y esto nos llevará a una ventana del explorador de Internet en dónde podremos realizar las correspondientes tareas administrativas.

Dado que es la primera vez que acudimos a las labores de administración en éste proyecto, se nos pide que creemos una contraseña y la confirmemos. Tras lo cual deberemos hacer clic sobre el botón Create Password, que ya se encontrará activo.

Seguimos los pasos ya conocidos y localizamos Facebook Helper 1.0 (O, si la hubiera, una versión más reciente) y hacemos clic sobre Install.

Se nos informará que el proceso de instalación ha finalizado correctamente.

Al final ya podremos cerrar la sesión, haciendo clic en Logout, cerrar el explorador de Internet si no lo estábamos utilizando y volver al entorno de desarrollo de WebMatrix.

En el entorno de desarrollo de WebMatrix, si no lo estamos ya, deberemos ir a la vista Files, haciendo clic sobre la entrada en el panel inferior izquierdo.

En el esquema de carpetas y archivos del Site, pulsamos con el botón derecho del ratón sobre el título superior (el nombre del proyecto, FacebookHelper en nuestro caso) y hacemos clic sobre Refresh, para asegurarnos que se reflejan los cambios del sistema que debieron haberse producido últimamente.

Podremos observar que se ha creado una nueva carpeta (packages) en la que se encuentra otra con los archivos del paquete recién instalado y que en la carpeta Admin se ha creado un nuevo archivo, ahora hay dos, el de contraseñas y el de configuración de los paquetes. Una tercera carpeta creada, denominada Facebook, contiene toda la documentación necesaria en formato HTML.

Un ejemplo sencillo

En el presente ejemplo veremos algunas de las posibilidades de interactuar con Facebook sin realizar ninguna inicialización en la sección de código Razor. Si bien implica una simplicidad y la no necesidad de disponer de los códigos de cuenta de aplicación del propio Facebook, se paga en forma de menor acceso a las funcionalidades del Facebook Helper.

Imaginemos que seleccionamos todo el código de la página Deafault.cshtml y lo sustituimos por:

@{
: : 
}

<!DOCTYPE html>

<html lang="es">
: : <head>
: :  : : <meta charset="utf-8" />
: :  : : <title></title>
: : </head>
: : <body>
: :  : : @Facebook.LikeButton("http://localhost:28935/")
: :  : : @Facebook.LikeBox("http://www.facebook.com/MSDNSpain")
: :  : : @Facebook.LikeBox("http://www.facebook.com/Microsoft")
: : </body>
</html>

Finalmente para probarlo, hagamos clic sobre el botón Run o bien clic con el botón derecho del ratón sobre FacebookHelper, en el esquema de archivos de la izquierda, y seleccionemos Launch in browser.

Obsérvense los botones de LikeButton, que son el Like estándar más el de Sign Up y las dos ventanas de LikeBox que apuntan a MSDN España y a Microsoft Corp.

Nota: Para seguir, de nos ser usuarios de Facebook, deberemos registrarnos como tales y posteriormente volver a éste punto

Configuración e inicialización de Facebook Helper

Para utilizar todas las funcionalidades de Facebook Helper necesitamos obtener dos datos de nuestra cuenta de Facebook, por ello deberemos estar registrados en él. Suponiendo que sí lo estamos, de lo contrario deberemos hacerlo. Lo que sigue nos describe cómo obtenerlos y cómo emplearlos en nuestras aplicaciones.

Accederemos con nuestro explorador de Internet a una de las siguientes direcciones:

http://www.facebook.com/developers/createapp.php
https://developers.facebook.com/apps

Se mostrará en primer lugar la ventana de acceso (login) a Facebook y posteriormente otra adicional de acceso al área de aplicaciones, en la que deberemos repetir la contraseña.

Ahora veremos las aplicaciones que tengamos registradas en Facebook, si las hubiera.

Lo que nos interesa realmente es registrar y obtener los datos para inicialización de funciones avanzadas de Facebook en otra nueva.

Prosigamos haciendo clic sobre el botón Crear nueva aplicación, como se muestra en la figura adjunta.

Se desplegará la caja de diálogo Create New App.

En App Name se debe escribir el nombre de la aplicación que queremos registrar y que debe ser único, tenemos que marcar la casilla de verificación de aceptación de la política de Facebook Platform y finalizar pulsando el botón Aceptar.

Tras unos instantes tendremos una especie de diploma como el mostrado en una figura anterior en que se lee Aplicaciones ? WebMatrix Helper, con el nombre de la aplicación que hayamos registrado y que contiene los datos para la inicialización de las funciones más avanzadas de Facebook Helper:

App ID/API Key
Código secreto de la aplicación

Veámoslo seguidamente con un ejemplo final.

Un ejemplo completo

En éste breve, pero intenso ejemplo, haremos un uso extensivo de las funciones disponibles a través del Facebook Helper.

Antes de nada, necesitaremos para muchas de ellas realizar una serie de inicializaIMAGEN 15 ciones del API para Facebook contenido en el Helper:

Initialize: Es la pieza clave de inicialización de Facebook Helper, toma como parámetros los valores obtenidos anteriormente del apartado de aplicaciones de Facebook y nos da acceso a las funciones que precisan de inicialización (identificación de usuario de una aplicación) en Facebook.
FbmlNamespaces: Inicializa el espacio de nombres Facebook Markup Language (FBML), de manera que el código generado por el Facebook Helper sea entendido por los exploradores de Internet.
GetInitializationScripts: Finalmente, Facebook hace uso de bibliotecas en JavaScript que deben ser inicializadas; ésta llamada hace todo el procedimiento por nosotros y debe ir justamente después de la etiqueta de apertura de . En todo caso, antes de cualquier llamada al API de Facebook Helper.

Respecto a las funciones disponibles, obsérvese la tabla adjunta, se muestran sus descripciones y también si son necesarios los procedimientos anteriormente descritos para las inicializaciones ?será un buen ejercicio hacer prácticas sobre el ejemplo final y retirar las funciones que precisen inicialización y las propias inicializaciones y ver que eso es así y otras posibles combinaciones y ver en que falla la ejecución-.

Funciones	Inicialización	Descripción
LikeButton	No	Muestra el típico botón ?Like? de Facebook.
LikeBox	No	Muestra una caja con las últimas aportaciones a Facebook, del canal de noticias público, de un usuario de Facebook que se dé como parámetro.
Comments	No	Se trata de una poderosa herramienta, en la que se vierten comentarios que posteriormente serán mostrados juntamente con la referencia completa del sitio y la propia aplicación.
Recommendations	Sí	Se muestra la información de usuarios que hacen recomendaciones de nuestro sitio o comparten información desde su sitio
Facepile	Sí	Cuando se utiliza, se mostrarán las imágenes de los usuarios amigos que ya han mostrado que les ha gustado la página en cuestión.
LiveStream	Sí	Proporciona una ventana con capacidades de conversación en tiempo real (chat).
ActivityFeed	Sí	También se abre una ventana en la que se muestra información cuando usuarios comentan acerca del sitio o informan de él en Facebook.

@{
: : Facebook.Initialize("316938420540102", "e834331d5a888d78ed67df4a19ae7dde");
}

La maqueta de nuestra aplicación debería contener un código similar al que sigue:

@{
: : Facebook.Initialize("{App ID}", "{App Secret}");
}

<!DOCTYPE html>

<html lang="es" @Facebook.FbmlNamespaces()>
: : <head>
: :  : : <meta charset="utf-8" />
: :  : : <title></title>
: : </head>
: : <body>
: :  : : @Facebook.GetInitializationScripts()
: :  : : @Facebook.LikeButton("http://locaIMAGEN 15 lhost:28935/")
: :  : : 
: :  : : @Facebook.LikeBox("http://www.facebook.com/MSDNSpain")
: :  : : 
: :  : : @Facebook.Comments()
: :  : : @Facebook.Recommendations()
: :  : : 
: :  : : @Facebook.Facepile()
: :  : : @Facebook.LiveStream()
: :  : : @Facebook.ActivityFeed()
: : </body>
</html>

Volvamos la vista al anterior apartado, allí finalmente obteníamos dos valores que ahora tenemos que manipular.

Utilizaremos la clave numérica como {App ID}, obsérvese que {App Secret} es el valor más largo, con letras en minúsculas y números, de modo que nos quedaría el código similar al siguiente:

@{
: : Facebook.Initialize("316938420540102", "e834331d5a888d78ed67df4a19ae7dde");
}

Nota: Los datos {App ID} y {App Secret} aquí dados son ficticios

Finalmente para probarlo, hagamos clic sobre el botón Run o bien clic con el botón derecho del ratón sobre FacebookHelper y seleccionemos Launch in browser.

Las imágenes que siguen son que se mostrarán en nuestra página Web en el correspondiente explorador de Internet.