Introducción
Las reacciones son más expresivas en comparación con los simples botones Me gusta y No me gusta. Usando reacciones, el usuario puede expresar fácilmente su pensamiento porque los emoticones son básicamente una forma de mostrar las emociones. Por otro lado, si usamos el botón Me gusta y No me gusta, el usuario no puede mostrar la emoción exacta. Usando emoticones podemos hacer que nuestro sitio sea más expresivo para el usuario.
Objetivos del blog
En este blog, encontrará una manera fácil y rápida de implementar la funcionalidad Reacciones. Después de revisar el blog, podrá crear un sistema de reacción para su sitio web igual que el botón Me gusta de Facebook.
Acoplar
Habrá un botón Me gusta y el resto de los botones de Reacción. Al enfocar el botón Me gusta, se mostrarán los botones de Reacción. JQuery se usará para manejar los toques en los botones de reacción. Al tocar el botón de reacción, se envía una solicitud de Ajax en la página like.php. La lógica para guardar/actualizar datos en la base de datos se puede escribir en la página del controlador. Al volver a tocar el texto de la reacción, la reacción se deshace y esta vez estamos enviando Ajax en la página undo_like.php. Toda la funcionalidad para mostrar/ocultar los botones de reacción y la animación se agrega a través de JavaScript y CSS.
Crear la estructura HTML
Antes de trabajar en la lógica, tendremos que crear el diseño. El HTML para el diseño es el siguiente:
Reacciones de Facebook Reacciones de Facebook Me gusta Knowband y 4.3.0k más
Agregar estilo
Estamos usando dos archivos CSS (style.css y reacción.css) para agregar estilo en la página.
Nota: Puede encontrar los archivos CSS en la compilación completa del proyecto.
Adición de funcionalidad
Una vez que nuestro diseño esté listo, podemos trabajar en las funcionalidades. Primero manejaremos los toques en los botones Me gusta y Reacción. Para eso, usaremos jQuery y agregaremos los eventos de clic. El código para agregar los eventos de clic se proporciona a continuación:
// Agregar el evento de clic tan pronto como el documento esté listo $(document).ready(function () { // Agregar el evento de clic en el botón de reacción usando el nombre de clase $(".emoji").on("click ", función () { // Me gusta hacer clic // Aquí escribiremos el código, que se ejecutará al tocar el botón de reacción }); });
Al enfocar el botón de reacción, enviaremos la solicitud de Ajax en la página php. La solicitud de Ajax se proporciona a continuación:
// Envío de solicitud Ajax en la página del controlador (like.php) para realizar las operaciones de la base de datos $.ajax({ tipo: "POST", url: "php/like.php", datos: "", éxito: función (respuesta) { // Este código se ejecuta después de que Ajax tenga éxito } })
Luego tendremos que crear una página de controlador. Esto puede ser un simple archivo php.
Nota: El usuario puede realizar cambios en la base de datos en el archivo del controlador de acuerdo con el requisito. Todo lo que se devuelve/imprime en ese archivo se devuelve a la solicitud de Ajax y podemos actualizar el diseño en consecuencia. Aquí hemos agregado el código para actualizar el diseño para mostrar la reacción guardada actualmente. El código completo del archivo de reacción.js es el siguiente:
$(document).ready(function () { $(".emoji").on("click", function () { // Aquí obtenemos la reacción que se utiliza mediante el atributo data-reaction definido en main página var data_reaction = $(this).attr("data-reaction"); // Enviando una solicitud Ajax en la página del controlador para realizar las operaciones de la base de datos $.ajax({ type: "POST", url: "php/like.php ", data: "data_reaction=" + data_reaction, success: function (response) { // Este código se ejecutará después de que Ajax tenga éxito $(".like-details").html("You, Knowband y 10k más") ; $(".reaction-btn-emo").removeClass().addClass('reaction-btn-emo').addClass('like-btn-' + data_reaction.toLowerCase()); $(".reaction- btn-text").text(data_reaction).removeClass().addClass('reaction-btn-text').addClass('reaction-btn-text-' + data_reaction.toLowerCase()).addClass("active") ; if (data_reaction == "Me gusta") $(".like-emo").html(' '); else $(".como-emo").html(' '); } }) }); $(".reaction-btn-text").on("click", function () { // deshacer clic en me gusta if ($(this).hasClass("active")) { // Enviando solicitud Ajax en la página del controlador para realizar las operaciones de la base de datos $.ajax({ tipo: "POST", url: "php/undo_like.php", datos: "", éxito: función (respuesta) { // Manejar cuando el Ajax es exitoso $(". reacción-btn-text").text("Me gusta").removeClass().addClass('reacción-btn-text'); $(".reaction-btn-emo").removeClass().addClass('reacción -btn-emo').addClass("like-btn-default"); $(".like-emo").html(' '); $(".like-details").html("Knowband y 1k más"); } }) } }) });
Resumen
Puede descargar el proyecto completo desde la siguiente ubicación:
Click aquí para descargar el proyecto completo
En este tutorial no hemos cubierto la conexión y las operaciones de la base de datos, ya que la lógica de la base de datos puede ser diferente según sus necesidades. Con la ayuda de este proyecto, puede implementar fácilmente la funcionalidad de reacciones igual que Facebook en su página web.
