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=URL

URL: La URL que quieres compartir.

Compartir URL estática

<a href="https://www.facebook.com/sharer/sharer.php?u=https://diegoamorin.com">
    Compartir en Facebook
</a>

Compartir URL dinámica

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

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,HASHTAG2

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)

Compartir URL estática

<a href="https://twitter.com/intent/tweet?url=https://diegoamorin.com&text=¡Mira%20esto!">
    Compartir en X
</a>

Compartir URL dinámica

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

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

WhatsApp permite compartir un mensaje donde puedes incluir la URL.

https://wa.me/?text=TEXT

TEXT: El texto que quieres incluir en el mensaje.

Compartir URL estática

<a href="https://wa.me/?text=¡Mira%20esto!%20https://diegoamorin.com">
    Compartir en WhatsApp
</a>

Compartir URL dinámica

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

Telegram permite compartir una URL y un mensaje inicial.

https://t.me/share/url?url=URL&text=TEXT

URL: La URL que quieres compartir.
TEXT: El texto que quieres incluir en el mensaje.

Compartir URL estática

<a href="https://t.me/share/url?url=https://diegoamorin.com&text=¡Mira%20esto!">
    Compartir en Telegram
</a>

Compartir URL dinámica

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

Correo

Para compartir por correo electrónico, puedes usar un enlace mailto (Leer guía completa).

mailto:?subject=SUBJECT&body=BODY%20URL

SUBJECT: El asunto del correo.
BODY: El cuerpo del correo.
URL: La URL que quieres compartir.

Compartir URL estática

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

Compartir URL dinámica

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

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=SOURCE

URL: La URL que quieres compartir.
TITLE: El título del artículo.
SOURCE: La fuente del artículo (opcional).

Compartir URL estática

<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://diegoamorin.com&title=¡Mira esto!&source=MiSitioWeb">
    Compartir en LinkedIn
</a>

Compartir URL dinámica

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

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

https://www.reddit.com/submit?url=URL&title=TITLE

URL: La URL que quieres compartir.
TITLE: El título del artículo.

Compartir URL estática

<a href="https://www.reddit.com/submit?url=https://diegoamorin.com&title=¡Mira%20esto!">
    Compartir en Reddit
</a>

Compartir URL dinámica

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