7 – MVC 3 con Razor ~ Agregando Facebook y Twitter a mi aplicación

Buenas amigos hoy vamos a hablar de como agregar funcionalidad a nuestra aplicación WEB con Facebook, Twitter y otras más, para hacer esto tendremos que abrir nuestro administrador de paquetes (Nuget), agregar una librería y después a utilizarla, pero bueno vamos a empezar.

Primero tomamos nuestro proyecto con el que venimos trabajando del POST anterior y abrimos nuestro administrador de paquetes para agregar una nueva librería, para esto hacemos botón derecho sobre nuestro Proyecto y clic en “Add Library Package Reference”.image

Se abre una ventana y seleccionamos Online, buscamos la librería “microsoft-web-helpers”.

image
Una vez encontrada nuestra librería le damos clic en Install, si observan nuevamente verán que ya esta instalada en el proyecto.
image
También para hacerlo mucho más fácil pueden abrir directamente la consola de administración haciendo clic en Herramientas->Library Package Manager->Package Manager Console y escriben “Install-Package microsoft-web-helpers” le dan enter.
image
Bueno si pueden notar verán que tenemos una nueva carpeta que se llama App_Code y otra que se llama Facebook, adentro están las implementaciones que tienen por defecto cada una de las librerias, pero si ejecutan el proyecto les va a tirar un error.
image

Sucede que la librería micrsosoft-web-helpers v1.1 que bajamos trabaja con paginas Web simples realizadas con WebMatrix, así que lo que tendremos que hacer es copiar en la carpeta Bin los archivos WeMatrix.Data.dll y WebMatrix.WebData.dll que se encuentran en la dirección %ProgramFiles%\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies.
image

Ahora ejecutamos y ya esta de nuevo en funcionamiento. image
Ahora vamos a ir a nuestro template y ponemos el siguiente código.

@Twitter.Search("MVC 3 con Razor",280,250,"Titulo Twitter","Esta es la caption","#3E3B36","#999999")

Con esta simple línea estamos poniendo un marco de búsqueda de comentarios en línea de Twitter que son referentes a nuestra web, noticia, etc, a todo lo que quieran poner.

image

Ahora agregamos la siguiente línea.

@Facebook.LikeButton(“mardemza.wordpress.com”)

Esta otra línea agrega el botón de “Me Gusta” de Facebook. Pueden agregar más funcionalidad viendo las referencias que están dentro de la carpeta Facebook del mismo proyecto.

image

 

Bien ahora vamos agregar una vista, donde seguido agregamos estas líneas de abajo.

<h3>Gravatar</h3>
@Gravatar.GetHtml("moises.rivas@msptechrep.com") <br />

<h3>XBox Live GameCard</h3>
@GamerCard.GetHtml("mardemza") <br />

<h3>Microsoft Bing</h3>
@Bing.SearchBox()

<h3>Twitter Button</h3>
@TwitterGoodies.TweetButton( TwitterGoodies.DataCount.Horizontal,"Titulo","https://mardemza.wordpress.com", TwitterGoodies.Languages.Spanish) <br />

<h3>Facebook Recomendaciones</h3>
@Facebook.Recommendations("http://cells.puertadeenlace.net/")

Si ejecutan verán que hemos agregado Gravatar de un mail que le pasamos, un perfil de XBox que trae datos públicos de algún perfil que le indiquemos, un buscador de Bing, un boton de Re-Twittear y recomendaciones de Facebook.

image

image
Los invito a que sigan investigando  y a que se instalen otras librerías desde el administrador, como ven es muy facil de utilizar y le agrega a nuestra Web muy buena funcionalidad relacionada con las redes sociales y otras más.

Aquí abajo les dejo el link para que descarguen el proyecto de este POST.

MVC 3 con Razor – 7º POST

Bueno hasta aquí llegamos hoy, espero que les alla gustado.

En resumen hoy hemos aprendido a:

Abrir el Library Package Manager.

Instalar una librería.

Utilizar la librería con sus funcionalidades.

Recomendaciones:

Nuget

Facebook Helper

Kodu incluido en Dreamspark.

Ebook gratuito–Nuevo / desarrollo de Windows Phone 7

Espero sigan investigando y nos vemos para el próximo POST

Para cualquier consulta pueden dejar sus mensajes aquí o mandar me un correo electrónico a moises.rivas@msptechrep.com.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s