Crear botones para compartir en redes sociales con HTML

Entrada: Crear botones para compartir en redes sociales con HTML

Los botones de compartir no son más que una etiqueta “a” con una URL. Esta URL posee una estructura definida por la plataforma en la que se quiere compartir.

Y para que estas etiquetas <a> se parezcan a un botón, solo se usa CSS.

En esta guía te ofreceré las URLs para compartir en cada plataforma y códigos para implementarlo en tu web, ya sea que tengas una web de contenido estático, o de contenido dinámico.

Facebook

Facebook solo te permite definir la URL que deseas compartir.

https://www.facebook.com/sharer/sharer.php?u=URLCode language: Bash (bash)
  • URL: La URL que quieres compartir.

Para web con contenido estático

<a href="https://www.facebook.com/sharer/sharer.php?u=https://diegoamorin.com">
    Compartir en Facebook
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="facebook-share">Compartir en Facebook</a>
<script>
    let currentUrl = window.location.href;
    let facebookShareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(currentUrl);
    document.getElementById('facebook-share').href = facebookShareUrl;
</script>Code language: HTML, XML (xml)

X (anteriormente Twitter)

X permite compartir una URL y definir un texto inicial para el tweet, además de otros parámetros opcionales.

https://twitter.com/intent/tweet?url=URL&text=TEXT&via=USERNAME&hashtags=HASHTAG1,HASHTAG2Code language: Bash (bash)
  • URL: La URL que quieres compartir.
  • TEXT: El texto que quieres incluir en el tweet.
  • USERNAME: El nombre de usuario para mencionar en el tweet. (Opcional)
  • HASHTAG1, HASHTAG2, ...: Hashtags para incluir en el tweet. (Opcional)

Para web con contenido estático

<a href="https://twitter.com/intent/tweet?url=https://diegoamorin.com&text=¡Mira%20esto!">
    Compartir en X
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="twitter-share">Compartir en X</a>
<script>
    let currentUrl = window.location.href;
    let text = '¡Mira esto!';
    let twitterShareUrl = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(currentUrl) + '&text=' + encodeURIComponent(text);
    document.getElementById('twitter-share').href = twitterShareUrl;
</script>Code language: HTML, XML (xml)

En las URL, los espacios se representan usualmente con %20, que es la codificación en URL para el espacio.

WhatsApp

WhatsApp permite compartir un mensaje donde puedes incluir la URL.

https://wa.me/?text=TEXTCode language: Bash (bash)
  • TEXT: El texto que quieres incluir en el mensaje.

Para web con contenido estático

<a href="https://wa.me/?text=¡Mira%20esto!%20https://diegoamorin.com">
    Compartir en WhatsApp
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="whatsapp-share">Compartir en WhatsApp</a>
<script>
    let currentUrl = window.location.href;
    let text = '¡Mira esto! ' + currentUrl;
    let whatsappShareUrl = 'https://wa.me/?text=' + encodeURIComponent(text);
    document.getElementById('whatsapp-share').href = whatsappShareUrl;
</script>Code language: HTML, XML (xml)

Telegram

Telegram permite compartir una URL y un mensaje inicial.

https://t.me/share/url?url=URL&text=TEXTCode language: Bash (bash)
  • URL: La URL que quieres compartir.
  • TEXT: El texto que quieres incluir en el mensaje.

Para web con contenido estático

<a href="https://t.me/share/url?url=https://diegoamorin.com&text=¡Mira%20esto!">
    Compartir en Telegram
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="telegram-share">Compartir en Telegram</a>
<script>
    let currentUrl = window.location.href;
    let text = '¡Mira esto!';
    let telegramShareUrl = 'https://t.me/share/url?url=' + encodeURIComponent(currentUrl) + '&text=' + encodeURIComponent(text);
    document.getElementById('telegram-share').href = telegramShareUrl;
</script>Code language: HTML, XML (xml)

Correo

Para compartir por correo electrónico, puedes usar un enlace mailto.

mailto:?subject=SUBJECT&body=BODY%20URLCode language: Bash (bash)
  • SUBJECT: El asunto del correo.
  • BODY: El cuerpo del correo.
  • URL: La URL que quieres compartir.

Para web con contenido estático

<a href="mailto:?subject=¡Mira esto!&body=¡Echa un vistazo a este enlace!%20https://diegoamorin.com">
    Compartir por correo electrónico
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="email-share">Compartir por correo electrónico</a>
<script>
    let currentUrl = window.location.href;
    let subject = '¡Mira esto!';
    let body = '¡Echa un vistazo a este enlace! ' + currentUrl;
    let emailShareUrl = 'mailto:?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
    document.getElementById('email-share').href = emailShareUrl;
</script>Code language: HTML, XML (xml)

LinkedIn

LinkedIn permite compartir una URL y agregar un título y una fuente opcional.

https://www.linkedin.com/shareArticle?mini=true&url=URL&title=TITLE&source=SOURCECode language: Bash (bash)
  • URL: La URL que quieres compartir.
  • TITLE: El título del artículo.
  • SOURCE: La fuente del artículo (opcional).

Para web con contenido estático

<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://diegoamorin.com&title=¡Mira esto!&source=MiSitioWeb">
    Compartir en LinkedIn
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="linkedin-share">Compartir en LinkedIn</a>
<script>
    let currentUrl = window.location.href;
    let title = '¡Mira esto!';
    let source = 'MiSitioWeb';
    let linkedinShareUrl = 'https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(currentUrl) + '&title=' + encodeURIComponent(title) + '&source=' + encodeURIComponent(source);
    document.getElementById('linkedin-share').href = linkedinShareUrl;
</script>Code language: HTML, XML (xml)

Reddit

Reddit permite compartir una URL y agregar un título.

https://www.reddit.com/submit?url=URL&title=TITLECode language: Bash (bash)
  • URL: La URL que quieres compartir.
  • TITLE: El título del artículo.

Para web con contenido estático

<a href="https://www.reddit.com/submit?url=https://diegoamorin.com&title=¡Mira%20esto!">
    Compartir en Reddit
</a>Code language: HTML, XML (xml)

Para web con contenido dinámico

<a href="" id="reddit-share">Compartir en Reddit</a>
<script>
    let currentUrl = window.location.href;
    let title = '¡Mira esto!';
    let redditShareUrl = 'https://www.reddit.com/submit?url=' + encodeURIComponent(currentUrl) + '&title=' + encodeURIComponent(title);
    document.getElementById('reddit-share').href = redditShareUrl;
</script>Code language: HTML, XML (xml)

Compartir:
Suscríbete para recibir artículos de desarrollo web

En este boletín envío correos relacionados al área del diseño y desarrollo web. Escribo sobre WordPress y AstroJS, a veces un poco de UX/UI.

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *

Cómo hacer texto degradado con CSS

Agregar fuentes personalizadas en CSS con @font-face

Crea un acordeón con HTML, CSS y Javascript

Encuéntrame en: