How To: Crear el Tweet button en un iframe
Este será un corto post, de eso que suelo hacer cuando descubro como hacer algo nuevo e interesante.
Justamente ayer estaba buscando como poner el botón oficial de twitter en mi blog, de esos que usan para compartir los posts que uno pública, la opción que encontré inmediatamente fue hacerlo mediante el “creador” de botones oficial, el Tweet Button, por desgracia no es lo que buscaba, te dan un pequeño código HTML que incluye un enlace y un script en javascript para embeberlo directamente en el sitio. Estas opciones no suelen gustarme siempre busco la opción menos intrusiva para mi sitio, osea aquella donde no me toque poner aquí y allá scripts, así que decidí buscar la documentación y me encontré con la fabulosa noticia, de que twitter permite embeber este botón usando un iframe, así que les mostraré que código tienen que poner en su sitio y como modificarlo facilmente.
Antes de empezar estos parámetros los deben tener muy en cuenta:
| Query String Parameter | Description |
|---|---|
url |
URL of the page to share |
via |
Screen name of the user to attribute the Tweet to |
text |
Default Tweet text |
related |
Related accounts |
count |
Count box position |
lang |
The language for the Tweet Button |
counturl |
The URL to which your shared URL resolves to |
El siguiente es el código del iframe básico que con el que empezamos a crear nuestro botón:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>Ahora, lo siguiente es empezar a utilizar los parámetros que mostré anteriormente.
No voy a explicar cada parámetro, me parece que la descripción es breve, sencilla y con un inglés básico es fácil de entender, así que les mostraré como quedó mi iframe:
<iframe allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-horizontal" tabindex="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php the_permalink(); ?>&via=geektheplanet&text=<?php the_title(); ?>&related=geektheplanet&count=horizontal&lang=es" style="width: 130px; height: 30px;"></iframe>El código del iframe es dinámico y funciona perfectamente para WordPress, si quieren usarlo en su blog, sólo deben pegar el anterior código en el archivo single.php de su theme, deben modificar los parámetros via y related y asociarlos a su cuenta de twitter, también pueden modificar el ancho y el alto del iframe.
Si tienen alguna duda, pues con gusto la contestaré.
Leer más: Tweet Button developers
About the Author
Angelfire Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)
Related Posts
Twitter considera poner el límite de sus tweets a 10000 caracteres →
Twitter eliminó la restricción de los 140 caracteres en los mensajes directos (DM) →
Twitter introduce los #StarWarsEmojis →
