Potencia tu contenido: Cómo añadir botones de resumen con IA a tu web

Vivimos en una época en la que la inteligencia artificial ha transformado por completo la forma en que consumimos información. Seguramente te has dado cuenta de que tu audiencia valora cada vez más la inmediatez. A veces, alguien llega a uno de tus artículos y, aunque el tema le interesa muchísimo, no dispone de diez minutos para leerlo completo en ese preciso momento.

¿Y si le dieras la herramienta perfecta para no perder esa visita?

Hoy te voy a enseñar a implementar una funcionalidad increíblemente útil en tu sitio web: unos botones inteligentes que permiten a cualquier visitante generar un resumen automático de tu artículo usando su IA favorita (ChatGPT, Perplexity, Google AI o Grok) con un solo clic.

Lo mejor de todo es que vamos a ver dos formas de hacerlo: una nativa para WordPress (la opción «pro») y una universal que funciona en cualquier web.

Así es como queda (esta es la versión funcional de mi sitio) ¡Pruébalo!

¿Por qué deberías ofrecer esto a tu audiencia?

Antes de tocar código, es importante entender el valor que esto aporta. No se trata solo de «estar a la moda», sino de mejorar la Experiencia de Usuario (UX) de forma tangible.

1. Accesibilidad cognitiva: Ayudas a personas que prefieren procesar la estructura general antes de profundizar en la lectura detallada.
2. Retención: Si alguien tiene prisa, en lugar de cerrar la pestaña, usará el botón de resumen. Seguirá interactuando con tu marca en lugar de abandonarla.
3. Viralidad: Al facilitar el análisis con IA, fomentas que el contenido se comparta y se cite, ya que el «prompt» que hemos diseñado pide explícitamente a la IA que recuerde la fuente original.

La lógica detrás del código: Cómo funciona

No te preocupes, no necesitas ser especialista en programación para entender esto. La magia es bastante sencilla. Lo que haremos es crear un enlace que contiene una instrucción (un «prompt») predefinida.

El proceso automático es el siguiente:

1. El código detecta la URL del artículo que se está leyendo.
2. Detecta el idioma de la web (para pedir el resumen en español o inglés).
3. Construye una frase como: «Resume este artículo [URL] y recuerda citar la fuente».
4. Envía esa frase directamente a la herramienta de IA elegida por quien te visita.

Opción A: Integración nativa en WordPress (Recomendada)

Esta es la opción ideal si utilizas WordPress. Es más rápida, segura y aprovecha las funciones internas del CMS para detectar el idioma automáticamente.

Vamos a crear un Shortcode. Esto es genial porque te da el control total: podrás poner los botones donde quieras a través de un shortcode.

El código PHP

Aquí tienes el código listo para usar. He incluido los estilos CSS directamente dentro del código para asegurar que los botones se vean perfectos en cualquier tema (Astra, Divi, Elementor, etc.) sin que tengas que pelearte con hojas de estilo externas.

/**
 * Shortcode para botones de resumen IA con detección de idioma y estilos integrados.
 * Copia y pega este código en tu plugin de funcionalidades o functions.php
 */
