Insertar Tweet Button

Utilizar Tweet Button es muy sencillo, para ello tienes que editar el código html de la página donde deseas mostrar el botón e insertar las siguientes líneas.

1
2

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Con lo cual obtendremos el siguiente resultado:

Tweet

Utilizar el Generador de Tweet Button

Tweet Button tiene parámetros adicionales que te permitirán adaptarlo a tus necesidades, para ello Twitter ha creado Tweet Button Goodies Page, un Generador que te permite configurar todos los parámetros disponibles y al final generará el código necesario para copiar y pegar en tu web.

Utilizar WP-TweetButton Plus para insertarlo en WordPress

WP-TweetButton Plus es plugin para WordPress que te permitirá incluir Tweet Button en los posts de tu blog sin necesidad de editar tu template, además cuenta con un panel de configuración muy útil para configurar el botón y adaptarlo a tus necesidades.

Tweet

Activar Botones para Compartir

Si deseas activar los botones para compartir debes acceder a tu panel de Blogger, luego vas a editar el diseño de tu tema mediante: Diseño > Elementos de la página.

Seleccionas “Editar” las entradas del blog, en donde tendrás todas las opciones que se pueden habilitar para los posts, donde hay una opción llamada Mostrar botones para compartir.

Una vez habilitado esta opción se mostrarán 5 botones para compartir el contenido de blog:

• Enviar por correo electrónico
• Escribe un blog
• Compartir con Twitter
• Compartir con Facebook
• Compartir con Google Buzz

No aparecen los botones “Mostrar botones para compartir”?

Si estas utilizando un tema que no ha sido creado por Blogger, es probable que los botones no aparezcan, esto es por que estos temas no tienen incluido la etiqueta para mostrar estos botones. Para resolver este inconveniente debes editar el código de tu tema en Diseño > Edición de HTML.

En el código debes buscar el elemento includable que se encarga de mostrar el contenido del post:

1
2
3

<b:includable id='post' var='post'>
...
</b>

Dentro de este tag debes incluir el siguiente código, que es el encargado de mostrar los botones para compartir. Debes colocarlo en donde prefieras que se muestren los botones, generalmente luego del botón de edición.

1
2
3
4
5
6
7

<b:includable id='post' var='post'>
...
   <!-- share buttons -->
   <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
   </div>
</b>

Pueden ver estos botones habilitados en nuestro blog de ejemplo: http://2webfacil.blogspot.com.

Mas Información

• Blogger Buzz: New Share Buttons
• Los botones para compartir de Blogger

Tweet

Como crear tu botón “Follow Me”
El primer paso es acceder al servicio en Twitter “Follow” Badge en donde puedes configurar los siguientes parámetros.

• Twitter account: el nombre de tu cuenta de Twitter.
• Label: es el texto que aparecerá en el botón.
• Color: es el color de fondo del botón.
• Side: puedes elegir si el botón se muestra a la derecha o izquierda.
• From top: es la separación de la parte superior.

Luego de configurar estos parámetros hacen click en el botón “Update Code” el cual generará un codigo Javascript de la siguiente forma:

1
2
3
4
5
6
7
8
9

<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'><!--
tfb.account = '2webfacil';
tfb.label = 'follow-us';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--></script>

Esto código debes colocarlo en el código fuente de tu página o blog, debes colocarlo antes de la etiqueta </body>.

Tweet

Themeleon te permite configurar una variedad de parámetros como:

• Se pueden utilizar patrones a los fondos.
• Puedes escoger entre diferentes templates de patrones para el fondo.
• Permite cambiar los colores de los patrones seleccionados
• Puedes utilizar una imagen como una fotografía como fondo.
• Puedes cambiar el colores de los textos, enlaces, fondo, sidebar fácilmente.
• Cuenta con una selección de paleta de colores predefinidas.
• Para aplicarlo en tu cuenta Twitter debes iniciar sesión y lo aplicará automáticamente.
• Todos los cambios se pre-visualizarán automáticamente para que puedes ver el resultado.

En definitiva un herramienta realmente productiva con la cual pueden lograr un aspecto atractivo para su página de Twitter.

Tweet

Pueden encontrar pack de iconos con diferentes temas y estilos entre los cuales encontrarás uno que se adapte a tus necesidades y sobre todo gratuitos. Ahora si conoces un pack de iconos puedes envíarlos para que sean listados en está pagina.

Tweet

Creando el widget

Para crear el widget primero accedemos a Twitter, luego en la parte inferior seguimos el link Goodies luego la opción Widgets. Luego Seleccionamos la opción Widgets for My Website, finalmente seleccionamos la opción Profile Widget.

Ahora tendremos una pantalla donde podremos configurar las características del widget que deseamos:

• Settings: permite indicar el nombre de usuario de twitter para mostrar los tweets.
• Preferences: para seleccionar la cantidad de tweets a mostrar y si vamos a a mostrar la fecha y los hashtags.
• Appearance: En este tab se seleccionan los colores de los textos y fondos del widget.
• Dimensions: podemos definir las dimensiones del widget o podemos dejar que se asigne automaticamente.

Configuramos el widget según nuestras necesidades dando la apariencia de nuestro web o blog para que se integre correctamente. Una vez generado el widget hacemos click en el botón Finish & Grab Code con lo cual obtendrás un código javascript que podrás incluir en tu web:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#89897c',
      color: '#ffffff'
    },
    tweets: {
      background: '#d8d8c7',
      color: '#55554e',
      links: '#899800'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('2webfacil').start();
</script>

En nuestro hemos seleccionado los colores que tenemos el el blog, hemos seleccionado 5 tweets a mostrar, con lo cual obtenemos el siguiente resultado.

 
 
Hemos obtenido un widget muy vistoso para nuestro web, con esto mostraremos a nuestros visitantes los ultimos tweets de nuestra cuenta y todo ello sin necesidad de tener conocimientos de programación.

Tweet

AddThis
AddThis es una librería Javascript que permite agregar fácilmente los botones para compartir contenido en diferentes sitios. Se puede personalizar y soporta hasta 50 idiomas y soporta mas de 150 servicios como Twitter, Facebook, MySpace entre otros.

Como utilizar AddThis
El uso de AddThis es sencillo para ello accedemos a http://addthis.com en donde seleccionamos que tipo de página tenemos (Blogger, WordPress, MySpace o un Web normal) luego el tipo de botón a utilizar, opcionalmente puedes seleccionar una opción para obtener estadísticas de las visitas para lo cual hay que registrarse y finalmente generamos nuestro botón.

AddThis en tu Website
Si seleccionamos website el código generado será de la siguiente forma, el cual debes colocar en cada página donde desees agregar la opción para compartir.

1
2
3
4

<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4aff590b0be123da"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4aff590b0be123da"></script>
<!-- AddThis Button END -->

AddThis en Blogger
Si utilizas Blogger puedes agregarlo rápidamente a tu sidebar con la opción Install to Sidebar que agregará el código necesario automáticamente. Ahora si deseas agregar la opción en cada post debes editar tu plantilla y agregar el código generado justo después de la etiqueta >div class=’post-footer’<

Guardas tu plantilla y ya tienes instalado esta opción en tu blog. Puedes el ejemplo funcionando en nuestro blog de prueba en: http://2webfacil.blogspot.com

Tweet

Twitter Tools Plugin
Twitter Tools es el plugin mas completo para hacer la integración entre WordPress y Twitter, además de ello viene con un panel de configuración muy completo. Entre las cualidades mas importantes de este plugin podemos mencionar:

• Crear y publicar tweets desde e panel de administración.
• Crear un tweet cada vez que publicas un post.
• Publicar un Tweet directamente del administrador de WordPress.
• Publicar un post en tu blog con todos tus tweets.
• Mostrar tus ultimos tweets en tu sidebar.
• Crear posts con resumenes diarios o semanales de tus tweets.
• Panel de configuración muy completo.
• Soporte para filtros adicionales.

Una vez instalado el plugin, debes colocar tu usuario y clave de Twitter para que se puedan extraer los datos automáticamente. Una vez configurado el plugin en la pantalla de publicar un post aparecerá una nueva opción para enviar directamente el post a Twitter.

Twitter Tools: bit.ly Links
Twitter Tools funciona perfectamente pero no acorta los URLs y ya que Twitter permite solo 140 caracteres, corremos el riesgo que nuestro tweet salga recortado, para ello podemos hacer uso de Twitter Tools: bit.ly Links un plugin complementario que integra el API del servicio de acortamiento bit.ly.

Para hacer uso de este plugin es necesario tener una cuenta en bit.ly con lo cual podremos acortar nuestras URLs gratuitamente y además tendremos estadísticas de visitas a estos enlaces acortados.

Tweet

Hoy en día existen multitud de servicios de acortamiento como el ya clásico TinyURL cada uno de ellos con diferentes características. Si deseas conocer las cualidades y diferencias de estos servicios puedes leer URL Shorteners: Which Shortening Service Should You Use? donde hay una comparativa muy completa.

Bit.ly
He escogido bit.ly por que además de acortar el URL brinda cualidades que lo destacan de los otros como por ejemplo:

• Acortamiento de URLs a 14 caracteres.
• Estadísticas de visitas de los enlaces.
• Tu cuenta propia para ver las estadísticas de tus URLs.
• API completo para integrarlo con tu Web.
• Soporte las URLs personalizables.
• Puedes compartir tus enlaces.
• Es el acortador por defecto de Twitter.
• Bookmarklet para facilitar el acortamiento desde tu browser.
• Tiene un plugin para Firefox con el cual previsualizar los enlaces.

Puedes acortar URLs sin registrarte, pero si te registras en tu cuenta tendrás acceso a todas tus URLs acortadas y podrás ver las estadísticas de acceso,a demás tendrás un API KEY que te permitirá crear aplicaciones que acorten directamente los URLs sin acceder a la página de bit.ly.

Para acceder a las estadísticas del un URL solo es necesario colocar el simbolo mas (+) al final del URL. Veamos un ejemplo de como utilizar este servicio.

1
2
3
4
5
6
7
8

// URL sin acortar
http://www.webdesignerdepot.com/2009/04/50-excellent-corporate-website-designs/
 
// URL acortada 
http://bit.ly/iiI47
 
// Ver datos de Visitas del URL
http://bit.ly/iiI47+

Tweet