No items found.
regresar a página artículos

Cómo agregar botón Compartir de redes sociales en Webflow

Si deseas agregar un botón de compartir en redes sociales a tu página creada en Webflow, este artículo proporciona una guía paso a paso sobre cómo hac

Última actualización
06/2024
Web (diseño y desarrollo)
Guía práctica
Autor (es):
No items found.

Botones de compartir para diferentes redes sociales en Webflow

Si tienes algún contenido, especialmente publicaciones de blog, y deseas agregar un botón de compartir en redes sociales, este artículo proporciona una guía paso a paso sobre cómo hacerlo en Webflow.

Descargo de responsabilidad:

  1. Este breve tutorial se basa en la siguiente publicación en el Foro de Webflow: link aquí.
  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 de incrustación y nombra la clase "icono-de-compartir-en-redes-sociales" (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 X (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 EN TUMBLR

<a class="social-media-share-icon" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;"></a>

‍

COMPARTIR VIA E-MAIL

<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 PINBOARD

<a class="social-media-share-icon" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" onclick="window.open('https://pinboard.in/popup_login/?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); 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 icono/botón como SVG

  • En Figma, copia el icono/botón como un SVG.
  • Haz clic derecho, selecciona "Copiar/Pegar como" y elige "Copiar como SVG".
  • Pégalo en el elemento de incrustación del paso 1, entre las etiquetas <a>, justo antes de </a>.

¡Publica tu página y eso es todo!

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

  • Para lograr esto, necesitas modificar el código HTML del icono SVG.
    • Cambia el ancho y alto a 100%.
    • Cambia el relleno a "currentColor".
  • Utiliza animaciones en Webflow como de costumbre, pero recuerda cambiar el color del texto, no el fondo.

Artículos relacionados

¿Imágenes, Videos o Lottie? El mejor rendimiento tiene…
Web (diseño y desarrollo)
Leer
El Rol del Contenido en el Diseño Web
Web (diseño y desarrollo)
Leer
Buscas generar leads mediante una web única y robusta que proyecte tu marca, destaque sobre la web de tu competencia y te haga sentir orgullo de mostrarla a clientes, amigos y familiares.

Llegaste al lugar correcto
‍
Conoce más sobre Menta aquí.