Botón de Retweet en Blogger (Topsy)

por

Ayer me encontré en el blog de @elquique con un botón muy simpático para hacer RT de los post, él lo agregó con un plugin de WordPress pero yo en Blogger utilicé el siguiente código.

El botón es un servicio ofrecido por Topsy y en su página se pueden encontrar todos los parámetros para configurarlo, el código a utilizar es el siguiente:

<div style=’float: right;’>
<script type=’text/javascript’>
var topsy_nick = ‘tu_usuario_de_twitter‘;
var topsy_style = ‘small’;
var topsy_url = ‘<data:post.url/>’;
var topsy_title = ‘<data:post.title/>’;
var topsy_theme = ‘brick-red’;
</script><script src=’http://cdn.topsy.com/button.js’ type=’text/javascript’/></div>

Simplemente se trata de un script dentro de un div para posicionarlo sobre la derecha de los post. El código lo agregue después de post-footer-line post-footer-line-1 para que quedara en la parte inferior de los post.

Charlando con JMiur descubrí un problema, con este código el script se cargará varias veces en la página principal, según la cantidad de post. Esto no es lo ideal, lo ideal sería tener variables globales dentro del <head> para no repetir los scripts, sin embargo estuve realizando pruebas y no logré hacerlo funcionar.

La solución a esto es aplicar las condicionales de Blogger para ocultar el código en la Home y mostrarlo sólo en las páginas individuales. Es lo que estoy aplicando en estos momentos.

El código final quedaría así, el botón sólo aparece en los post individuales:

<b:if cond=’data:blog.pageType == «item»‘>
<div style=’float: right;’>
<script type=’text/javascript’>
var topsy_nick = ‘tu_usuario_de_twitter‘;
var topsy_style = ‘small’;
var topsy_url = ‘<data:post.url/>’;
var topsy_title = ‘<data:post.title/>’;
var topsy_theme = ‘brick-red’;
</script><script src=’http://cdn.topsy.com/button.js’ type=’text/javascript’/></div>
</b:if>

Hay más colores disponibles y variables, en la página de Topsy podrás encontrar más información. Por ejemplo, si se cambia «small» por «big» se muestra un botón más grande.

Por último mencionar que si deseas agregar otros botones sociales a Blogger, Gem@ tiene un post muy bueno al respecto. Siguiendo sus consejos agregué los botones de Facebook y Twitter que se ven aquí abajo.

9 comentarios en «Botón de Retweet en Blogger (Topsy)»

  2. Hola aliCarreon, yo si lo veo, en la parte inferior derecha pero sólo cuando entras a los post individuales.

    Eso sucede por las condicionales, las líneas que aparecen de color naranja en el post.

    Responder

  4. Este me gusta más que el de Tweetmeme, porque aquel presenta para IE un fondo blanco en el botón inevitable. Bueno, sí es evitable ¡no usando IE! :)

    Responder

  5. ¡Ok! ¡Muchas gracias! ¡Estamos en contacto!
    ¡Buena página amigo! Ya sabré donde puedo recurrir!
    ¡Éxito!
    ¡Saludos desde México!

    Responder

  6. Hola, estuve viendo el código de tu blog y parece que ese no es el problema, no noté nada extraño.

    Pero parece que falla cuando el botón se muestra en la página principal del sitio, en los post individuales lo veo bien, es decir, no muestra 4 twitts siempre.

    Yo lo cambiaría para mostrarlo sólo en los post individuales del blog, para eso hay que usar el segundo código publicado aquí. Se usan las condicionales, para saber cuando se está en un post o no. Así que simplemente deberías agregar las siguientes líneas:

    <b:if cond='data:blog.pageType == "item"'>

    …Codigo Topsy…

    </b:if>

    Responder

  7. ¡Hey! ¡Hola! Leí el tuturial y me sirvió bastante, sin embargo hay una parte del código que quiero modificar pero simplemente no puedo. La verdad se muy poco de html. Me guío en los ejemplos que encuentro en la red

    Lo que busco con el botón Topsy es que el conteó sea llevado por cada post, no de manera global (todos los post tienen 4 retweets, cuando en realidad cada post ha tenido distinto número de publicaciones en Twitter), ¿Como logro hacerlo de manera individual?

    Además, ¿Se puede cambiar el proveedor de servicio de shorting URL?

    Ya llevo varios días con ello, pero no encuentro soluciones (además que mi nivel html es muy pobre…)

    ¿Podrías ayudarme?

    De antemano, ¡Gracias!

    PD. Te paso el link de mi blog:
    http://rompekraneoz.blogspot.com

    Responder

  8. Se puede, pero el código button.js se va a repetir. Si logro hacerlo funcionar como global lo publicaré, yo también quiero que salga en la principal :)

    Responder

Deja un comentario