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. 🙂
Isttael Rivera
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?
Stephanie Guerrero
Hola Isttael, sería hacer un modal box. A decir poner un enlace que te permite hacer click y que se abra una caja con los botones de compartir.
Te dejo en el enlace siguiente un ejemplo: https://codepen.io/steph_itw/pen/JjNbRQV
Si haces click en «Comparte en tus redes sociales», se abrirá una caja.
Este ejemplo es puro CSS, lo podrías hacer con JS también.
Nota que en el codepen, no se abrirán los botones de compartir pero si copias el código en un editor de texto, verás que funcionan.
Espero que te ayude.
Saludos,
Stephanie
Daniel
Hola.. cual seria el codigo para COMPARTIR con MESSENGER- por favor..?
Stephanie Guerrero
Hola Daniel, Messenger es un canal de comunicación personal pero puedes por ejemplo integrar un cuadro de dialogo mediante el SDK de Facebook para JavaScript o realizando un redireccionamiento completo a una URL.
Aquí te dejo un enlace donde encontraras una explicación detallada:
https://developers.facebook.com/docs/sharing/reference/send-dialog#examples
Espero que te ayude.
Saludos,
Stephanie
franco
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
Mil Gracias!!!
Stephanie Guerrero
A ti por comentar. Saludos!
Stephanie Guerrero
De nada, espero que te haya servido. Saludos!
Jesús Adame
Excelente información, es justo lo que buscaba.
Stephanie Guerrero
Me alegro que te haya servido. Saludos!
Kiko
Me va perfecto para crear unos botones de redes sociales, gracias.
Stephanie Guerrero
Gracias a ti por comentar! Saludos
Stephanie Guerrero
Perfecto!
Isaac
Para que me quede mas separado los iconos, que escribo o como lo hago
Gracias
Cristina Campderrós Just
Muy interesante y bien explicado, muchas gracias!
Isabel
¡Genial! Gracias por el aporte. ¿Hay código para compartir en instagram?
Stephanie Guerrero
Hola Isabel, Instagram no ofrece botones de Compartir o Gustar, lo que tiene sentido, ya que su naturaleza es de una plataforma móvil que comparte fotos y videos. Puedes ver toda la documentación que ofrecer Instagram en su plataforma para desarrolladores: https://www.instagram.com/developer/.
Un saludo!
Alfredo
Muy bueno el Post claro lo que transmite y no dibaga muicho exelente POST
Stephanie Guerrero
¡Muchas gracias Alfredo!
maria mv
gracias andaba buscando esta información de poner botones me fue muy útil.
Stephanie Guerrero
Me alegro que te haya sido útil. Gracias por comentar.
Martín
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 ?
Stephanie Guerrero
Hola, para un hashtag sería %23.
Saludos
Tutos Gamer
como hiciste los comentarios???
Leover
Si alguien sabe la respuesta a esta Pregunta de TUTOS GAMER, que me informe, por favor.
Mariela Solorzano C
PERFECTO! MUCHAS GRACIAS!
Stephanie Guerrero
Encantada que te haya gustado y gracias por comentar. Saludos!
Fernando León
Super bueno! <3
Muchas gracias.
Stephanie Guerrero
Gracias a ti por comentar!
Salvador Marquez
Gracias
Stephanie Guerrero
Gracias a ti, espero que te haya sido útil.