Cómo añadir botones para compartir en Webflow (o en cualquier sitio) con ShareThis y Google Tag Manager, usando tus OG tags y mostrándolos solo en las publicaciones del blog.
Para esta publicación vas a necesitar Google Tag Manager instalado en tu sitio o proyecto de Webflow. Puedes encontrar el tutorial para Webflow aquí, y si todavía no tienes claro si vale la pena, aquí te contamos por qué usamos Google Tag Manager en Webflow. También necesitarás una cuenta de ShareThis, que puedes crear gratis aquí. Vamos a configurarlo para las publicaciones del blog de nuestro proyecto de Webflow, pero sirve para cualquier página de tu sitio o para páginas de producto en un ecommerce, y no se limita a Webflow: mientras tengas Tag Manager instalado, estás listo. Más adelante también publicaremos un artículo más detallado sobre cómo instalar botones para compartir con campos dinámicos de colecciones CMS de Webflow y con fragmentos nativos para compartir en redes sociales, pero esto es bastante rápido y sencillo, así que disfrútalo.
Paso 1: Configura ShareThis y Tag Manager
Empieza añadiendo el dominio que vas a usar.
Pulsa Activate Code y copia el fragmento de código.
Ve a tu contenedor de Tag Manager y crea una nueva etiqueta (Tag). Ponle un nombre, selecciona Custom HTML y pega el fragmento.
Tag Manager
Como activador (Trigger), selecciona All Pages. Nosotros usamos el activador Fully Loaded, que dispara la etiqueta cuando todo se ha cargado en la página, lo que da una mejor experiencia al usuario y mejora tus resultados de PageSpeed para Google. Si quieres seguir ese camino, aquí tienes una publicación sobre cómo configurarlo, pero All Pages funciona bien si eso no te preocupa.
Ahora guarda la etiqueta, pulsa Submit y publica el contenedor (Publish).
Vuelve a ShareThis y pulsa Activate.
Si aparece una advertencia de que el código no está en el head, ignórala y continúa.
Ve al directorio de aplicaciones (Apps Directory).
Vamos a añadir botones para compartir fijos (Sticky Share Buttons), pero puedes elegir los que prefieras.
Pulsa Enable tool y, si aparece una advertencia, ignórala también.
Elige tus redes sociales, la alineación y cualquier otra opción que quieras personalizar, y pulsa update.
Dale a ShareThis unos minutos para hacer lo suyo y deberías ver tus botones para compartir:
Todo esto está muy bien, pero espera, dirás: tú dijiste que sería en mi blog y ahora aparece por todo mi sitio.
Paso 2: Define en qué páginas mostrar los botones para compartir
Hagamos que se muestren solo en las páginas de las publicaciones del blog.
Abre Tag Manager. Si no vas a usar el activador Fully Loaded, sigue el Paso 2A; si usas el activador Fully Loaded, sigue el Paso 2B.
Paso 2A: Crea un activador para las publicaciones del blog
Abre la etiqueta, quita el activador pulsando el signo menos y crea uno nuevo.
Ponle un nombre al activador y selecciona Page View como tipo de activador.
Antes de continuar, mira la estructura de la URL de tus publicaciones. Nuestras publicaciones están en la colección CMS Post y todos sus slugs empiezan por /post/, porque esa es la "carpeta" de la colección del blog.
<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity
Esto nos lo pone bastante fácil: todas las publicaciones contienen /post/ y por tanto podemos crear un activador para eso. Tú solo tienes que usar la estructura que tengas.
Así que, en el activador, selecciona Some Page Views, luego Page URL en el desplegable, luego Contains, y después la parte del slug de tu blog que vayas a usar; en nuestro caso es /post/
Asegúrate de tener seleccionado el nuevo activador y de haber quitado el anterior. Guarda, pulsa Submit, publica y listo. Pero ¿qué está pasando?
Pues que cada vez que Tag Manager detecta un evento de vista de página, solo va a buscar en Some Pages, es decir, páginas cuya Page URL Contains /post/ o lo que hayas usado. Si quieres que se cargue también en otras páginas, en nuestro caso lo tenemos en las páginas del portafolio, simplemente crea más activadores para esas páginas y añádelos a la etiqueta.
Ahora tendrás botones para compartir que se rellenan con las OG tags de tu sitio.
Paso 2B: Crea un activador Some Pages con Fully Loaded
Si elegiste el camino del activador Fully Loaded harás lo siguiente.
Mira la estructura de la URL de tus publicaciones. Nuestras publicaciones están en la colección CMS Post y todos sus slugs empiezan por /post/, porque esa es nuestra carpeta del blog.
<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity
Esto nos lo pone bastante fácil: todas las publicaciones contienen /post/ y por tanto podemos crear un activador para eso. Tú solo tienes que usar la estructura que tengas.
Haz clic en el activador Fully Loaded y crea una copia.
Ponle un nombre al activador, selecciona Some Custom Events, luego Page URL en el desplegable, luego Contains, y escribe la parte de la URL que vayas a usar, /post/ en nuestro caso.
Guarda el activador, quita el activador anterior y añade tu nuevo activador para el blog; luego guarda, pulsa Submit y publica.
Y listo. Pero ¿qué está pasando? Cada vez que se dispara tu nuevo activador Fully Loaded para el blog, Tag Manager busca el evento personalizado, pero solo en las páginas cuya URL Contains /post/, en nuestro caso. Y como extra, ¡espera a que todo lo demás se cargue primero! Si quieres que se cargue también en otras páginas, en nuestro caso lo tenemos en las páginas del portafolio, simplemente crea más activadores para esas páginas y añádelos a la etiqueta.
Ahora tendrás botones para compartir que se rellenan con las OG tags de tu sitio.
Si prefieres cargar tus etiquetas con Cloudflare Zaraz en lugar de Tag Manager, lo hemos cubierto en nuestra guía de Zaraz, y instalar Microsoft Clarity a través de Tag Manager sigue el mismo patrón de Custom HTML.
Preguntas frecuentes
¿Cómo añado botones para compartir en redes sociales a Webflow?
Añade tu dominio a una cuenta gratuita de ShareThis, copia el fragmento de seguimiento en una etiqueta Custom HTML de Google Tag Manager, dispárala en All Pages (o con un activador Fully Loaded) y luego activa una herramienta de botones para compartir, como Sticky Share Buttons, en ShareThis. Dale unos minutos y los botones aparecerán en tu sitio.
¿Necesito código personalizado en Webflow para añadir un botón para compartir en Facebook?
No para ShareThis en sí. Una vez que Google Tag Manager está instalado en tu sitio (esa instalación única es el único código que va en Webflow), el fragmento de ShareThis vive en Tag Manager, así que no hay nada extra que pegar en los ajustes de código personalizado de Webflow. Los botones usan las OG tags de tu página para el título, la descripción y la imagen cuando alguien comparte.
¿Cómo muestro los botones para compartir solo en las publicaciones del blog?
Crea un activador que solo se dispare cuando la Page URL contenga la carpeta de tu blog, que para nosotros es /post/, y asígnalo a la etiqueta de ShareThis. El Paso 2 de arriba explica las dos versiones, la de Page View y la de Fully Loaded.
¿ShareThis ralentizará mi sitio?
Cualquier script adicional tiene un coste, pero disparar la etiqueta con un activador Fully Loaded hace que solo se ejecute cuando todo lo demás de la página ya se ha cargado, lo que la mantiene al margen de tus resultados de PageSpeed.
Si tienes preguntas, escríbenos en los comentarios y echa un vistazo a más tutoriales aquí.
