Blog and Web

Botón para compartir tus artículos en Twitter

Twitter día con día gana terreno y es uno de los servicios de mayor crecimiento en internet. Algo muy común que puede encontrarse en Twitter, son enlaces a artículos que fueron interesantes para quien los publica y quiere compartirlos. Así como existen botones para compartir tus anotaciones en varios sitios sociales, es posible agregar un botón para compartirlas desde Twitter.

A continuación se explica como agregar un botón para WordPress y Blogger, lo de mayor relevancia es entender la construcción del enlace para así adaptarlo y personalizarlo. El resultado en ambos caso será un enlace que lleva al usuario a Twitter con un texto listo para publicar, algo como:

Leyendo http://blogandweb.com/web-20/twitter-icons/ en Blog and Web

Para WordPress:

El proceso varia de acuerdo a la forma en que ya muestras otros iconos a servicios sociales, sin embargo, un proceso general podrías ser como sigue:

  1. Busca un icono para Twitter.
  2. Entra al archivo single.php del tema que estas usando.
  3. Sigue el esquema HTML con que se muestran actualmente tus marcadores sociales, puede ser por medio de una lista de elementos, una imagen enlazada o un texto enlazado.

    Como texto:

    <a href="http://twitter.com/home?status=Leyendo <?php the_permalink(); ?> en <?php bloginfo('name'); ?>" title="Comp&aacute;rtelo en Twitter" class="wptwitter">
    	Twitter
    </a>

    Cómo imagen:

    <a href="http://twitter.com/home?status=Leyendo <?php the_permalink(); ?> en <?php bloginfo('name'); ?>" title="Comp&aacute;rtelo en Twitter" class="wptwitter">
    	<img src="http://tublogurl.com/twitter.png" alt="Twitter icon"/>
    </a>

    Dónde hay que cambiar la URL de la imagen, por la url de nuestro icono.

  4. Dar estilo. Ya sea como enlace o texto, a partir de una clase es posible darle cualquier aspecto al icono. Por ejemplo, dando estilos a las siguientes clases:
    a.wptwitter {}
    a.wptwitter img {}

    Aquí las posibilidades son enormes, así que ya depende mucho del conocimiento y gusto de cada quien.

Para Blogger:

El proceso para Blogger es bastante similar.

  1. Busca un icono para Twitter.
  2. Ve a la pestaña “Diseño” y después a la opción Edición HTML.
  3. Sigue el esquema HTML con que se muestran actualmente tus marcadores sociales, que pueden ser elementos de lista, link de texto o de imagen. Sea que ya tengas otros iconos o no, puedes colocar el enlace de Twitter justo después de:
    <p class='post-footer-line post-footer-line-3'>

    Como texto el link se escribe de la siguiente forma:

    <a expr:href='"http://twitter.com/home?status=Leyendo " + data:post.url + " en " + data:blog.title' class="btwitter" title="Compartelo en Twitter">
    	Twitter
    </a>

    Como imagen:

    <a expr:href='"http://twitter.com/home?status=Leyendo " + data:post.url + " en " + data:blog.title' class="btwitter" title="Compartelo en Twitter">
    	<img src="http://sitio-de-alojamiento.com/twitter.png" alt="Twitter icon"/>
    </a>

    Dónde hay que cambiar la URL de la imagen, por la url de nuestro icono hospedado en algún servicio externo como Phtobucket o Imageshack.

  4. Igualmente es posible darle estilos al enlace para que se acople al diseño o a la lista de marcadores si ya existe:
    a.btwitter {}
    a.btwitter img {}