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

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 (https://twitter.com/about/resources/buttons#tweet)

Botón Compartir Twitter

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:

Alemán de Árabe ar
Catalán ca Checo cs
Chino tradicional zh-tw Chino simplificado zh-cn
Coreano ko Francés fr
Danés da Español es
Euskera eu Finés fi
Filipino fil Francés fr
Griego el Hebreo he
Hindi hi Húngaro hu
Indonesio id Italiano it
Japonés ja Malayo msa
Neerlandés nl Noruego no
Persa fa Polaco pl
Portugués pt Ruso ru
Sueco sv Tailandés th
Turco tr Ucraniano uk
Urdu ur

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 (https://twitter.com/about/resources/buttons#follow)

Botón Seguir Twitter

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 (https://twitter.com/about/resources/buttons#hashtag)

Botón Etiquetar Twitter

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 (https://twitter.com/about/resources/buttons#mention)

Botón Mencionar Twitter

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.

¿Te ha gustado este artículo?
Si es así nos encantaría que nos dejaras un comentario o quizá prefieras suscribirte a nuestro RSS y disfrutar de nuestro contenido en tu lector de feeds favorito. ¡Muchas gracias!.
The following two tabs change content below.
Marketing de Cine
Marketing de Cine es una iniciativa de Belén Bernuy y Gloria Bretones. Después de varios años trabajando juntas necesitábamos un espacio donde poder compartir todo lo vivido y aprendido dentro del mundo del cine y del marketing online.Como socias compartimos el día a día en Centuria Films, la productora audiovisual, y ArteGB, la agencia de comunicación online. Internet nos ha dado mucho a ambas y nos gustaría compartirlo.
Categorizado como Diseño Web, Formación, Marketing, Programación Web, Social Media, Tecnología y etiquetado como , , , , , , , , , , , , , , , , . Guardar en favoritos el post.

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

  1. BRGypunto dice:

    Gracias Isabel …que razon tienes!!, hasta el “gorro” de tanto cambio constante,…esperando los siguientes 🙂
    BRGypunto

  2. Javier dice:

    Primero que todo, muchas gracias por este fantastico post.

    Lo segundo, esperemos que esto se consolide algún día, :).

    ¡Un saludo!

  3. Pingback: Guía de programación de Botones Sociales I: Twitter | Marketing de ... | Programación Web desde cero | Scoop.it

  4. Pingback: Guía de programación de Botones Sociales (II): Facebook | Marketing de Cine

  5. Pingback: Guía de programación de Botones Sociales (III): Pinterest | Marketing de Cine

  6. Pingback: Guía de programación de Botones Sociales (I): Twitter | El Mundo del Diseño Gráfico | Scoop.it

  7. Pingback: Guía de programación de Botones Sociales (IV): Google | Marketing de Cine

  8. avioncitos dice:

    Primero de todo gracias por la info tan detallada, al final mas sencillo que en la pagina de desarrolladores.
    Sabes si se puede evitar que en el botón de twittear se modifique el texto de la entrada cuando va a realizar la publicación, es que necesito publicar una puntuación de un juego vía twitter pero que el jugador no pueda modificar dicha puntuación.

    Muchas gracias por todo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *