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=URLLenguaje del código: Bash (bash)

• 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>Lenguaje del código: HTML, XML (xml)

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>Lenguaje del código: 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,HASHTAG2Lenguaje del código: 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)

Compartir URL estática

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

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>Lenguaje del código: 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=TEXTLenguaje del código: Bash (bash)

• 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>Lenguaje del código: HTML, XML (xml)

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>Lenguaje del código: HTML, XML (xml)

Telegram

Telegram permite compartir una URL y un mensaje inicial.

https://t.me/share/url?url=URL&text=TEXTLenguaje del código: Bash (bash)

• 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>Lenguaje del código: HTML, XML (xml)

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>Lenguaje del código: HTML, XML (xml)

Correo

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

mailto:?subject=SUBJECT&body=BODY%20URLLenguaje del código: Bash (bash)

• 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>Lenguaje del código: HTML, XML (xml)

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>Lenguaje del código: 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=SOURCELenguaje del código: Bash (bash)

• 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>Lenguaje del código: HTML, XML (xml)

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>Lenguaje del código: HTML, XML (xml)

Reddit

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

https://www.reddit.com/submit?url=URL&title=TITLELenguaje del código: Bash (bash)

• 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>Lenguaje del código: HTML, XML (xml)

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>Lenguaje del código: HTML, XML (xml)