Cómo poner los botones sociales de Twitter

Ya hemos hablado aquí en malnuer de cómo poner los botones y plugins de Facebook, y hoy le toca el turno a Twitter. Vamos a hacer un repaso a todas las opciones que tenemos, para hacer más social nuestra página web, incluyendo botones sociales para interaccionar con esta famosa plataforma.

Hay cuatro tipos de botones que se pueden configurar muy fácilmente desde la página de «Botones de Twitter«. Cada uno de estos botones tiene unas determinadas opciones que debemos rellenar a nuestro gusto. Mientras lo haces, a la derecha aparecerá un ejemplo del botón completamente funcional, así que podrás ver en todo momento su aspecto y qué es lo que hace si lo pulsas.

Cuando acabes con la configuración, tendrás que copiar el código que hay en el cuadro gris de la derecha y pegarlo en tu página web. Con eso estará todo preparado para funcionar.

Otra cosa que quería comentar antes de empezar, es que hay un par de opciones (tres en realidad) que son comunes a los cuatro tipos de botones y para no repetirme, voy a comentarlas primero:

Botón grande: Esto afecta al aspecto. Puedes elegir entre botón pequeño o grande, si lo marcas el botón será visiblemente mayor.
Deshabilitar la personalización de Twitter: Sobre esto, sólo puedo decir que Twitter obtiene información de las cuentas que sigues, los retweets y los favoritos, para poder hacer recomendaciones en base a tus preferencias. Puedes deshabilitar esto aquí, pero sinceramente no me queda claro qué hace exactamente. Si alguien lo tiene claro, le agradeceré que me lo diga en los comentarios.
Idioma: Esto no necesita mucha explicación supongo. Es el idioma del texto del botón, aunque puedes dejarlo en automático que probablemente sea lo mejor.

Bien, y ahora vamos a ver los cuatro botones uno a uno.

Botón Compartir un Enlace

Este es el más simple y quizás el más útil. Se trata de un botón que sirve para compartir en Twitter un enlace, y suele utilizarse para compartir el enlace a la página en la que se encuentra el usuario. Para incluirlo en tu página web puedes usar el configurador que hay en la sección de Botones de Twitter – Compartir enlace. Las cosas que puedes personalizar son las siguientes:

Compartir URL: Aquí puedes elegir entre usar la URL de la página en la que se encuentre el botón o escribir una URL concreta.
Texto del Tweet: Podemos añadir texto al tweet que se va a usar para compartir el enlace. Este texto puede ser el que tú elijas o bien el título de la página. Ten en cuenta que este texto podrá ser editado por el usuario, así que solamente funciona como sugerencia.
Vía: Sirve para agregar una mención a un usuario, sólo uno. En el tweet aparecerá como «vía @malnuer» por ejemplo.
Recomendar: Los usuarios que agregues aquí, se mostrarán como sugerencia para seguir, después de que el usuario publique el tweet. Puedes poner más de un usuario separándolos con comas.
Etiqueta: Para agregar hashtags. Puedes poner varios separados por comas si quieres y se añadirán al texto del tweet correctamente.

Nota: «Botón grande», «Deshabilitar la personalización de Twitter» e «Idioma» son configuraciones comunes a los cuatro tipos de botones sociales de Twitter y están explicados arriba.

Configuración del botón de compartir enlace en Twitter

Botón Seguir

Este botón sirve para que cuando alguien lo pulse, le aparezca un popup para hacer follow a un usuario en Twitter. En ese popup aparecerá el perfil de dicho usuario para que veas sus datos, sus últimos tweets y lo más importante, el botón para poder seguirle. Para configurar esto puedes usar la página de Botones de Twitter – Seguir. Tendrás que configurar estas cosas:

Usuario: Aquí tienes que poner el nombre de usuario al que quieres que la gente siga. El tuyo seguramente.
Mostrar nombre de usuario: Cuestión estética. Si lo marcas se añadirá el nombre del usuario al botón, muy importante si vas a poner más de un botón de seguir para distintas personas.

Configuración del botón seguir en Twitter

Botón Etiqueta

