Etiqueta: blogger

Si tienes un blog en Blogger —ya sea que subas fotos de tus salidas de fin de semana, tutoriales de programación, recetas o notas de tu día a día— seguro ya te diste cuenta de la tremenda pedrada con la que te topas cuando quieres que la gente comparta tus publicaciones por WhatsApp 🤦‍♂️.

Te vas a tu página, abres una entrada, le das clic al bonito botón de compartir y la plataforma te despliega un menú con Facebook, X (Twitter), Pinterest y Correo electrónico… pero de WhatsApp, ¡absolutamente nada! 📉 Google diseñó esas plantillas modernas (Emporio, Soho, Contempo, Notable) hace varios años y, por alguna razón que nadie comprende, dejaron fuera de la jugada a la aplicación de mensajería más utilizada en México y en toda Latinoamérica 📱💬.

Cualquiera pensaría: “Pues me meto al código del tema y lo pego a mano”. ¡Grave error, compadre! Cuando entras a Tema > Editar HTML y le mueves a una coma, el validador de Blogger te avienta en la cara errores del demonio como:

“The widget settings in widget with id AdSense1 is not valid. An internal error occurred. Please try again.” 💥

Ahí es donde la mayoría se frustra, tira la toalla o termina desconfigurando la plantilla completa.

Pero aquí te traigo la buena noticia: no necesitas tocar ni una sola línea del código XML de tu plantilla. La forma más limpia, rápida, segura y que funciona al cien por ciento es meter un script ligero mediante un Gadget de HTML/Javascript desde el panel de Diseño 🛠️✨.

En este tutorial te voy a explicar paso a pasito cómo lograr que WhatsApp aparezca con su icono oficial verde dentro de ese menú desplegable, tanto en la portada como en las entradas individuales, sin riesgos y en menos de cinco minutos 🚀🌵.

1. La neta del planeta: ¿Por qué NO debemos tocar el XML de Blogger? 🛑⚠️

Antes de irnos a la solución práctica, hay que entender por qué meterle mano al XML de las plantillas oficiales de Blogger es una auténtica pesadilla.

Las plantillas modernas de Blogger (las que tienen nombres como Emporio, Soho, etc.) no están hechas con HTML normalito como cualquier página web sencilla. Están empaquetadas en un dialecto propietario de Google lleno de etiquetas XML complejas (<b:includable>, <b:widget>, <b:defaultmarkups>). Todo el sistema de botones para compartir viene encapsulado dentro de scripts que se descargan de servidores remotos de Google.

Cuando tú intentas editar el código desde el panel de Editar HTML, Blogger pasa todo el archivo por un filtro validador superestricto. Si tu blog tiene widgets de anuncios automáticos que no has configurado (como los famosos bloques vacíos AdSense1 o AdSense2), el validador se congela y te bloquea el botón de guardar.

Los peligros de modificar la plantilla a mano:

• El temido error de validación: El error de AdSense1 te impide guardar cambios legítimos.
• Riesgo de borrar etiquetas de cierre: Si borras un </b:includable> o una llave por accidente, el diseño entero colapsa y tu sitio muestra una pantalla en blanco.
• Se pierde al cambiar de tema: Si el día de mañana decides cambiar el estilo visual de tu blog, todo lo que le metiste a pedal y manivela al XML se borra y tienes que empezar desde cero.

Por eso, la regla de oro para no complicarse la existencia es: deja el XML en paz y aprovecha el sistema de Gadgets modulares 💡.

2. El truco maestro: Inyección DOM mediante Gadget HTML/JavaScript 🧠⚡

¿Cómo le hacemos para que WhatsApp aparezca adentro del menú de Blogger sin editar la plantilla? Muy fácil: usamos una técnica de desarrollo web llamada inyección en el DOM (Document Object Model).

En palabras sencillas:

1. Dejamos que Blogger cargue la página tal y como sabe hacerlo, pintando sus botones habituales (Facebook, X, Pinterest).
2. Agregamos un Gadget invisible que contiene un pequeño script en JavaScript nativo.
3. En una fracción de segundo, el script busca en la pantalla todos los menús que tengan la clase .share-buttons.
4. El script detecta automáticamente el título de la foto o artículo y el enlace exacto donde está parado el visitante.
5. Finalmente, crea un nuevo elemento de lista (<li>) con el icono oficial de WhatsApp y lo acomoda junto a las demás redes sociales.

Todo ocurre de forma instantánea. El visitante nunca nota la diferencia; para él, WhatsApp siempre estuvo integrado de fábrica en el blog 🚀.

3. El código JavaScript definitivo para el Gadget 💻📄

Este es el script optimizado que vamos a utilizar. Es ultraligero (pesa menos de 1 Kilobyte), no utiliza librerías pesadas como jQuery y lleva el icono vectorial de WhatsApp (SVG) incrustado en código puro para que no gaste ancho de banda descargando imágenes externas:

HTML

<script>
//<![CDATA[
function agregarWhatsAppCompartir() {
  // 1. Buscamos todos los menús desplegables de compartir presentes en la pantalla
  var shareMenus = document.querySelectorAll('.share-buttons');
  
  shareMenus.forEach(function(menu) {
    // Si este menú ya tiene el botón de WhatsApp inyectado, saltamos al siguiente (evita duplicados)
    if (menu.querySelector('.sharing-whatsapp-item')) return;

    // 2. Buscamos el contenedor del post correspondiente para extraer sus datos
    var postContainer = menu.closest('.post-wrapper') || menu.closest('.post') || document;
    var titleEl = postContainer.querySelector('.post-title');
    var linkEl = postContainer.querySelector('.post-title a') || postContainer.querySelector('a[href*=".html"]');

    // 3. Obtenemos título y URL limpios
    var title = titleEl ? titleEl.innerText.trim() : document.title;
    // Si linkEl no existe (común cuando estás dentro de la entrada individual), usamos la URL actual
    var url = linkEl ? linkEl.href : window.location.href;

    // 4. Armamos el enlace de la API universal de WhatsApp con codificación segura
    var waLink = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(title + ' - ' + url);

    // 5. Fabricamos el elemento de lista respetando las clases y estructura nativa del tema
    var li = document.createElement('li');
    li.className = 'sharing-whatsapp-item';
    li.innerHTML = '<a class="sharing-platform-button" href="' + waLink + '" target="_blank" rel="noopener noreferrer" role="menuitem" tabindex="-1">' +
      '<svg class="touch-icon" style="position: absolute; top: 12px; left: 16px; width: 24px; height: 24px; fill: #25D366;" viewBox="0 0 24 24">' +
        '<path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.04 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M9.53 7.03C9.34 7.03 9.04 7.1 8.79 7.37C8.54 7.65 7.83 8.31 7.83 9.66C7.83 11.01 8.81 12.31 8.95 12.5C9.09 12.69 11.02 15.66 13.97 16.94C14.67 17.24 15.22 17.42 15.64 17.56C16.35 17.78 17 17.75 17.5 17.68C18.07 17.59 19.26 16.96 19.5 16.27C19.76 15.58 19.76 15 19.68 14.88C19.6 14.75 19.42 14.68 19.14 14.54C18.86 14.4 17.5 13.73 17.25 13.64C17 13.54 16.84 13.5 16.68 13.73C16.51 13.97 16.05 14.54 15.91 14.68C15.77 14.83 15.63 14.85 15.35 14.71C15.07 14.57 14.17 14.27 13.1 13.32C12.27 12.58 11.71 11.67 11.57 11.43C11.43 11.29 11.56 11.21 11.7 11.07C11.83 10.94 11.98 10.74 12.12 10.58C12.26 10.42 12.31 10.3 12.4 10.12C12.5 9.93 12.45 9.77 12.38 9.63C12.31 9.5 11.76 8.16 11.53 7.61C11.31 7.07 11.09 7.15 10.92 7.14C10.76 7.14 10.58 7.13 10.39 7.13C10.2 7.13 9.9 7.2 9.65 7.47C9.4 7.74 8.7 8.4 8.7 9.75C8.7 11.1 9.68 12.4 9.82 12.59L9.53 7.03Z"/>' +
      '</svg>' +
      '<span class="platform-sharing-text">WhatsApp</span>' +
    '</a>';

    // 6. Insertamos la opción al final de la lista de compartir
    menu.appendChild(li);
  });
}