function jrb_shortcode_botones_ia_multilingue() {
    
    // 1. Obtenemos la URL del artículo actual
    $url_articulo = get_permalink();
    
    // Validación de seguridad básica
    if ( ! $url_articulo ) {
        return '';
    }

    // 2. DETECCIÓN AUTOMÁTICA DE IDIOMA
    // Obtenemos el código de idioma del sitio (ej: 'es_ES', 'en_US')
    $locale = get_locale();
    
    // Configuración por defecto (Inglés)
    $titulo_caja = "🤖 Summarize this article with AI";
    $prompt_texto = "Summarize and analyze the key ideas of " . $url_articulo . ". Please answer in English.";

    // Si el idioma empieza por 'es' (Español), cambiamos los textos
    if ( strpos( $locale, 'es' ) === 0 ) {
        $titulo_caja = "🤖 Haz un resumen de este artículo con IA";
        $prompt_texto = "Resumir y analizar las ideas clave de " . $url_articulo . ". Por favor responde en Español. Recuerda citar la fuente: " . $url_articulo;
    }

    // Codificamos el texto para que funcione en la barra de direcciones
    $prompt_encoded = urlencode( $prompt_texto );

    // 3. DEFINICIÓN DE ESTILOS VISUALES (CSS Inline)
    // Esto asegura que se vea bien sin importar tu plantilla
    $estilo_contenedor = 'margin: 30px 0; padding: 20px; background-color: #f9f9f9; border-radius: 12px; text-align: center; border: 1px solid #e5e5e5; font-family: sans-serif; clear: both;';
    $estilo_titulo = 'margin-bottom: 15px; font-size: 1.1em; display: block; color: #333; font-weight: bold;';
    $estilo_flex = 'display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;';
    
    // Estilo base de los botones (con !important para evitar conflictos con el tema)
    $estilo_boton_base = 'display: inline-flex; align-items: center; padding: 10px 18px; color: #fff !important; border-radius: 50px; font-weight: 600; text-decoration: none !important; font-size: 14px; border: none; transition: opacity 0.2s; line-height: 1.2; box-shadow: 0 2px 4px rgba(0,0,0,0.1);';

    // 4. CONSTRUCCIÓN DEL HTML
    $html = '
    <div class="jrb-ai-share-container" style="' . $estilo_contenedor . '">
        <span style="' . $estilo_titulo . '">' . $titulo_caja . '</span>
        
        <div style="' . $estilo_flex . '">
            <a href="https://chat.openai.com/?q=' . $prompt_encoded . '" target="_blank" rel="noopener noreferrer" style="' . $estilo_boton_base . ' background-color: #10a37f;">
                💬 ChatGPT
            </a>

            <a href="https://www.perplexity.ai/search/new?q=' . $prompt_encoded . '" target="_blank" rel="noopener noreferrer" style="' . $estilo_boton_base . ' background-color: #6f42c1;">
                🔍 Perplexity
            </a>

            <a href="https://www.google.com/search?udm=50&q=' . $prompt_encoded . '" target="_blank" rel="noopener noreferrer" style="' . $estilo_boton_base . ' background-color: #4285F4;">
                🔮 Google AI
            </a>

            <a href="https://x.com/i/grok?text=' . $prompt_encoded . '" target="_blank" rel="noopener noreferrer" style="' . $estilo_boton_base . ' background-color: #000000;">
                🐦 Grok
            </a>
        </div>
    </div>';

    return $html;
}
// Registramos el shortcode
add_shortcode( 'resumen_ia', 'jrb_shortcode_botones_ia_multilingue' );
Lenguaje del código: PHP (php)

¿Cómo implementarlo?

La forma más segura y limpia de añadir este código a tu WordPress es utilizando un plugin gratuito como Code Snippets o WPCode.

1. Instala el plugin Code Snippets.
2. Ve a Fragmentos de código > Añadir nuevo.
3. Pega el código PHP que te he dejado arriba.
4. Ponle un nombre (ej: "Shortcode Botones IA") y guarda los cambios activando el snippet.

¡Y listo! Ahora, para mostrar los botones, solo tienes que escribir el shortcode en cualquier entrada, página o widget.

[Sugerencia de imagen: Captura de pantalla mostrando los cuatro botones (ChatGPT, Perplexity, Google, Grok) integrados limpiamente en un artículo de blog.]

Alt text sugerido: Ejemplo visual de los botones de resumen con IA integrados en un artículo de WordPress.

Prompt para IA de imagen: "Primer plano (close-up) de una interfaz web limpia en un monitor. Se ve el final de un artículo de blog y, debajo, un contenedor moderno con cuatro botones redondeados en forma de píldora alineados horizontalmente. Los botones tienen los colores: Verde azulado, Violeta, Azul y Negro. Tienen iconos pequeños y texto legible. Estilo UI/UX profesional de alta fidelidad."

