Shortcode para botones de compartir en Monarch

En este video tutorial, te daremos el pequeño snippet que te permitirá colocar los botones de compartir en redes sociales de Monarch donde quieras, a través de un shortcode. Muy útil especialmente si estás usando el Theme Builder ¡Vamos a ello!

El plugin Monarch de Elegant Themes es una herramienta para compartir contenido muy potente, y a pesar de que no tiene (aún) la opción para compartir contenido directamente en WhatsApp, sigue siendo de momento mi plugin preferido para compartir contenido en redes sociales.

Con Monarch puedes colocar botones de Social Sharing o Social Follow en casi todas partes del sitio web. Además, los botones son muy atractivos y se pueden personalizar con (casi) cualquier diseño. Desafortunadamente, aún no hay una forma nativa para colocar los botones de compartir solo en ciertas páginas, publicaciones o diseños de layout del theme builder a través de un shortcode, bueno, es lo que resolveremos en este tutorial.

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.

Primero configuramos Monarch

Antes de crear el Shortcode, debemos configurar el plugin Monarch para que éste funcione. 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 4 redes sociales.

Aquí tenemos que hacer la configuración más importante para que el Shortcode de compartir en redes sociales solo se muestre dónde lo colocamos. Debes eliminar todas las casillas de verificación de las ubicaciones de compartir in-line y guarda los cambios.

Crear shortcode para compartir en Monarch

Para crear un shortcode que nos permita colocar los botones de compartir en redes sociales donde queramos, debemos añadir una nueva función a nuestro sitio.

Esto lo podemos hacer de varias maneras, la primera es haciéndolo a través de la hoja functions.php que tengamos en un Child theme que hayamos creado para Divi.

La segunda es que lo hagamos a través del plugin Code Snippets (mi opción favorita) donde crearemos la función y estará segura. En el video tutorial elegimos esta segunda opción.

Vamos a nuestro plugin Code Snippets y creamos un nuevo fragmento de código personalizado. Lo podemos titular "Shortcode Monarch", una vez creemos el fragmento vamos a insertar el siguiente snippet para que genere la función del shortcode:

function monarchShortcode(){
$monarch = $GLOBALS['et_monarch'];
$monarch_options = $monarch->monarch_options;
return $monarch->generate_inline_icons('et_social_inline_custom');
}
add_shortcode('et_social_share_custom', 'monarchShortcode');

Una vez que lo coloquemos le damos guardar, ¡y listo!

¿Cómo usamos el shortcode para Monarch?

Una vez creada la función, lo único que nos resta es elegir el lugar donde queramos colocar nuestro código corto y probarlo. Por ejemplo, si queremos insertarlo en un layout de producto con el theme builder, basta con ir a la plantilla respectiva, crear un módulo de código o de texto y dentro de él colocar el siguiente shortcode:

[et_social_share_custom]

¡Y listo! Con eso tendremos los botones de compartir en redes sociales donde queramos y como lo queramos. A partir de aquí es solo cuestión de modificar los estilos de los botones a nuestro gusto desde las opciones de Monarch y con eso tendríamos el excelente resultado.

Por qué Monarch no trae un shortcode nativo (y cómo lo resolvemos)

Una pregunta que me hacen seguido es por qué un plugin tan completo como Monarch no ofrece esto de forma nativa. La respuesta tiene que ver con cómo fue concebido originalmente el plugin: Monarch está diseñado para mostrarse en ubicaciones fijas y predefinidas del sitio, como inline antes o después del contenido, en un popup, en un flyout lateral, o como barra flotante. Esa es su arquitectura base.

El problema surge cuando quieres más control, especialmente en layouts personalizados del Theme Builder. Si tienes un template de entrada de blog creado con el Theme Builder de Divi, las "ubicaciones" predefinidas de Monarch pueden quedar mal posicionadas o mostrase en lugares que no son los ideales para tu diseño. El shortcode personalizado resuelve exactamente eso: te devuelve el control sobre dónde aparecen los botones.

El snippet que usamos llama directamente al método generate_inline_icons() del objeto global de Monarch con el tipo et_social_inline_custom. Esto le dice al plugin que genere los botones de sharing sin atarlos a ninguna ubicación automática. La función resultante queda registrada como un shortcode con el tag [et_social_share_custom], que puedes insertar en cualquier módulo de texto o código de Divi.

Consejo: Si usas Code Snippets, activa el snippet solo en el frontend (opción "Only run on site frontend") para evitar que cargue en el panel de administración de WordPress donde no tiene ningún efecto útil.

Casos de uso avanzados del shortcode de Monarch

El shortcode básico que vimos es el punto de partida, pero a partir de ahí puedes construir soluciones mucho más específicas dependiendo de lo que necesitas en tu sitio.

Uno de los casos más frecuentes es querer mostrar los botones de compartir solo en un tipo de contenido específico. Por ejemplo, solo en entradas del blog pero no en páginas de producto. Para lograr esto puedes agregar una condicional dentro de la función del shortcode que verifique el tipo de post actual antes de renderizar los botones.

