Botones para compartir en distintas redes sociales en Webflow

Si tienes contenido, en particular entradas de blog, y quieres agregar un botón para compartir en redes sociales, este artículo ofrece una guía paso a paso para hacerlo en Webflow.

Aviso:

1. Este breve tutorial se basa en la siguiente publicación del Foro de Webflow: Dynamic share buttons for different social media.
2. Los botones se basan en archivos SVG de Figma.

1. Define las redes sociales para compartir

Copia uno de los siguientes códigos en un elemento Embed y nombra la clase "social-media-share-icon" (o cualquier otro nombre que prefieras, pero recuerda cambiarlo también en el código HTML).

COMPARTIR EN FACEBOOK

<a class="social-media-share-icon" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> </a>

COMPARTIR EN LINKEDIN

<a class="social-media-share-icon" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>

COMPARTIR EN TWITTER

<a class="social-media-share-icon" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a>

COMPARTIR EN PINTEREST

<a class="social-media-share-icon" href="http://pinterest.com/pin/create/button/?url=&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' + encodeURIComponent(document.title)); return false;"></a>

COMPARTIR POR CORREO

<a class="social-media-share-icon" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;"></a>

COMPARTIR EN REDDIT

<a class="social-media-share-icon" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;">Reddit</a>

2. Copia el diseño del ícono/botón como SVG

• En Figma, copia el ícono/botón como SVG.
• Haz clic derecho, selecciona "Copy/Paste as" y elige "Copy as SVG".
• Pégalo en el elemento Embed del paso 1, entre las etiquetas <a>, justo antes de </a>.
• Nota: si solo quieres texto (sin ícono), escríbelo en lugar de copiar el código SVG.

Publica tu página, ¡y listo!

3. (opcional) Cambiar el color/tamaño al pasar el cursor

• Para lograrlo, necesitas modificar el código HTML del ícono SVG.
• ~Cambia el width y el height a 100%.
• ~Cambia el fill a "currentColor".
• Usa animaciones en Webflow como de costumbre, pero recuerda cambiar el color del texto, no el fondo.