WhatsApp y Telegram en Monarch: cómo añadirlos

En este tutorial te enseñamos (finalmente) a colocar el botón de WhatsApp y Telegram en el plugin para compartir en redes sociales Monarch.

En este videotutorial, te daremos el pequeño snippet que te permitirá colocar los botones de WhatsApp y Telegram en Monarch de manera sencilla ¡Vamos a ello!

Mira el resultado:

El plugin Monarch de Elegant Themes es una herramienta para compartir contenido muy potente, y como lo comentábamos anteriormente, uno de los grandes problemas de este plugin es que no tiene un botón nativo para compartir contenido en WhatsApp o Telegram, que en la actualidad son las dos redes de mensajería por excelencia que existen.

Bueno, pues eso es lo que intentaremos solucionar en este tutorial. Lo que haremos será insertar un pequeño Snippet php que nos ayudará a generar esta funcionalidad.

Puedes obtener Monarch gratis si compras el tema Divi, o también en nuestro tutorial donde te enseñamos a usar este plugin. Con Monarch puedes integrar atractivos botones de Social Sharing y Social Follow y no solo con el tema Divi, sino con cualquier tema de WordPress.

Por qué WhatsApp y Telegram son esenciales para compartir contenido

Si tienes una audiencia en América Latina, esto es algo que probablemente ya sabes: WhatsApp no es solo una app de mensajería, es la plataforma de comunicación dominante. En varios países de la región supera el 90% de penetración entre usuarios de smartphones. Las personas lo usan para todo: desde coordinar con amigos y familia hasta compartir noticias, artículos, tutoriales, videos y prácticamente cualquier tipo de contenido.

Telegram, por su parte, ha tenido un crecimiento acelerado en los últimos años. Sus grupos y canales lo convierten en una plataforma ideal para comunidades de contenido. Si tienes un blog técnico —como los de Divi, WordPress o diseño web— es muy probable que una parte de tu audiencia ya esté en Telegram y comparta recursos por ahí. Ignorar estas dos plataformas cuando configuras los botones de compartir en tu sitio es dejar dinero sobre la mesa.

Ahora bien, ¿por qué es importante tener estos botones en el blog y no solo en redes sociales convencionales? La respuesta está en el contexto de la conversación. Cuando alguien comparte un artículo en Facebook o Twitter, lo publica en su perfil o timeline y el alcance depende del algoritmo. Cuando lo comparte por WhatsApp o Telegram, lo envía directamente a personas o grupos con las que tiene una relación real. El resultado es una tasa de clics mucho mayor y una audiencia más relevante: son personas que el remitente conoce y consideró que ese contenido les serviría.

El problema es que Monarch, históricamente, ha priorizado las redes sociales "clásicas": Facebook, Twitter, Pinterest, LinkedIn, Reddit. Mensajería quedó fuera del roadmap por mucho tiempo. Ese es exactamente el hueco que soluciona el snippet que veremos en este tutorial: con unas pocas líneas de JavaScript, puedes agregar estos dos botones a tu barra de compartir de Monarch sin tocar el código del plugin.

Configuremos las redes sociales en Monarch

Antes de colocar el snippet que nos permitirá crear el botón para compartir en WhatsApp y Telegram, debemos configurar al menos una red social más, por ejemplo Facebook o Twitter. Ve desde el Panel de WordPress a Herramientas > Configuración de Monarch:

Luego, vamos a configurar las redes sociales en las que queramos que se comparta el contenido. En este caso te recomiendo que sean pocas para que se vea estético, no más de 2 o 3 redes sociales.

Es importante que sepas que estos botones tomarán los estilos que vienen por defecto con Monarch, por lo que si cambias los estilos de los botones a "custom" no se verán totalmente bien (en el video mostramos el ejemplo).

Colocar Snippet para generar botones de WhatsApp y Telegram en Monarch

Para generar el Snippet que crea estos botones puedes hacerlo desde la página original del autor: https://www.wpressdoctor.com/monarch/

O copiarlo directamente desde acá abajo:

<script>
/**** Adding WhatsApp and Telegram to Monarch
 * Brought to you enterly free by the WPress Doctor on YouTube!
 * Please like the video about Monarch:
 * Have a awesome day and I see you in the next video! *****/
jQuery(document).ready(function () {
    const monarchNetworkContainer = jQuery(".et_social_icons_container");
    if (monarchNetworkContainer.length) {
        const currentUrl = window.location.href;
        jQuery(monarchNetworkContainer).append(`
                <li class="et_social_whatsapp" style="background: #4dc859;">
                  <a href="https://wa.me/?text=` + currentUrl + `" class="et_social_share" rel="nofollow" data-social_name="whatsapp" data-social_type="share" data-location="sidebar">
                    <i class="et_social_icon et_social_icon_whatsapp" style="display: flex; align-items: center;">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="100%" height="20" version="1.1" viewBox="0 0 175.22 175.55" xmlns="http://www.w3.org/2000/svg"><path d="m54.532 138.45 2.2352 1.3243c9.3872 5.5714 20.15 8.5177 31.126 8.5232h0.0234c33.707 0 61.139-27.426 61.153-61.135 6e-3 -16.335-6.3486-31.696-17.895-43.251-11.547-11.555-26.899-17.921-43.235-17.928-33.733 0-61.166 27.423-61.178 61.13-5e-3 11.551 3.2274 22.801 9.3486 32.535l1.4552 2.3124-6.1791 22.558zm-40.811 23.544 10.439-38.114c-6.4382-11.154-9.8254-23.808-9.8213-36.772 0.0165-40.556 33.021-73.55 73.578-73.55 19.681 0.0096 38.154 7.6688 52.047 21.572 13.889 13.903 21.537 32.383 21.53 52.037-0.0179 40.553-33.027 73.553-73.578 73.553h-0.0317c-12.313-5e-3 -24.412-3.0937-35.159-8.9545z" fill="#b3b3b3"/><path d="m87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13-5e-3 11.551 3.2275 22.801 9.3488 32.535l1.4552 2.312-6.1795 22.559 23.146-6.0689 2.235 1.324c9.3872 5.5714 20.15 8.518 31.126 8.5235h0.0233c33.707 0 61.14-27.426 61.153-61.135 6e-3 -16.335-6.3484-31.696-17.895-43.251-11.547-11.555-26.899-17.922-43.235-17.929z" fill="#fff"/><path d="m68.772 55.603c-1.378-3.0606-2.8277-3.1226-4.1369-3.1764-1.0721-0.04548-2.2986-0.04272-3.5236-0.04272-1.2264 0-3.2177 0.46026-4.9017 2.2999-1.6853 1.8397-6.4354 6.2866-6.4354 15.332 0 9.0454 6.5884 17.785 7.5062 19.013 0.91916 1.2265 12.718 20.381 31.405 27.75 15.529 6.124 18.689 4.9058 22.061 4.5999 3.3707-0.30592 10.877-4.4469 12.408-8.7395 1.5324-4.2926 1.5324-7.9706 1.0735-8.7395-0.46026-0.76757-1.6853-1.2264-3.525-2.1456-1.8383-0.91915-10.877-5.3675-12.562-5.9807-1.6853-0.61322-2.9104-0.91915-4.1369 0.92053-1.2251 1.8397-4.746 5.9793-5.8195 7.2058-1.0721 1.2278-2.1442 1.3808-3.9839 0.46164-1.8383-0.92191-7.7597-2.8608-14.784-9.124-5.4653-4.8727-9.1543-10.891-10.228-12.73-1.0721-1.8397-0.11438-2.8346 0.80753-3.751 0.82544-0.82407 1.8383-2.147 2.7588-3.2205 0.9164-1.0735 1.2237-1.8397 1.8356-3.0648 0.61323-1.2278 0.3073-2.3013-0.15296-3.2205-0.45889-0.91915-4.0321-10.011-5.6665-13.647" fill="#fff" fill-rule="evenodd"/>
                        </svg>
                    </i>
                    <div class="et_social_network_label">
                        <div class="et_social_networkname">WhatsApp</div>
                    </div>
                    <span class="et_social_overlay"></span>
                  </a>
               </li>
               <li class="et_social_telegram" style="background: #61a8de;">
                 <a href="https://t.me/share/url?url=` + currentUrl + `" class="et_social_share" rel="nofollow" data-social_name="telegram" data-social_type="share" data-location="sidebar">
                   <i class="et_social_icon et_social_icon_telegram" style="display: flex; align-items: center;">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 455.731 455.731" width="100%" height="27"><path fill="#61a8de" d="M0 0h455.731v455.731H0z"/><path d="M358.844 100.6 54.091 219.359c-9.871 3.847-9.273 18.012.888 21.012l77.441 22.868 28.901 91.706c3.019 9.579 15.158 12.483 22.185 5.308l40.039-40.882 78.56 57.665c9.614 7.057 23.306 1.814 25.747-9.859l52.031-248.76c2.548-12.185-9.44-22.337-21.039-17.817zm-38.208 55.206L179.08 280.984a7.6027 7.6027 0 0 0-2.519 4.847l-5.45 48.448c-.178 1.58-2.389 1.789-2.861.271l-22.423-72.253c-1.027-3.308.312-6.892 3.255-8.717l167.163-103.676c3.844-2.386 7.78 2.906 4.391 5.902z" fill="#fff"/></svg>
                   </i>
                   <div class="et_social_network_label">
                     <div class="et_social_networkname">Telegram</div>
                   </div>
                   <span class="et_social_overlay"></span>
                 </a>
               </li>
`);
}
});
/**** Brought to you enterly free by the WPress Doctor on YouTube! Enjoy! *****/
</script>
<style>
                   .et_social_sidebar_networks .et_social_telegram a {
                        padding: 10px 0 !important;
                   }
</style>

Una vez que lo copiemos lo vamos a pegar en Divi > Opciones del Tema > Integración > Cabecera del Head y le damos guardar.

Cómo dar estilo personalizado a los botones de WhatsApp y Telegram

