HTML

Enlace para compartir en Twitter con HTML

Introducción

Twitter ofrece una forma de crear un link o enlace para compartir en Twitter (O twittear, como sea que le digamos). Se trata de una simple etiqueta <a> a la que podemos pasar ciertos parámetros como hashtags, texto, alguna url, la vía (en donde dice via @parzibyte por ejemplo), entre otros.

Cómo crear un enlace para compartir en Twitter usando HTML

Lo que tenemos que hacer es simplemente crear un enlace con la etiqueta <a> y en el atributo href poner la url https://twitter.com/intent/tweet junto con un cierto número de parámetros explicados abajo.

Dichos parámetros deben estar en la URL así como cuando mandamos un formulario por GET. Algo como https://twitter.com/intent/tweet?dato=valor&otroDato=otroValor

| Parámetro | Descripción
| --- | -----------
| text | El texto que el usuario compartirá en su tweet. Al juntar el texto con los hashtags, la url y esas cosas, no se debe superar el límite de 280 caracteres. Por cierto, debe ir codificado como URL. Si trabajas con JavaScript utiliza `encodeURIComponent` y en PHP existe una función llamada `urlencode`
| url | Una URL en caso de que queramos que el usuario ponga un link en su tweet. Dicha URL será acortada automáticamente, y debemos mandarla también codificada como URL
|hashtags|Una lista de etiquetas separadas por una coma
|via|La vía del tweet que siempre es un usuario de Twitter. Yo tampoco sé explicarlo bien pero al final del tweet se agrega un "vía @usuario"
|related|Usuarios relacionados al Tweet. Separados por comas igual que las etiquetas
|in-reply-to|Un identificador de un tweet al que vamos a responder. Esto es en caso de estar en una conversación

Lo que más utilizaremos será url, text, via y tal vez los hashtags. Los demás parámetros no se me hacen muy comunes pero igual y algún día los utilizamos.

Ejemplo

Podemos crear un enlace que se abra en una nueva pestaña. Claro que también podríamos hacerlo con JavaScript y window.open pero eso es otra historia.

Dicho enlace queda así en el código HTML:

<a href="https://twitter.com/intent/tweet?text=Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Twitter&url=http%3A%2F%2Fparzibyte.me%2Fblog&via=parzibyte&hashtags=programación,html" target="_blank">Twittear</a>

Como vemos, el texto “Aprendiendo a crear un enlace para compartir en Twitter” se convierte en “Aprendiendo%20a%20crear%20un%20enlace%20para%20compartir%20en%20Twitter” al codificarlo como URL

Igualmente la URL https://parzibyte.me/blog se convierte en http%3A%2F%2Fparzibyte.me%2Fblog (y más tarde, al twittear, se convertirá en un enlace acortado con t.co)

Para la lista de etiquetas no es necesario codificar nada. Eso sí, ponemos cada etiqueta sin el símbolo  de #

Y al final, la vía sería el nombre de usuario que en este caso es mi nombre de usuario en Twitter.

Puedes probar presionando el botón de abajo:

Twittear

En mi caso, al presionarlo se ve así:

Resultado de haber creado un enlace para compartir en Twitter

Así de fácil es twittear presionando un botón. Ahora podemos ponerlo en nuestros sitios web para que sea más fácil que nuestros usuarios propaguen nuestros artículos.

Conclusión

Aquí dejo la guía oficial ofrecida por Twitter.

 

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.