Guía de programación de Botones Sociales (I): Twitter

Hoy comenzamos con algo de lo más tonto, pero de lo más esencial. Y es que, cansada de ver cómo los señores de Twitter, Facebook y compañía nos cambian los nombres, códigos y hasta ubicaciones de los botones sociales, he decidido hacer un recopilatorio actualizado de todos estos «monstruitos» que a veces a los diseñadores y programadores nos hacen perder tanto el tiempo.

Y para ello comenzamos con Twitter. Podéis encontrar todos los botones que esta red social pone a vuestra disposición aquí. Sin embargo, iremos uno por uno. Para empezar, decir que el script es siempre el mismo para todos los botones:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=»//platform.twitter.com/widgets.js»;fjs.parentNode.insertBefore(js,fjs);}}(document,»script»,»twitter-wjs»);</script>

Es el código HTML el que nos va a permitir modificar tanto diseño como funcionalidad de cada botón. Empecemos…

1. Botón Compartir )

Este botón está destinado a compartir contenido de todo tipo, ya sea un post, una imagen, una url, etc. Su código HTML es el siguiente:

<a href=»https://twitter.com/share» class=»twitter-share-button» data-url=»URL» data-text=»TITULO» data-via=»USUARIO DE TWITTER» data-related=»USUARIO DE TWITTER» data-hashtags=»HASTAG SIN #» data-lang=»IDIOMA» data-size=»large» data-count=»none» data-dnt=»false»>Twittear</a>

Y en color están indicadas las opciones que podemos variar:

data-url: Este atributo es opcional. Si lo indicamos, compartiremos la URL especificada, si no, aquella en la que se encuentre el botón.

data-text: Al igual que el anterior, es también un tributo opcional. Si no lo especificamos, el botón tomará por defecto el título de la página.

data-via: También opcional, este atributo indica el usuario de Twitter a través de cual se va a compartir el contenido.

data-related: Opcional, indica el usuario de Twitter que se va a recomendar al compartir el contenido.

data-hashtags: Opcional, indica el hashtag que aparecerá al compartir el contenido.

data-lang: También opcional, este atributo indica el idioma en que aparecerá el botón. Si no se especifica, el idioma por defecto es el inglés. Este atributo es aplicable a todos los botones de Twitter, y los valores para los diferentes idiomas se enumeran a continuación:

data-size: Este atributo, opcional, sólo es necesario indicarlo si queremos que el botón sea de mayor tamaño, en cuyo caso su valor asociado será large.

data-count: Como el anterior, sólo hace falta colocar este atributo si queremos evitar que aparezca el count box, el cual indica el número de personas que han compartido ese contenido. En este caso, el valor asociado será none.

data-dnt: Al igual que los dos atributos anteriores, sólo es necesario indicarlo para deshabilitar la personalización de Twitter, siendo false el valor asociado. Cuando dejemos habilitada dicha personalización, la red social se basará en preferencias de usuarios comunes, páginas web visitadas desde el propio Twitter y widgets que integran muchos sitios web para conocer qué cuentas suelen seguir ciertos usuarios y recomendarlas a otros con las mismas preferencias.

2. Botón Seguir ()

Este botón social tiene como objetivo permitir que los visitantes de una web o blog puedan seguir a un determinado usuario sin necesidad de entrar en Twitter.

<a href=»https://twitter.com/CastilTour» class=»twitter-follow-button» data-show-screen-name=»false»>Seguir</a>

Además de los atributos ya explicados en el botón anterior data-lang, data-size,
data-count y data-dnt existe un quinto atributo opcional que podemos emplear con el botón seguir, data- show-screen-name, sólo necesario si queremos que el botón no muestre el nombre del usuario al que se va a seguir, en cuyo caso su valor asociado será false.

3. Botón Etiquetar ()

Este botón es similar al primero, Twittear, con la diferencia de que permite etiquetar el tweet con un determinado hashtag.

<a href=»https://twitter.com/intent/tweet?button_hashtag=HASHTAG&text=TEXTO» class=»twitter-hashtag-button» data-related=»CastilTour»>Tweet #Historias%20de%20Twitter</a>

Además de los atributos comunes a los dos botones anteriores, data-url, data-lang, data-size, data-count y data-dnt, aquí la clave está en los atributos con los que cuenta la url que hace referencia al botón:

button_hashtag: Este atributo indica el hashtag con el que se etiquetará dicho contenido. Como en cualquier url, deberemos recordar que los espacios deben ser sustituidos por el símbolo del porcentaje (%). Ejemplo: «HASHTAG%DE%PRUEBA».

text: Texto por defecto que aparecerá en el tweet. Como en el anterior, los espacios se sustituirán por %. Ejemplo: «TEXTO%DE%PRUEBA».

4. Botón Mencionar ()

Este último botón nos permite twittear lo que queramos mencionando a un usuario concreto.

<a href=»https://twitter.com/intent/tweet?screen_name=CastilTour&text=HOLA » class=»twitter-mention-button»>Tweet to @CastilTour</a>

También son comunes a este botón los atributos data-url, data-lang, data-size, data-count, data-related y data-dnt, así como el elemento de la propia url text, pero además nos encontramos con otro elemento dentro de la url, screen_name, que hace referencia al usuario de Twitter al que se va a mencionar.

Y hasta aquí llegamos hoy. Esperamos que os haya sido útil. No os perdáis, próximamente, la segunda parte, con un recopilatorio de los botones sociales de Facebook.