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=[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=[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. 🙂

31Comentarios

  • Isttael Rivera
    11/07/2021

    Buen dia, si lo que deseo es colocar un boton que al presionar me diera la opcion de decidir en que red social compartir, como seria?
    es decir que al hacer clic en el boton, me salgan los iconos de facebbok, instagram, whatsapp y asi elegir en que red deseo compartir.

    He visto que en muchas paginas lo hacen, me ayudarias?

  • Daniel
    08/06/2021

    Hola.. cual seria el codigo para COMPARTIR con MESSENGER- por favor..?

  • franco
    01/04/2021

    Saludos,
    ¿Cómo podría hacer hacer un botón que permita hacer descargas condicionadas?. Por ejemplo en una website que tiene un archivo PDF, pero que si los usuarios desean descargarlo, primero deberán compartir el website por sus redes sociales (facebook o twitter), una vez hecho esto, podrán descargar el archivo PDF.

  • Julia
    22/03/2021

    Mil Gracias!!!

  • Jesús Adame
    02/03/2021

    Excelente información, es justo lo que buscaba.

  • Kiko
    17/02/2021

    Me va perfecto para crear unos botones de redes sociales, gracias.

  • Isaac
    06/02/2021

    Para que me quede mas separado los iconos, que escribo o como lo hago
    Gracias

  • Cristina Campderrós Just
    19/11/2020

    Muy interesante y bien explicado, muchas gracias!

  • Isabel
    03/11/2020

    ¡Genial! Gracias por el aporte. ¿Hay código para compartir en instagram?

  • Alfredo
    26/10/2020

    Muy bueno el Post claro lo que transmite y no dibaga muicho exelente POST

  • maria mv
    07/10/2020

    gracias andaba buscando esta información de poner botones me fue muy útil.

  • Martín
    19/09/2020

    Gracias, he buscado otras web pero esta es la más facil de entender. Aquí mi ejemplo https://www.telefonode.org/spam/de-quien-es-telefono-607103000.php.
    ¿Como se pueden añadir hastag? con comas entre palabras? o con %20 ?

  • Tutos Gamer
    16/09/2020

    como hiciste los comentarios???

    • Leover
      12/06/2023

      Si alguien sabe la respuesta a esta Pregunta de TUTOS GAMER, que me informe, por favor.

  • Mariela Solorzano C
    20/08/2020

    PERFECTO! MUCHAS GRACIAS!

  • Fernando León
    18/08/2020

    Super bueno! <3

    Muchas gracias.

  • Salvador Marquez
    17/06/2020

    Gracias

Escribe un comentario