// Ejecutamos en cuanto cargue el DOM
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', agregarWhatsAppCompartir);
} else {
  agregarWhatsAppCompartir();
}
//]]>
</script>

4. El detalle fino: El secreto de las dos barras laterales en Blogger 🕵️‍♂️📐

Aquí es donde está el truco que casi nadie te cuenta y por el cual mucha gente cree que los gadgets no funcionan.

Si vas al panel de Diseño de tu blog, pegas el gadget en la barra lateral y te vas a probarlo, notarás algo curioso:

• En la página principal (portada): ¡Funciona de maravilla! Le picas al icono de compartir de cualquier tarjeta y sale WhatsApp listo para mandar.
• En la entrada individual (artículo completo): ¡Desaparece por completo! 😱

¿Por qué pasa esta rareza?

En plantillas modernas de Blogger como Emporio o Soho, Google programó dos barras laterales totalmente independientes:

1. Barra lateral (sidebar_feed): Es la barra lateral que se muestra cuando la gente está en la portada, en categorías o en archivos del blog.
2. Barra lateral de página de entrada (sidebar_item): Es una sección secundaria que la plantilla activa únicamente cuando el lector le da clic a un post y entra a leerlo en su propia URL (.html).

Si pones el gadget nada más en la primera barra, en el momento en que alguien entra a ver una foto o artículo específico, Blogger simplemente no carga esa barra lateral y, por lo tanto, el script no se ejecuta.

¿La solución? Poner el gadget en ambas secciones de diseño. Así de sencillo 🎯.

5. Guía de Instalación Paso a Paso (Para no errarle) 🛠️📋

Sigue estos pasos al pie de la letra desde el panel de control de Blogger:

Paso 1: Ir al Diseñador

Entra a tu cuenta de Blogger y en el menú lateral izquierdo selecciona la opción Diseño.

Paso 2: Agregar el Gadget para la Portada

1. Localiza el bloque llamado Barra lateral (o Sidebar).
2. Haz clic en el enlace que dice Añadir un gadget (+).
3. En la lista emergente que te aparece, busca y selecciona HTML/Javascript.
4. IMPORTANTE: Deja el campo Título completamente en blanco. Si le pones título, se va a ver una caja de texto vacía en tu blog. Al dejarlo vacío, el gadget es 100% invisible para los visitantes.
5. En el cuadro grande de Contenido, pega todo el código que te dejé arriba en la sección 3.
6. Haz clic en Guardar.

Paso 3: Agregar el Gadget para las Entradas Individuales

1. En esa misma pantalla de Diseño, desplázate más abajo hasta encontrar otra caja llamada Sidebar (Item Page) o Barra lateral (Página de entrada).
2. Haz clic en Añadir un gadget dentro de esa sección.
3. Elige nuevamente HTML/Javascript.
4. Vuelve a dejar el campo Título en blanco.
5. Pega exactamente el mismo código en el campo Contenido.
6. Haz clic en Guardar.

Paso 4: Guardar cambios generales

No se te vaya a olvidar este paso fundamental: en la esquina inferior derecha de la pantalla de Diseño de Blogger hay un botón circular con el icono de un disquete (Guardar). Dale clic para que se consoliden los cambios en tu plantilla.

¡Y listo el pollo! Abre tu blog en una pestaña nueva, prueba abrir el menú de compartir en la portada y luego entra a cualquier artículo para verificarlo. En ambos lugares verás la opción de WhatsApp perfectamente integrada con su icono verde brillante 🎉📱.

6. ¿Por qué esta solución es mil veces mejor que editar el XML? 📊⚖️

Si todavía te queda alguna duda de por qué este método por Gadget es la opción más inteligente para cualquier bloguero, aquí te dejo una comparativa directa:

7. Consejos Pro para que tus publicaciones se compartan con ganas 📸🔥

