lunes, 14 de diciembre de 2015

Como agregar un boton “Share” o “Compartir” de Facebook en ASP.NET MVC

El botón “Compartir” o “Share” permite a los visitantes de tu sitio web agregar un mensaje personalizado o enlaces para compartir a través de 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 “Share 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 “Share Button” e ingresamos la siguiente información en el “Share Button Configurator”:

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

2.- Layout: que por defecto es “button_count”, pero puede ser cambiado por:

Dejaré el button_count

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, revisa el post anterior “Como agregar un boton “Like” o “Me gusta” de Facebook en ASP.NET MVC” en donde explico cual puede ser el error y su solución.

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 “Compartir” o “Share” 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 alguno de los dos Post anteriores “Como implementar el Facebook Comments Plugin para agregar comentarios en ASP.NET MVC”, o “Como agregar un boton “Like” o “Me gusta” de Facebook 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 “Me gusta”. Voy a iniciar sesión en Facebook y dar clic en “Compartir” para comprobar que funciona bien.

Bueno, esto sería todo por ahora. Espero les haya gustado y les sea de utilidad.

Saludos, Toby.

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.

Como implementar el Facebook Comments Plugin para agregar comentarios en ASP.NET MVC

El plugin de Comentarios permite a las personas hacer comentarios sobre el contenido que visitan en su sitio web, en donde utilizan sus propias cuentas de 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=es_ES ) luego en el menú de la izquierda que se nos mostrará, damos clic en “Comments” 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 “Comments” y en “Comments Plugin Code Generator” ingresamos la siguiente información:

1.- URL to comment on: La URL de la página en la que desea agregar el cuadro de comentario.

2.- Width: El tamaño de la caja de comentario expresado en píxeles.

3.- Number of Posts: El la cantidad de mensajes que se verán a la vez en una página.

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

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 de la caja de comentario aparezca en su página web.

Para nuestro ejemplo el primer bloque lo dejaré en la plantilla ”_Layout” que se encuentra en Views/Shared:

Y el segundo bloque lo pondré en la vista Index que se encuentra en Views/Home al final de todo el código. 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 y tiene 0 comentarios. Voy a iniciar sesión en Facebook y agregar un comentario para comprobar que funciona bien.

Y como todo ha ido bien, aquí aparece el comentario:

El generador de código para nuestro plugin de comentarios no incluye todas las opciones, así que también podemos agregar los siguientes ajustes en el <div class="fb-comments" data-href="http://localhost:1113/home/index" data-width="250" data-numposts="5"></div>:

Si se quiere agregar el plugin en más de una página, debe modificar el atributo “data-href” para indicar la dirección exacta como ya lo he indicado antes. Si necesitas cambiar el tamaño del plugin debe modificar “data-width”.

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

Espero les haya gustado y les sea de utilidad.

Saludos, Toby.

Entradas populares