Este botón sirve para poder publicar un tweet con una determinada etiqueta (hashtag) determinada. Realmente es muy similar al de compartir un enlace, solo que aquí el enlace es opcional y el hastag obligatorio (al contrario que con el enlace). Otra diferencia es que el texto del botón dice claramente que el objetivo es twittear con un determinado hashtag. Puedes configurarlo desde aquí Botones de Twitter – Etiqueta, y tienes estas opciones:

Etiqueta: Este es el hashtag con el que queremos que el usuario twittee.
Texto del Tweet: Este texto es opcional y se incluirá en el tweet, aunque el usuario siempre tendrá la última palabra sobre lo que publica.
Recomendar: Cuando el usuario publique el tweet, le aparecerán estas sugerencias de cuentas para seguir.
URL: Esta URL es opcional y básicamente es una dirección de página web que queremos incluir en el tweet.

Configuración del botón etiqueta en Twitter

Botón Mencionar

Este es el último tipo de botón de Twitter que podemos configurar desde Botones de Twitter – Mencionar. Consiste en dar la opción al usuario de publicar un tweet que incluya una mención a un cierto usuario. Puedes editar estas cosas:

Twittear a: Nombre de usuario al que quieres mencionar en el tweet.
Texto del Tweet: Este texto funciona como sugerencia. Aparecerá como texto junto a la mención, pero el usuario podrá cambiarlo si quisiese.
Recomendar: Cuando el usuario que va a hacer la mención, publique el tweet, le aparecerán algunas sugerencias de cuentas a las que seguir. Aquí las puedes poner si quieres.

Configuración del botón mencionar en Twitter

Usar el Web Intent de Twitter

Igual que Facebook tenía el «sharer» para poder compartir cosas sin tener que usar plugins, Twitter también tiene algo parecido que se llama Web Intent, y funciona casi igual. Se utiliza una URL especial a la que se le añaden parámetros con los datos necesarios. Esta es la URL:

https://twitter.com/intent/tweet

Si abres esa dirección verás que te lleva a una página de Twitter que te permite escribir un tweet, pero si no añades nada más, el cuadro de texto para publicar estará vacío. Podemos poner algunas cosas como sugerencia, con estas opciones:

text: Texto que se incluirá en el cuadro de texto.
url: Una URL que queremos compartir.
hashtags: Etiquetas que se añadirán al final del contenido.
via: Nombre de usuario que queremos incluir como mención.
related: Cuentas que se ofrecerán como sugerencia después de publicar.
in-reply-to: Identificador de un tweet al que queremos responder.

Así que por ejemplo podemos crear un enlace para publicar un tweet con el texto «Hola mundo» y el hashtag #saludos. Esto sería lo que tenemos que incluir en nuestra web:

<a href="https://twitter.com/intent/tweet?text=Hola+mundo&hashtags=saludos">Publicar un tweet de saludo</a>

Nota: en azul he marcado la URL del web intent de Twitter y en naranja la configuración.

Fíjate que las opciones van detrás de una interrogación (es decir que son datos de tipo GET). Cada posible opción está seguida de un signo igual y después su valor, donde los espacios se sustituyen por signos más (texto codificado para URL). Para separar las variables se usa el símbolo et o ampersand… ¿mucho lío? pues sí. Y al fin y al cabo, puedes hacer lo mismo con los botones sociales. Así que para no complicarte mucho, te recomiendo que uses los botones que hemos visto al principio del artículo, pero sobre todo porque… ¡los botones usan el web intent!

Así es, si pulsas en el botón de compartir enlace por ejemplo, se abrirá el popup para publicar, y verás que la URL no es ni más ni menos que https://twitter.com/intent/tweet. En definitiva, si sabes bien lo que haces puedes manejar los intents tú mismo (aquí tienes más información), pero si quieres comodidad, usa el configurador de botones sociales de Twitter, que viene a ser lo mismo.

Nota: Realmente, con los intents se pueden hacer más cosas además de publicar un tweet, aquí hay más información sobre los Web Intents de Twitter.

Deja tus comentarios.