Botones oficiales de Twitter

Ya hace días se venían haciendo eco algunos blogs de la presentación de unos nuevos botones oficiales de Twitter prevista para esta semana.

Ayer mismo pude comprobar que ya están disponibles para todos y que podemos obtener su código desde nuestra página de Twitter.

[1] Desde nuestra página de inicio en Twitter y al pie de la misma, pinchamos en el enlace que dice "Extras".

[2] Accedemos entonces a la página "Extras de Twitter", donde vemos que aparece una nueva opción llamada "Botón de Twittear". Pinchamos ahí.

[3] Ahí vemos los modelos disponibles de botones (Cuenta vertical, cuenta horizontal y sin contador)y una serie de opciones que podemos utilizar.

[4] Una vez marcado el que vamos a utilizar, vemos debajo una vista previa y el código para copiar y pegar en nuestro blog.


Como añadir el botón a nuestras entradas

Vamos a ver como añadir el botón debajo del título de cada entrada y a la derecha o izquierda del texto del post.
En primer lugar añadiremos una condicional para que el botón solo sea visible al acceder a la página de entrada, ya que de esta manera será la url de la entrada la que se enviará a Twitter y no la url de nuestro blog.

[1] Vamos a Edición HTML en nuestro panel y marcamos la opción de "Expandir las plantillas de artilugios" para localizar esta etiqueta en el código de la plantilla:

<div class='post-body entry-content'>

[2] Justo debajo añadimos el código para el botón de esta manera:

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

Ejemplo:

Notas:

Para mostrar el botón a la izquierda de la entrada, cambiamos donde dice en el código float: right; margin-left: 5px; por float: left; margin-right: 5px;