Hoy en día las redes sociales tienen una de las mayores influencias a la hora de compartir contenido y dar a conocer a la gente nuestros productos o servicios y que los usuarios compartan ese contenido se ha convertido en una de las herramientas más poderosas para conseguirlo, es por eso que los enlaces para compartir en redes sociales cada vez son más habituales.
Seguramente muchas veces navegando por internet, ya sea al leer un artículo o en diversas páginas de contenido, te habrás dado cuenta que incluyen unos enlaces para compartir y que nada más clicarlos redirigen a una nueva ventana con la red social elegida y con el contenido listo para compartir en redes sociales.
Es mucho más fácil confiar en algo que te dice tu amigo que en algo que te dice un desconocido, de ahí la importancia de estos enlaces y la gran popularidad que han obtenido.
Aunque existen diversas formas de llevar a cabo esta tarea y algunas bastante complejas, hoy trataremos una de las más sencillas y al alcance de cualquiera conociendo solo unas pautas básicas de HTML, que te enseñaré a continuación y sin necesidad de programar.
Teoría básica
A día de hoy la gran mayoría de servicios online en los que podríamos estar dispuestos a compartir nuestro contenido, disponen de software interno que realiza multitud de acciones y nos hacen cada vez la vida más fácil. Una de estas es la de facilitar a los usuarios compartir fácilmente contenido en sus redes sociales mediante una dirección web a la que se le incluyen unos parámetros básicos para personalizar los enlaces.
En HTML los enlaces (o links) se utilizan con la etiqueta
<a>
Por ejemplo:
<a href="direccionDelEnlace.com">Enlace</a>
De esta manera al hacer clic en «Enlace», nos redirigirá a la dirección especificada.
Parámetros del enlace
Ahora que ya sabemos cómo funciona un enlace en HTML debemos saber que en las direcciones web se pueden incluir parámetros, estos parámetros se ponen justo detrás de la dirección web e indican funcionalidades que tiene previamente programadas el sitio.
La cantidad de parámetros puede variar, lo que no varía es que el primero que incluyamos empieza tras un signo de interrogación «?» y todos los demás tras el signo de «&».
<a href="direccionDelEnlace.com?parametro1¶metro2">Nombre del Enlace</a>
Por último, hay que recalcar que las urls no admiten espacios en blanco por lo que debemos sustituir cada uno de ellos por su equivalente «%20» .
Aplicando lo aprendido
Sabiendo todo esto queda lo más fácil. Como hemos dicho, la mayoría de servicios nos dejan sus enlaces para compartir, los que podemos añadir fácilmente a nuestro sitio web modificando únicamente los parámetros que queramos
Compartir en WhatsApp
WhatsApp nos proporciona su enlace con el que podemos compartir un texto preestablecido por nosotros, con un enlace a nuestra web o lo que se nos ocurra, sería tan sencillo como coger el enlace que nos proporciona:
<a href="https://api.whatsapp.com/send?text=[text]"></a>
Y sustituir [text] por el texto que queramos teniendo en cuenta que para cada espacio debemos usar como hemos visto antes su equivalente «%20» :
<a href="https://api.whatsapp.com/send?text=Enlaces%20de%20compartir%20en%20redes%20sociales%20con%20un%20click%20y%20solo%20con%20HTML%20enlaces-de-compartir-en-redes-sociales-con-un-click-y-solo-con-html">Compartir con Whatsapp</a>
Este sería el resultado: Compartir con Whatsapp
Aunque a simple vista parezca algo complicado de leer, lo único que hemos hecho ha sido hacer la sustitución y cambiar los espacios por «%20» .
Sobre WhatsApp, hay que recalcar que compartir solo funciona si clicamos desde dispositivos móviles
Compartir en Twitter
Para compartir en Twitter, la plataforma nos provee el siguiente enlace
<a href="https://twitter.com/intent/tweet?text=[text]&url=[url]&hashtags=[hashtag]">Compartir en twitter</a>
Y el procedimiento sería el mismo, sustituir los campos entre [ ] por los datos que queramos.
<a href="https://twitter.com/intent/tweet?text=Enlaces%20de%20compartir%20en%20redes%20sociales%20con%20un%20click%20y%20solo%20con%20HTML&url=https://tempusblog.tempuscode.com/compartir-en-redes-sociales&hashtags=tempuscode">Compartir en twitter
Este sería el resultado: Compartir en Twitter
Compartir en Facebook
Para Facebook tenemos un enlace más sencillo:
<a href="https://www.facebook.com/sharer/sharer.php?u=[url]"></a>
Como antes, sustituimos [url] por nuestra dirección web:
<a href="https://www.facebook.com/sharer/sharer.php?u=https://tempusblog.tempuscode.com/compartir-en-redes-sociales">Compartir en Facebook</a>
Este sería el resultado: Compartir en Facebook
Compartir en LinkedIn
En LinkedIn tenemos un enlace muy similar al de Facebook en el que podemos modificar la [url] .
<a href="https://www.linkedin.com/sharing/share-offsite/?url=[url]">Compartir con LinkedIn</a>
Exactamente igual que con Facebook:
<a href="https://www.linkedin.com/sharing/share-offsite/?url=
https://tempusblog.tempuscode.com/compartir-en-redes-sociales">Compartir con LinkedIn</a>
Este sería el resultado: Compartir con LinkedIn
¡Ya puede empezar a compartir en redes sociales, si te ha sido útil y crees que podría ayudar a más gente comparte este artículo !
Compartir en: Facebook | Twitter | LinkedIn | Whatsapp
Comentarios