Otro caso de uso muy solicitado es mostrar los botones en una posición fija dentro de las entradas, como al final del contenido, justo antes de la sección de comentarios. Si usas el Theme Builder de Divi para controlar el template de tus entradas, puedes colocar el módulo de texto con el shortcode exactamente donde necesitas dentro de ese template, con el espaciado y el contexto visual que quieras.

También puedes usar el shortcode dentro de los módulos de código de Divi para envolverlo en HTML personalizado. Por ejemplo, puedes crear un contenedor con un título "¿Te gustó este artículo? Compártelo:" y debajo poner el shortcode. Eso le da contexto visual a los botones y mejora la tasa de clics, porque el usuario entiende qué acción se espera de él.

Consejo: Limita las redes sociales a un máximo de 4 en la configuración de Monarch. Más de eso genera sobrecarga visual y reduce los clics totales — paradójicamente, menos opciones producen más conversiones porque no paraliza al usuario con la elección.

Configurar el estilo de los botones en Monarch

Una vez que tienes el shortcode funcionando correctamente, el siguiente paso natural es asegurarte de que los botones se vean bien con el diseño de tu sitio. Monarch ofrece bastante flexibilidad en cuanto a estilos y vale la pena invertir unos minutos en ajustarlo correctamente.

Desde la configuración de Monarch puedes elegir entre varios shapes (forma de los botones): rectangulares, redondeados, circulares o sin forma, solo el ícono. Para la mayoría de sitios modernos te recomiendo los botones redondeados o el estilo de solo íconos, que es el más limpio y no pelea visualmente con el resto del diseño.

En cuanto a los colores, Monarch tiene dos modos: el modo que usa los colores oficiales de cada red social, y el modo de color personalizado donde defines tú el color de fondo. Para sitios con una identidad de marca muy definida el segundo modo funciona mejor porque mantiene la coherencia cromática. Para sitios donde el contenido es más informal o variado, los colores oficiales de cada red funcionan bien porque son inmediatamente reconocibles para el usuario.

El tamaño de los botones también es ajustable. Para móvil es especialmente importante que los botones tengan un tamaño suficiente para ser tocados con el dedo sin dificultad, al menos 44px de área táctil según las guías de usabilidad móvil. Monarch maneja esto automáticamente en su mayoría, pero si notas que los botones quedan muy pequeños en dispositivos pequeños, puedes agregarles padding extra con CSS personalizado.

La configuración de ubicaciones: por qué desactivar las automáticas

En el tutorial vimos que uno de los pasos obligatorios es desactivar todas las ubicaciones de compartir in-line en la configuración de Monarch. Este paso es crítico y merece una explicación más detallada para que entiendas por qué es necesario.

Cuando Monarch tiene ubicaciones automáticas activas (por ejemplo, "mostrar antes del contenido" o "mostrar después del contenido"), el plugin inyecta los botones en esas posiciones en todas las páginas que coincidan con las condiciones que configuraste. Si además usas el shortcode, terminarías con los botones apareciendo dos veces en la misma página: una vez donde Monarch los pone automáticamente, y otra vez donde tú pusiste el shortcode.

Al desactivar todas las ubicaciones automáticas le dices a Monarch que solo muestre los botones donde tú explícitamente los coloques con el shortcode. Esto te da control total y elimina cualquier duplicación no deseada. La única excepción serían los botones de tipo "floating" o "popup", que no son in-line y no interfieren con el shortcode.

🎓 Si quieres dominar Divi y los plugins del ecosistema de Elegant Themes a fondo, explora los cursos en uxdivi.com/cursos/ donde tienes tutoriales desde nivel básico hasta técnicas avanzadas de Theme Builder.

Conclusión

Crear un shortcode personalizado para los botones de compartir de Monarch es una de esas soluciones pequeñas que abren un abanico enorme de posibilidades. Con apenas cinco líneas de código PHP tienes control total sobre dónde aparecen los botones en tu sitio, independientemente de las limitaciones de las ubicaciones automáticas que ofrece el plugin por defecto.

Lo mejor de este enfoque es que funciona perfectamente con el Theme Builder de Divi. Puedes colocar los botones de compartir exactamente donde necesitas dentro de cualquier template, con el diseño y el contexto visual que quieras. Eso es algo que no puedes lograr con las opciones nativas de Monarch sin este snippet.

Si tienes alguna duda sobre la implementación o encontraste algún comportamiento inesperado con tu versión de Monarch, déjame un comentario aquí abajo. Y si este tutorial te fue útil, no olvides compartirlo — siempre es bienvenido el apoyo para seguir creando contenido gratuito.

🎓 ¿Quieres ir más lejos con el Theme Builder de Divi y los plugins de Elegant Themes? En uxdivi.com/cursos/ encontrarás cursos completos para dominar cada herramienta del ecosistema Divi.