sábado, 12 de diciembre de 2015

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.

1 comentario:

Entradas populares