sábado, 12 de diciembre de 2015

Como agregar un boton “Like” o “Me gusta” de Facebook en ASP.NET MVC

Al hacer clic sobre el botón "Me gusta", indicamos que nos gusta un determinado contenido y lo compartimos de una manera rápida en Facebook.

Para implementarlo en nuestras páginas de ASP.NET MVC, lo primero que debemos hacer es dirigirnos a Facebook for Developers en la dirección https://developers.facebook.com/docs/ y dar clic en el link “Social Plugins” (pueden ir directamente dando clic a este link https://developers.facebook.com/docs/plugins?locale=en_EN ) luego en el menú de la izquierda que se nos mostrará, damos clic en “Like Button” como se muestra a continuación:

Luego, si no hemos iniciado sesión, nos pedirá que lo hagamos para poder continuar:

Tras iniciar sesión, volvemos a “Like Button” e ingresamos la siguiente información en el “Like Button Configurator”:

1.- URL to Like: La URL de la página en la que desea agregar el “Me gusta” o “Like Button”.

2.- Width: El tamaño del plugin expresado en píxeles.

3.- Layout: que por defecto es Standard, pero puede ser cambiado por box_count, button_count o button.

4.- Action Type: es el tipo de acción que por defecto es “like”.

Además podemos agregar un botón “Compartir” e indicar si “mostrar los rostros de los amigos”.

Luego de ingresar esta información damos clic en "Get Code" para obtener el código generado.

NOTA: Si no se te genera el segundo bloque de código y obtienes algo como esto:

Este error ocurre cuando trabajamos con el sitio traducido al español, por lo tanto para solucionar este problema, simplemente cambiamos la URL https://developers.facebook.com/docs/plugins/like-button?locale=es_ES por https://developers.facebook.com/docs/plugins/like-button?locale=en_EN

El primer bloque de código es un javascript que debe colocarse justo después de la etiqueta <Body>, y el segundo bloque de código colocarlo en donde desea que el plugin “Me gusta” o “Like” aparezca en tu página web. Para nuestro ejemplo el primer bloque lo dejaré en la plantilla ”_Layout” que se encuentra en Views/Shared.

NOTA: Para los que hicieron el ejercicio del post anterior “Como implementar el Facebook Comments Plugin para agregar comentarios en ASP.NET MVC” , no deben colocarlo nuevamente, ya que es el mismo:

Y el segundo bloque lo pondré al final de todo el código de la vista "Index" que se encuentra en Views/Home. Voy a modificar el atributo “data-href” para indicar la dirección precisa de la vista que es http://localhost:1113/Home/Index.

Ahora ejecutaré la aplicación para ver el resultado.

Podemos ver que se ha agregado el plugin bajo el plugin de comentarios. Voy a iniciar sesión en Facebook y dar clic en “Me gusta” para comprobar que funciona bien.

Al dar clic en el botón me gusta y luego de iniciar sesión en Facebook, me aparece un error.

Daremos clic en el error para ver de qué se trata.

El problema es que trabajamos con localhost, por lo tanto solo para efecto de realizar una prueba, voy a cambiar la URL del atributo “data-href” por http://turboprogramacion.blogspot.cl.


Y vuelvo a ejecutar el sitio para probar el botón “Me gusta”

Y todo ha ido bien:

No olviden colocar una URL válida cuando pasen a producción su sitio web.

Y ya para terminar, les diré que el generador de código para nuestro plugin de “Me gusta” no incluye todas las opciones, y que además podemos configurar otros atributos que se encuentran documentados en la misma página de Facebook.

Bueno, esto sería todo por ahora. En el siguiente post, colocaremos un botón “Compartir”.

Espero les haya gustado y les sea de utilidad.

Saludos, Toby.

No hay comentarios:

Publicar un comentario

Entradas populares