Instalar el botón oficial de Twitter en Blogger

boton_twitter Esta semana se dio a conocer por parte de Twitter su línea oficial de botones para compartir, de esos contadores que puedes poner en cualquier blog o sitio web y automáticamente podrás ver el número de veces que se ha twitteado tu post o página web.

En el siguiente tutorial vamos a ver la forma de instalar el botón oficial de Twiitter en nuestro blog de Blogger, usando un truco muy bueno y colcándolo en el cuerpo del mensaje para que sin lugar a dudas los usuarios lo vean y se animen a twittear su post.

Lo primero es ir al sitio especializado de Twitter para ver los botones: http://twitter.com/goodies/tweetbutton

Vamos a ver las opciones de tipo de botón que podemos elegir para insertar en nuestro sitio web.

Una vez que elegimos el tipo de botón cambiamos a la siguiente pestaña, la cual tendremos que elegir si dejamos el título de la página que usa actualmente o un texto personalizado, lo dejamos en la primera opción

Ahora lo que sigue es la dirección que va a enviar en el twit, para eso hay un truco que he usado. La primera opción sería dejar que encontrara la dirección actual, que de hecho si sirve en Blogger, pero también podemos hacer que Blogger esté más cómodo con su API, entonces, en la segunda opción escribimos data: post.url

Ahora el segundo paso es el nombre de usuario que queremos que aparezca, este es un paso opcional pero si tu quieres que tu perfil se mencione o que alguien más aparezca puedes incluirlo sin la @

Ahora basta con copiar el código que nos presentan e ir a Blogger en la pestaña diseño en Edición HTML

Lo podemos pegar expandiendo primero nuestra plantilla de artilugios. Después de eso vamos a bucar el siguiente texto <div class='post-body entry-content'> y justo debajo de ese texto vamos a añadir el otro que sigue:

<b:if cond='data:blog.pageType == "item"'>
<div style='display: inline; float: right; margin-left: 5px;'>
AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON
</div>
</b:if>

Esto hará que el botón se coloque en el texto del post, pero aún hay que hacer otra cosa, tenemos que agregar un expr: antes de data-text y dara-url, como en la imagen.

Y si siguieron los pasos adecuadamente tendremos un resultado como este:

Aclaraciones finales

Es posible que lleguen a tener algún conflicto con el botón en caso de que por ejemplo ya hayan personalizado con estilos css sus posts, o tengan imágenes que ocupen todo el ancho del mismo, entonces puede que el botón no se vea bien, o salga desfasado o por arriba del contenido. Si les sucede eso pueden modificar el estilo: