Colocar botón de WhatsApp y Telegram en Monarch plugin

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:

Índice

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.

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/send?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" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="b" x="-.057343" y="-.057087" width="1.1147" height="1.1142" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="3.5306992"/></filter><linearGradient id="a" x1="85.915" x2="86.535" y1="32.567" y2="137.09" gradientTransform="translate(-4.0156e-7)" gradientUnits="userSpaceOnUse"><stop stop-color="#57d163" offset="0"/><stop stop-color="#23b33a" offset="1"/></linearGradient></defs><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.553-3e-3 0 3e-3 0 0 0h-0.0317c-12.313-5e-3 -24.412-3.0937-35.159-8.9545z" fill="#b3b3b3" filter="url(#b)"/><path d="m12.966 161.24 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.553-3e-3 0 3e-3 0 0 0h-0.0317c-12.313-5e-3 -24.412-3.0937-35.159-8.9545z" fill="#fff"/><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="url(#linearGradient1780)" stroke-width=".35278"/><metadata><rdf:RDF><cc:Work rdf:about=""><dc:title/><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><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.3125-6.1795 22.558 23.146-6.0689 2.235 1.3245c9.3872 5.5714 20.15 8.5175 31.126 8.523h0.02326c33.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.921-43.235-17.928z" fill="url(#a)" stop-color="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".51493"/><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" xml:space="preserve"><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! 
 * Please like the video about Monarch: 
 * Have a awesome day and I see you in the next video! *****/
</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.

¿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.

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!