Accede a todo EDteam con un único pago¡Sube a premium!

Como crear botones de redes sociales sin programar

Aprende a crear botones para compartir en redes sociales solo con HTML, sin JavaScript

Diseño web
4 minutos
Hace 5 años
Como crear botones de redes sociales sin programar

Las redes sociales son una gran herramienta de marketing porque crean un canal de distribución y comunicación con los clientes. Gracias a las redes sociales llegamos a personas que no conocían nuestro producto o servicio y pueden empezar a seguirnos y con el tiempo convertirse en clientes. Por eso todo equipo de marketing debe tener una estrategia definida para redes sociales.

Las redes sociales se vuelven mucho más efectivas no cuando publicamos nuestro contenido sino cuando la gente es quien lo comparte. Porque las personas atienden mejor a lo que publica un amigo que lo publica una empresa. Por eso encontramos botones de redes sociales en todos los sitios web, blogs o ecommerce. Así si un contenido o producto te gusta lo podrás compartir fácilmente con tus contactos.

Para implementar estos botones necesitas conocimientos de programación y agregar los scripts de cada red social en tu sitio, lo que tiene algunos inconvenientes:

  • A más scripts adicionales, más lento cargará tu sitio.
  • Estos scripts rastrearán a tus usuarios.
  • El personal de marketing dependerá de los programadores para agregarlos.

Sin embargo, existe una forma sencilla de integrar los botones de redes sociales con puro HTML, sin programar y con las siguientes ventajas:

  • Como no requiere programación pueden ser agregados fácilmente por el equipo de marketing
  • Se pueden agregar a correos electrónicos (son solo HTML 😍)
  • No requiere cargar scripts de terceros.

Conceptos previos

Seguro sabes crear un enlace en HTML:

1<a href="https://ed.team">Tu futuro te está esperando</a> 2

Eso es lo que haremos, pero usaremos parámetros. Los parámetros son datos adicionales que se envian por la url para ejecutar diversas acciones. Por ejemplo, un enlace como el siguiente podría mandarte directamente a comprar el curso React.js Desde Cero. El parámetro viene luego del signo ? y es comprar

1<a href="https://ed.team/cursos/react?comprar">Comprar React.js Desde Cero</a> 2

Los parámetros pueden tener un nombre y un valor. Por ejemplo, en el siguiente enlace podría comprarse el curso con el id 37

1<a href="https://ed.team?comprar=37">Comprar React.js Desde Cero</a> 2

Si se requieren varios parámetros estos se separan con el signo &

1<a href="https://ed.team?comprar=37&from=mobile">Comprar React.js Desde Cero</a> 2

Recuerda que las url no admiten espacios así que en los casos en que debas agregar espacios en un parámetro usa %20 ya que es su equivalente. Ahora sí, vamos a construir los enlaces para cada red social.

Facebook:

Para facebook la url es facebook.com/sharer y este es el formato para compartir. Ten presente que solo puedes compartir un link, no puedes agregar un mensaje personalizado

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

Ejemplo

1<a href="https://www.facebook.com/sharer/sharer.php?u=https://ed.team">Comparte por facebook</a> 2

Whatsapp

Whatsapp permite enviar solo un parámetro de texto. Así que dentro de dicho parámetro escribiremos el mensaje y la url que queremos compartir. Recuerda remplazar los espacios por %20

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

Ejemplo:

1<a href="https://api.whatsapp.com/send?text=Te%20recomiendo%20esta%20plataforma%20de%20cursos%20de%20programación,%20a%20mí%20me%20ha%20ayudado%20mucho%20https://ed.team"></a> 2

LinkedIn

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

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

Ejemplo:

1<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://ed.team">Comparte en LinkedIn</a> 2

Twitter:

Twitter es sin duda el que nos da la opción más completa de todas las redes porque permite agregar mensaje, url, hashtags, mencionar a un usuario, etc. Si quieres ver todos los detalles te comparto la documentación:

Docs: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent.html

Esta es la estructura básica para compartir en Twitter

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

Ejemplo:

1<a href="https://twitter.com/intent/tweet?text=Te%20recomiendo%20esta%20plataforma%20de%20cursos%20de%20programación,%20a%20mí%20me%20ha%20ayudado%20mucho&url=https://ed.team&hashtags=tambienSoyEDteam"></a> 2

Si este post te gustó y te fue útil compártelo con tus amigos. Te dejo los enlaces (ya sabes como fueron creados 😉)

Comentarios de los usuarios

Pregunta a ChatEDT