Redes sociales: crea tus propios botones de compartir en HTML

Botones Compartir Redes Sociales

Redes sociales: crea tus propios botones de compartir en HTML

Buenos días a tod@s,

En este post hablare de como crear botones para compartir contenido a través de las redes sociales con HTML.

Para implementar esos botones, las redes sociales ofrecen muchos métodos.

Algunos involucran generadores de botones, y algunos requieren código JavaScript externo. Lo que significa más scripts adicionales en tu web que rastrearán a tus usuarios y que harán la carga más lenta.

 

Sin embargo, para evitar esto, existen otros métodos más simples y efectivos para crear enlaces de uso compartido de páginas web.

 

El concepto

Mientras compartimos el enlace en una página web, básicamente enviamos una solicitud GET (es decir, haciendo clic en un enlace) a una URL proporcionada por cada servicio en la red social.

Así que primero crearemos un enlace en HTML y luego le añadiremos parámetros. Los parámetros son datos adicionales que se envían por la url para ejecutar diversas acciones.

 

Por ejemplo, en un enlace como el siguiente, el parámetro viene después del signo ? y es “inscribir”:

<a href="https://www.espai.es/seminarios-especiales?inscribir">SEMINARIO WEB</a>

 

Los parámetros pueden tener un nombre y un valor. En el caso siguiente serían inscribir y diseño:

<a href="https://www.espai.es/seminarios-especiales?inscribir=diseño">SEMINARIO WEB</a>

 

Y si se requieren varios parámetros estos se separan con el signo &:

<a href="https://www.espai.es/cursos/cursos-marketing-digital-en-barcelona?inscribir=41&from=mobile">SEMINARIO WEB</a>

 

A notar que algunos símbolos en las solicitudes GET conocidos como “caracteres reservados”, deben codificarse correctamente para no interferir con las funciones normales del navegador. Estos caracteres están sujetos a URL codificadas (Percent Encoding ), por ejemplo los espacios no son admitidos en las url y dentro de un parámetro usaremos %20 como equivalente a espacio.  Y ahora, vamos a crear los enlaces para cada red social.

 

Compartir enlace en Facebook:

El método para compartir páginas web en Facebook es la URL:

<a href="https://www.facebook.com/sharer/sharer.php?u=[url]"></a>

 

Solo puedes compartir un enlace sin mensaje. Para  la web de Espai, el enlace sería el siguiente:

<a href="https://www.facebook.com/sharer/sharer.php?u=https://espai.es">Comparte en Facebook</a>

 

Compartir en Twitter

A diferencia de Facebook, donde solo se puede especificar la página web compartida, Twitter permite agregar texto y cualquier número de hashtags. Puedes ver toda la documentación oficial en el interface para developper de la propia red social.

La estructura base del enlace sería la siguiente:

<a href="https://twitter.com/intent/tweet?text=&url=[url]&hashtags=[hashtag]"></a>

 

Por ejemplo, quieres tuitear la siguiente información:

  • URL : https://espai.es/
  • Texto : escola informática i disseny
  • Hashtag : dissenyweb

<a href="https://twitter.com/intent/tweet?text= escola%20inform%C3%A1tica%20i%20disseny&url=https://espai.es&hashtags=dissenyweb"> Compartir en twitter</a>

 

Compartir en Whatsapp

Whatsapp permite enviar solo un parámetro de texto. Así que dentro de este parámetro escribirás el mensaje y la url que quieres compartir:

<a href="https://api.whatsapp.com/send?text="></a>

 

<a href="https://api.whatsapp.com/send?text=escola%20inform%C3%A1tica%20i%20disseny%20https://espai.es">Compartir en Whatsapp</a>

 

Compartir en Linkedln

Al igual que Facebook, LinkedIn no admite agregar un mensaje, solo nos permite una url.

<a href="https://www.linkedin.com/sharing/share-offsite/?url=[url]"></a>

Para compartir la web de Espai:

<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://espai.es">Comparte en LinkedIn</a>

 

Las redes sociales nos permiten llegar a personas que no conocían nuestro producto o servicio y pueden empezar a seguirnos y con el tiempo convertirse en clientes. Os animo a investigar las diferentes maneras de conseguir más seguidores además de generar botones de compartir.

 

Si te ha gustado este post, y si te ha ayudado a aprender como crear botones con HTML para compartir contenido a través de las redes sociales, no dudes en compartirlo en tus propias redes sociales. 🙂

Escribe un comentario