Ya que tienes el botón funcionando como relojito suizo, aquí van un par de recomendaciones técnicas para que cuando tus lectores manden el enlace por WhatsApp, la vista previa se vea profesional y llamativa:

1. Cuida la resolución de tus imágenes en Blogger

Blogger tiene la fea costumbre de comprimir las fotos agregando códigos de tamaño en las URLs (/s320/, /s640/). Cuando redactes tu entrada, asegúrate de que la foto principal esté configurada en tamaño “Original” o “Muy grande”. En el código HTML de la entrada, la URL de la imagen debería tener el fragmento /s1600/ o /s0/. Esto garantiza que WhatsApp jale una miniatura con nitidez impecable.

2. Formato liviano (WebP o JPG comprimido)

No subas imágenes crudas de 10 o 15 Megabytes directo de la cámara. Pásalas antes por un optimizador web o conviértelas a formato WebP. WhatsApp tiene un tiempo límite para generar la tarjeta de vista previa; si tu página o la imagen tardan una eternidad en responder, el chat de WhatsApp se rinde y solo mandará el texto plano sin la foto miniatura.

3. Títulos atractivos y directos

El script está programado para enviar el título de la publicación seguido de un guion y la URL limpia. Pon títulos descriptivos que despierten la curiosidad de quien recibe el mensaje en su teléfono (por ejemplo: “📸 Atardecer en el malecón de Topolobampo – Capturado con Pixel” en lugar de “Foto 0023”).

8. Preguntas Frecuentes de la Plebada (FAQ) ❓🤠

¿Funciona si la persona navega desde una computadora?

¡Claro que sí! Si el usuario está leyendo tu blog en una PC o laptop y le da clic a WhatsApp, el enlace universal lo mandará directo a la interfaz de WhatsApp Web con el mensaje precargado, listo para que elija a qué contacto o grupo mandárselo.

¿Se puede cambiar el texto o ponerle un emoji al botón?

Por supuesto. Si quieres que diga “Compartir en WhatsApp” o ponerle un icono coqueto, solo localiza esta línea dentro del script:

JavaScript

'<span class="platform-sharing-text">WhatsApp</span>'

Y cámbiala por:

JavaScript

'<span class="platform-sharing-text">WhatsApp 💬</span>'

¿Por qué mi botón aparece blanco y no completamente verde?

El botón se diseñó para mimetizarse al 100% con la estética nativa de Blogger. Los botones originales de Facebook, X y Pinterest tienen fondo claro y texto oscuro; lo que resalta es el icono de color. Nuestro botón hace exactamente lo mismo: mantiene la uniformidad visual del menú desplegable y pinta el icono oficial en verde WhatsApp (#25D366). Si quieres que todo el fondo del botón sea verde, tendrías que forzarle un estilo background-color por CSS, pero visualmente queda mucho más elegante adaptado al tema.

9. Conclusión y Checklist de Salida ✅🏁

A veces nos quebramos la cabeza intentando modificar archivos de sistema o peleándonos con código complejo, cuando la solución más elegante y efectiva está al alcance de un par de clics en las herramientas que la misma plataforma ya nos da. Con este truco de los gadgets, esquivaste el error de AdSense, protegiste la integridad de tu plantilla y le diste a tus visitantes la herramienta que más van a usar para mover tu contenido.

Antes de dar el trabajo por terminado, repasa esta lista rápida:

1. ¿Creaste el Gadget en la Barra lateral principal?
2. ¿Creaste el Gadget en la Barra lateral (Item Page) para las entradas individuales?
3. ¿Dejaste el título vacío en ambos gadgets para que no aparezcan cajas feas en el diseño?
4. ¿Le diste clic al botón de Guardar cambios abajo a la derecha en la sección Diseño?
5. ¿Entraste desde tu celular a mandar una foto a un chat de prueba para verificar que el mensaje se arme al tiro?

¡Fierro por la 300! Ya tienes tu blog de fotos y contenidos perfectamente conectado a WhatsApp, sin enredos técnicos y listo para que la raza empiece a rolar tus publicaciones por todos lados 🚀🤠.