Opción B: La solución Universal (JavaScript)

¿Tu web no usa WordPress? ¿Usas Shopify, Webflow, o código HTML a medida? No hay problema.

He adaptado el código para que funcione mediante JavaScript. En este caso, la detección de la URL y del idioma se hace directamente en el navegador de la persona que visita tu web.

Copia este código y pégalo donde quieras que aparezcan los botones (como un bloque HTML o Embed):

<div id="jrb-ai-buttons-container"></div>

<script>
(function() {
    // 1. Obtener la URL actual del navegador
    var currentUrl = window.location.href;

    // 2. Detectar idioma del navegador o del HTML
    var lang = document.documentElement.lang || navigator.language || "en";
    
    // Textos por defecto (Inglés)
    var boxTitle = "🤖 Summarize this article with AI";
    var promptText = "Summarize and analyze key ideas of " + currentUrl + ". Answer in English.";

    // Si detectamos español
    if (lang.indexOf("es") === 0) {
        boxTitle = "🤖 Haz un resumen de este artículo con IA";
        promptText = "Resumir y analizar las ideas clave de " + currentUrl + ". Responde en Español. Fuente: " + currentUrl;
    }

    var encodedPrompt = encodeURIComponent(promptText);

    // Estilos CSS (en variables para mantener el orden)
    var styleContainer = 'margin: 30px 0; padding: 20px; background-color: #f9f9f9; border-radius: 12px; text-align: center; border: 1px solid #e5e5e5; font-family: sans-serif;';
    var styleBtn = 'display: inline-flex; align-items: center; padding: 10px 18px; color: #fff !important; border-radius: 50px; font-weight: 600; text-decoration: none !important; font-size: 14px; border: none; transition: opacity 0.2s; line-height: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 5px;';
    
    // Inyectamos el HTML
    var htmlContent = `
        <div style="${styleContainer}">
            <strong style="display:block; margin-bottom:15px; color:#333;">${boxTitle}</strong>
            <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:10px;">
                <a href="https://chat.openai.com/?q=${encodedPrompt}" target="_blank" rel="noopener noreferrer" style="${styleBtn} background-color: #10a37f;">💬 ChatGPT</a>
                <a href="https://www.perplexity.ai/search/new?q=${encodedPrompt}" target="_blank" rel="noopener noreferrer" style="${styleBtn} background-color: #6f42c1;">🔍 Perplexity</a>
                <a href="https://www.google.com/search?udm=50&q=${encodedPrompt}" target="_blank" rel="noopener noreferrer" style="${styleBtn} background-color: #4285F4;">🔮 Google AI</a>
                <a href="https://x.com/i/grok?text=${encodedPrompt}" target="_blank" rel="noopener noreferrer" style="${styleBtn} background-color: #000000;">🐦 Grok</a>
            </div>
        </div>
    `;

    document.getElementById('jrb-ai-buttons-container').innerHTML = htmlContent;
})();
</script>
Lenguaje del código: PHP (php)

Dónde pegarlo

La gran ventaja de este código «universal» es que es muy flexible. Tienes varias opciones para colocarlo dependiendo de qué plataforma utilices:

1. En un Constructor Visual (Elementor, Divi, Wix, Squarespace): Busca el bloque llamado «HTML», «Código» o «Embed». Arrástralo justo debajo del contenido de tu artículo y pega el código allí.
2. En una web HTML pura: Pégalo dentro del <body>, preferiblemente justo antes de que se cierren las etiquetas de tu contenido principal o al final del archivo.
3. En un Widget de barra lateral: Si quieres que los botones aparezcan siempre en el lateral, usa un widget de «HTML Personalizado» y pega el código.

¿Cómo cambia esto según tu plataforma?

Aunque la opción de JavaScript que acabamos de ver es mi «comodín» favorito porque funciona en el 99% de los casos, es interesante entender qué está pasando bajo el capó.

La única pieza que cambia realmente entre una web hecha en WordPress, una tienda en Shopify o un portal en Joomla es cómo le pedimos al sistema la URL actual.

Si quisieras implementar esto de forma nativa (del lado del servidor, como hicimos en la Opción A) en otros CMS, solo tendrías que sustituir la forma de llamar a la URL:

• En WordPress (PHP): Usamos get_permalink() (como vimos en el tutorial).
• En Shopify (Liquid): Usarías el código {{ canonical_url }} o la combinación {{ shop.url }}{{ product.url }}.
• En Joomla (PHP): Se utiliza JUri::current().
• En HTML Estático: Tendrías que escribir la URL a mano en cada enlace o, para no trabajar el doble, usar el script de JavaScript de la Opción B.

Diferencia clave: Servidor vs. Navegador

Quizás te preguntes: «José Ramón, ¿por qué hay dos versiones si la de JavaScript funciona en todas partes?». La respuesta está en el rendimiento y el SEO.

1. Tu código de WordPress (PHP): Se ejecuta en el servidor. Cuando la página llega al móvil de tu lector, el enlace ya está construido. Es un pelín más rápido y robusto.
2. El código Universal (JavaScript): La URL se construye en el navegador del usuario en tiempo real. Tarda apenas unos milisegundos más (imperceptible para el ojo humano), pero tiene la ventaja mágica de ser compatible con cualquier tecnología (Wix, Webflow, Blogger, etc.) sin tocar los archivos del núcleo.

Personalización y últimos ajustes

Aunque el código que te he facilitado viene «listo para usar» con unos estilos muy cuidados y modernos, es posible que quieras darle tu toque personal para que encaje al 100% con tu marca.

Como hemos usado estilos en línea (para asegurar que se vean bien en cualquier sitio), la personalización se hace directamente dentro del código que has copiado. No necesitas ir a tu archivo CSS.

Aquí tienes un par de trucos rápidos para modificarlo:

1. Cambiar los colores de los botones

En el código (tanto la versión PHP como la JS), verás que cada botón tiene una propiedad background-color seguida de un código almohadilla (ej. #10a37f para ChatGPT).

Si quieres cambiar el color verde de ChatGPT por el color corporativo de tu marca, simplemente busca ese código hexadecimal y cámbialo por el tuyo.

• Ejemplo: Cambia #10a37f por #FF5733 (un naranja vibrante) si ese es tu color.

2. Cambiar el mensaje a la IA (El Prompt)

Esta es la parte más divertida. En la variable $prompt_texto (o promptText en la versión JS) está la instrucción que le damos a la inteligencia artificial.

Actualmente dice: «Resumir y analizar las ideas clave...». Pero tú puedes cambiarlo por lo que quieras. Algunas ideas creativas:

• Para webs educativas: «Crea un cuestionario de 5 preguntas basado en este artículo...»
• Para recetas de cocina: «Extrae la lista de la compra de esta receta...»
• Para noticias: «Resume esta noticia en un tono sarcástico...» (¡Sé creativo/a!).

¡Experimenta con ello! Pequeños cambios en el «prompt» pueden dar resultados muy diferentes y divertidos para tu audiencia.

Conclusión

Como ves, adaptar tu web a la era de la inteligencia artificial no tiene por qué ser complicado ni costoso. Con un simple fragmento de código, estás ofreciendo una utilidad enorme a tu comunidad y demostrando que tu sitio está a la vanguardia tecnológica.

Te animo a probarlo hoy mismo. Copia el código, pégalo en una entrada de prueba y haz clic en los botones para ver cómo la IA «lee» tu contenido. ¡Es mágico!

¿Tienes alguna duda sobre cómo implementarlo en tu tema específico? Escríbeme y estaré encantado de echarte una mano.