Geek the Planet


How To no image

Published on Septiembre 18th, 2010 | by Angelfire

0

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

Tags: , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



Comments are closed.

Back to Top ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa