EL GADGET QUE NOS ENLAZA A TWITTER

ElektroDanZ llamó mi atención sobre este gadget que había visto revoloteando por una página. Se trata de un pájaro azul, en clara alusión al icono de Twitter, que aparece por la parte superior y sobrevuela tu página según te vas desplazando verticalmente por ella.

Esto ya sería lo suficientemente entretenido como para publicarlo y que algunos os divirtais un poquito instalándolo en vuestra página. Pero lo mejor de todo es lo que hace. Resulta que este pajarraco, además de haceros compañía, es también un enlace a vuestra cuenta de twitter y al mismo tiempo, un boton de retweet. Esto le da un poco más de interés ¿no?

Supongo que a estas alturas de post, ya habreis visto el que he puesto de muestra. Posaros sobre él y vereis cómo se abren dos nuevos enlaces: twitéame y sígueme. Pues hala, ya estais pinchando para verlo funcionando. El propio pájaro, directamente es un enlace a vuestro perfil, pero bueno, queda mono lo de los enlaces que se despliegan.

Por último, si el bicho migratorio este os molesta para la lectura de alguna parte de la entrada, sólo teneis que sacudirle un poco con el puntero, para que cambie de sitio. Qué majo él.

El pack completo del creador (Floern), incluye también un par de utilidades para que al apuntar al pájaro, este reproduzca en un bocadillo tipo cómic, nuestro último twett. Pero eso se va a quedar para usuarios avanzados y con PHP a su alcance. Los de Blogger, hoy por hoy no tenemos fácil el acceso a ese lenguaje, así que nos conformamos con lo que veis.

INSTALACION

Simplemente buscais <data:post.body/> en vuestra plantilla (con artilugios expandidos) y antes de esa variable, insertais la llamada al script que he alojado en Google Code, así como las variables necesarias. Si teneis alguna modificación en vuestra plantilla quizás tengais que usar como referencia <div class='post-body entry-content'>. En este último caso, el código iría detrás.

<b:if cond='data:blog.pageType == "item"'><script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>

<script type='text/javascript'>

var birdSprite=&quot;http://oloblogger.googlecode.com/files/birdsprite.png&quot;;

var targetElems=new  Array(&quot;img&quot;,&quot;hr&quot;,&quot;table&quot;,&quot;td&quot;,&quot;div&quot;,&quot;input&quot;,&quot;textarea&quot;,&quot;button&quot;,&quot;select&quot;,&quot;ul&quot;,&quot;ol&quot;,&quot;li&quot;,&quot;h1&quot;,&quot;h2&quot;,&quot;h3&quot;,&quot;h4&quot;,&quot;p&quot;,&quot;code&quot;,&quot;object&quot;,&quot;a&quot;,&quot;b&quot;,&quot;strong&quot;,&quot;span&quot;);

var twitterAccount = &quot;http://twitter.com/oloman&quot;;

var tweetThisText = &quot;Leyendo: <data:post.url/>&quot;;

tripleflapInit();

</script>

</b:if>

CONFIGURACION

Hay que cambiar el valor de la variable twitterAccount, para poner vuestra propia cuenta. El contenido de tweetThisText será lo que se escriba automáticamente en el status de Twitter al pinchar en twitéame. Ahi también podeis poner lo que querais, aunque sería conveniente conservar &lt,data:post.url/&gt; porque eso hará que también se inserte automáticamente la dirección del post en el que se está. La dirección principal de la web, también podría ser otra alternativa.

Si quitais el condicional y su cierre, el pájaro será visible en todo tipo de páginas y no sólo en las entradas individuales. Aunque en este caso, no respondo de la dirección que se enviará.

OPCIONES

El código puede ser instalado perfectamente en un gadget en lugar de en la plantilla. En este caso, lo de incluir la dirección del post sería inviable porque las variables Blogger no funcionan si no están en la plantilla HTML. Si esto no es problema, sería suficiente con cambiar las comillas simples por dobles y todos los &quot; por comillas simples. Por supuesto, el condicional sobraría.

MODIFICACIONES

Podeis utilizar este mismo artilugio para cualquier otro tipo de enlaces. Esto ya es algo más complicado, porque requiere cambiar los valores de twitterAccount, tweetThisText y para el botón que hace el retweet, la varible tweetthislink que se encuentra en el script:

var tweetthislink="http://twitter.com/home?status="+escape(tweetThisText);

Otra "maldad" que se me ocurre, sería cambiar todas las imágenes del sprite que son las responsables del movimiento del pájaro, por cualquier otro personaje que sea de vuestro agrado. Aunque claro, para esto ya hay que tener algo de mano con el fotochop(SIC).

RECOMENDACIONES

Como siempre, para no quedaros colgados el día menos pensado y para evitar la saturación del lugar dónde está alojado el script y la imagen, conviene que useis vuestro propio alojamiento y sustituyais luego las direcciones de ambos por las vuestras. Para ello, en los siguientes enlaces podeis descargar el fichero tripleflap.js y la imagen birdsprite.png.