Cómo insertar el botón oficial de Twitter sin scripts

El día de ayer fue lanzado para todo el mundo el botón oficial de Twitter para compartir contenidos, y la verdad es que a mí me gustó bastante su sencillez y la forma en que se muestra, con su contador y todo, además de que podemos personalizarlo todo antes de agregarlo.

La cosa es que no en todos lados vamos a poder hacer eso, porque este funciona mediante un script, y no en todas partes nos permiten la ejecución de estos, pero lo que si podemos hacer, es jugar un poquito con ese código y conseguir más o menos los mismos resultados. Claro, sin la ejecución de scripts.

Para empezar, tenemos claro que el código base que tomaremos será el que Twitter nos ofrece, que sería el siguiente:

Ahora si lo simplificamos para poder usarlo sin el Script y sin código basura, lo correcto sería lo siguiente:

Tweet

Lo que nos mostraría algo así:

Tweet

Con lo que nos damos cuenta de que no sirve de nada la etiqueta “data-via” ni la “data-lang” si no se está cargando el script, así que tenemos 2 cosas, una buena y una mala; La buena es que podemos simplificar aún más el código y seguirá funcionando. La mala es que lo único que aparecerá en el Tweet es la url acortada del contenido a compartir, algo que no convencerá a muchos.

Pero si prestamos un poco de atención, en la parte de debajo de la página de Twitter para crear los botones, nos presentan un enlace para la documentación para los desarrolladores, en donde nos explican que podemos crear nuestros propios botones a partir del código simplificado (Con el que ya habíamos dado) que sería el siguiente:

Tweet

Y a partir de ese, comenzamos a meterle algunas variables en la url para comenzar a personalizarla. Los valores que podemos utilizar son:

url URL de la página a compartir.
via El usuario al que se le va a atribuír el Tweet.
text El texto que contendrá el Tweet.
related Cuentas relacionadas / Una cuenta secundaria para atribuirle el Tweet.

Ahora, tomando eso como base, vamos a crear nuestro propio enlace usando la siguiente estructura:

Comparte UnUsuario en Twitter!

Por lo que al final obtengo un resultado más o menos como este:

Comparte UnUsuario en Twitter!

Que se vería algo así:

Comparte UnUsuario en Twitter!

Claro, si se manejan con CSS también podrían meterle un poco de estilos o en lugar de mostrar texto, que muestre una imagen o demás, todo queda al alcance de la pura imaginación.

Desde Twitter nos muestran un ejemplo de cómo quedaría si le metemos un poco de Feeling con CSS:

Y eso se logra simplemente metiendo el siguiente código:


Claro que si queremos integrarlo a WordPress podemos automatizar todo el proceso de llenado de datos e integrarlo directamente con el theme, simplemente agregando el siguiente código a donde queramos usarlo:

¡Compartelo!

Y pues eso sería, ¡Espero que les sirva de algo!

  • Leave a Comment

¡SÉ UNUSUARIO!

Suscribete gratis a UnUsuario.com para recibir todas nuestras actualizaciones, noticias, guías, recursos y mucho más en tu casilla de correo electrónico.

Gracias por suscribirte! :).

Oops, ha ocurrido un error, inténtalo nuevamente.