Una vez que tienes el snippet funcionando, puede que quieras afinar el aspecto visual de los botones. El snippet inyecta los elementos de lista directamente en el contenedor de Monarch con los mismos estilos que el plugin aplica a sus redes nativas, así que en la mayoría de los casos el resultado es consistente. Si tienes Monarch configurado con botones rectangulares, los botones de WhatsApp y Telegram también se verán rectangulares. Si tu configuración usa botones circulares, igualmente se adaptarán.

Sin embargo, hay situaciones donde el espaciado interno no queda del todo bien, especialmente cuando los iconos SVG tienen proporciones distintas a los iconos de fuente que usa Monarch internamente. En esos casos, un pequeño ajuste de padding resuelve el problema sin tocar el snippet original:

.et_social_whatsapp a,
.et_social_telegram a {
    padding: 10px 15px !important;
}

Ese snippet va en Divi > Opciones del Tema > CSS personalizado, o en el archivo style.css de tu child theme si trabajas con uno.

Ahora bien, hay un caso especial que vale la pena mencionar: si tienes Monarch configurado en modo "custom" con colores personalizados para tus botones, los botones de WhatsApp y Telegram no heredarán esos colores automáticamente. Eso es porque Monarch aplica los colores personalizados solo a las redes que reconoce como nativas en su código fuente, y nuestros botones los estamos inyectando con JavaScript. El color inline que ves en el snippet (el verde de WhatsApp y el azul de Telegram) es el color que se usará por defecto.

Si quieres que esos botones respeten la paleta de tu marca en lugar de usar los colores corporativos de cada app, puedes sobreescribirlos con CSS así:

.et_social_whatsapp { background: #25D366 !important; }
.et_social_telegram { background: #0088cc !important; }

Reemplaza los valores hexadecimales por los colores de tu marca y listo. Si prefieres que los botones no tengan color de fondo propio y hereden el diseño general de Monarch, puedes setear background: transparent !important y manejar el estilo completamente desde el CSS global del plugin.

Consejo: antes de modificar los colores, activa el modo de inspección del navegador (F12) y verifica qué clase CSS específica está aplicando el color al contenedor de cada red en tu configuración actual de Monarch. Los selectores pueden variar dependiendo del estilo de botón que tengas activo (flat, raised, framed, etc.), así que es mejor verificar que adivinar.

¿Qué sucede si al compartir en WhatsApp da error?

Gracias a nuestro alumno Freddy Esparragoza hemos descubierto un posible error que genera WhatsApp al compartir con el botón, y se da usando el código actual. El error indica que "el número es demasiado corto"

Vale para resolver esto, debemos cambiar una variable dentro del código anterior:

En la línea 12 de script que comienza con: "<a href="https://wa.me/send?text=` + currentUrl +" debes eliminar la palabra "send" quedando la nueva variable así: "<a href="https://wa.me/?text=` + currentUrl +" con esto, el problema se elimina y el botón de compartir en redes sociales volverá a funcionar correctamente.

Consejo: el snippet que encontrarás en este tutorial ya tiene la URL corregida (wa.me/?text= sin el "send"), así que si lo copias desde acá no necesitas hacer ningún ajuste. La corrección fue validada por nuestra comunidad y funciona en WhatsApp Web, WhatsApp para iOS y WhatsApp para Android sin generar el error del número.

Avisanos si te pasa el problema y lograste resolverlo con esta solución.

¡Y listo! Con eso tendremos los botones de compartir en WhatsApp y Telegram totalmente integrado con nuestro plugin Monarch.

¡Si te ha gustado este contenido no olvides compartir!

Conclusión

Este snippet resuelve una limitación concreta de Monarch que la mayoría de usuarios en América Latina necesitan, y lo hace sin modificar el plugin ni instalar nada adicional. Con unas pocas líneas de JavaScript tienes WhatsApp y Telegram funcionando exactamente igual que cualquier otra red en tu barra de compartir.

La clave de por qué funciona es simple: el snippet detecta el contenedor de íconos de Monarch (.et_social_icons_container) en el DOM y le inyecta dos elementos <li> con la misma estructura HTML que Monarch usa para sus redes nativas. Los botones generados toman la URL de la página actual en tiempo real, así que si alguien presiona el botón desde cualquier artículo de tu blog, el enlace que se comparte siempre será el correcto. No hay configuración especial, no hay rutas hardcodeadas.

Lo que sí vale la pena recordar es que los botones se renderizan en el cliente (JavaScript), por lo que en sitios con JavaScript desactivado o en entornos muy restrictivos podrían no aparecer. Para el 99% de los casos reales esto no es un problema, pero es bueno tenerlo en mente si alguien reporta que no los ve.

🎓 ¿Quieres sacarle todo el provecho a Monarch? Explora Monarch a fondo antes de implementar este snippet — entender bien cómo configuras las ubicaciones (sidebar, in-line, pop-up) cambia totalmente la experiencia de compartir. En ese tutorial cubrimos desde la instalación hasta las configuraciones avanzadas de seguimiento social.