Consigue reseñas de Google de 5 estrellas evitando malas reseñas

Este snippet de código para WordPress permite a los visitantes de tu sitio web dejar reseñas de forma segura y sencilla. A continuación, te explicaré cómo funciona este snippet, sus casos de uso y cómo implementarlo en tu sitio web.

¿Cómo Funciona?

Este snippet crea un shortcode llamado reviews_seguras, que puedes insertar en cualquier página o entrada de tu sitio WordPress. Al hacerlo, se mostrará un bloque que permite a los usuarios calificar tu servicio del 1 al 5 utilizando estrellas. Además, según la calificación, se mostrará un formulario para dejar una reseña detallada o un enlace para valorar el servicio en Google.

Captura

Si tu cliente vota menos de 5: le mostramos un formulario para que escriba su comentario y nos llegue al correo.

Si tu cliente vota 5, ¡entonces está contento! y le mostramos un bloque para que la reseña la escriba en Google.

 

IMPORTANTE: cambia la URL de las reseñas para que vayan a tu negocio, $reviewgoogle=»aquí tu enlace»

La URL la puedes conseguir iniciando sesión en Google y poniendo tu negocio en el buscador, luego pincha en Solicitar reseña y copia la URL

1

function reviews_seguras_shortcode() {
    ob_start();
    $reviewgoogle="https://g.page/r/CdQZ3dhos_OzEss/review";
    ?>
    <div class="reviews-seguras">
        <h2>Comparte tu opinión</h2>
        <p>Califica nuestro servicio del 1 al 5</p>
        <div class="estrellas">
            <?php for ($i = 1; $i <= 5; $i++) { ?>
                <span class="estrella" data-valor="<?php echo $i; ?>">★</span>
            <?php } ?>
        </div>
        <?php
        if ($_POST['action'] == 'guardar_reseña' && isset($_POST['reseña'])) {
            $valoración = intval($_POST['valoración']);
            $reseña = sanitize_text_field($_POST['reseña']);

            // Envía el correo al administrador
            $admin_email = get_option('admin_email');
            $subject = 'Nueva reseña';
            $message = "Mensaje enviado:\n\n$reseña";
            wp_mail($admin_email, $subject, $message);

            // Muestra un mensaje de confirmación
            echo '<p>Mensaje enviado, gracias por tu comentario</p>';
        } else {
        ?>
            <div class="formulario-reseña" style="display: none;text-align:left">
                <form action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" method="post">
                    <label for="reseña">Valora tu experiencia:</label>
                    <textarea id="reseña" name="reseña" required></textarea>
                    <input type="hidden" name="action" value="guardar_reseña">
                    <input type="hidden" id="valoración" name="valoración" value="0">
                    <input type="submit" value="Enviar">
                </form>
            </div>
            <div class="bloque-google-reseña" style="display: none;">
                <div class="bloque-google">
                    <h3><span>¿Nos ayudas?</span> Valoranos en Google</h3>
                    <p>Tu opinión es nuestra inspiración para mejorar constantemente.</p>
                    <a href="<?php echo $reviewgoogle;?>" target="_blank" class="boton-google">Dejar reseña</a>
                </div>
            </div>
        <?php } ?>
    </div>
    <style>
        /* Estilos anteriores */
        .reviews-seguras {
            text-align: center;
            margin: 20px;
        }
        .estrella {
            font-size: 30px;
            cursor: pointer;
            color: black;
        }
        .estrella:hover,
        .estrella.clicked,
        .estrella.selected {
            color: fuchsia;
        }
        .bloque-google {
            border: 2px solid #000;
            padding: 40px;
            border-radius: 15px;
            margin-top: 20px;
        }
        .bloque-google a {
            background: #357fbf;
            color: #fff;
            padding: 12px 24px;
            border-radius: 40px;
            margin-top: 15px;
            display: inline-block;
        }
        .bloque-google span {
            color: #357fbf;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var estrellas = document.querySelectorAll(".estrella");
            var formularioReseña = document.querySelector(".formulario-reseña");
            var bloqueGoogleReseña = document.querySelector(".bloque-google-reseña");
            var valoraciónInput = document.getElementById("valoración");
            var reviewsSeguras = document.querySelector(".reviews-seguras");
            var estrellasHabilitadas = true; // Variable para rastrear si las estrellas están habilitadas

            estrellas.forEach(function (estrella) {
                estrella.addEventListener("mouseover", function () {
                    if (estrellasHabilitadas) {
                        var valor = parseInt(estrella.getAttribute("data-valor"));
                        estrellas.forEach(function (e, i) {
                            if (i < valor) {
                                e.classList.add("selected");
                            } else {
                                e.classList.remove("selected");
                            }
                        });
                    }
                });
            });

            estrellas.forEach(function (estrella) {
                estrella.addEventListener("click", function () {
                    if (estrellasHabilitadas) {
                        var valor = parseInt(estrella.getAttribute("data-valor"));
                        estrellasHabilitadas = false; // Deshabilitar las estrellas después del clic
                        estrellas.forEach(function (e, i) {
                            if (i < valor) {
                                e.classList.add("clicked");
                            }
                            e.classList.remove("hovered");
                        });
                        valoraciónInput.value = valor;
                        if (valor < 5) {
                            formularioReseña.style.display = "block";
                            bloqueGoogleReseña.style.display = "none";
                        } else if (valor === 5) {
                            formularioReseña.style.display = "none";
                            bloqueGoogleReseña.style.display = "block";
                        }
                    }
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('reviews_seguras', 'reviews_seguras_shortcode');

 

Casos de Uso

Este snippet es especialmente útil para:

  • Sitios web de comercio electrónico que deseen recopilar reseñas de sus productos o servicios.
  • Blogs o sitios de contenido que quieran recibir feedback de sus lectores.
  • Cualquier tipo de negocio que busque mejorar su servicio al cliente mediante la recopilación de reseñas.

Implementación

Para implementar este snippet, sigue estos pasos:

  1. Copia todo el código del snippet.
  2. Ve al panel de administración de WordPress.
  3. Navega a Apariencia > Editor de Temas.
  4. Encuentra el archivo functions.php de tu tema y pégalo al final del archivo.
  5. Guarda los cambios.

Ahora puedes usar el shortcode [reviews_seguras] en cualquier página o entrada para mostrar el bloque de reseñas.

Personalización

El snippet incluye estilos CSS y JavaScript para controlar la apariencia y el comportamiento del bloque de reseñas. Puedes modificar estos estilos según las necesidades de tu sitio web.

Consideraciones de Seguridad

El snippet utiliza la función sanitize_text_field para limpiar el texto de la reseña, lo que ayuda a prevenir ataques de inyección de código. Además, envía un correo electrónico al administrador del sitio con cada nueva reseña, lo que permite un seguimiento efectivo.

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

Relacionados: