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 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.
Compartir URL estática
<a href="https://www.facebook.com/sharer/sharer.php?u=https://diegoamorin.com">
Compartir en Facebook
</a>Code language: 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>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)
Compartir URL estática
<a href="https://twitter.com/intent/tweet?url=https://diegoamorin.com&text=¡Mira%20esto!">
Compartir en X
</a>Code language: 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>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 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.
Compartir URL estática
<a href="https://wa.me/?text=¡Mira%20esto!%20https://diegoamorin.com">
Compartir en WhatsApp
</a>Code language: 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>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.
Compartir URL estática
<a href="https://t.me/share/url?url=https://diegoamorin.com&text=¡Mira%20esto!">
Compartir en Telegram
</a>Code language: 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>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.
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>Code language: 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>Code language: HTML, XML (xml)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).
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>Code language: 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>Code language: HTML, XML (xml)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.
Compartir URL estática
<a href="https://www.reddit.com/submit?url=https://diegoamorin.com&title=¡Mira%20esto!">
Compartir en Reddit
</a>Code language: 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>Code language: HTML, XML (xml)
