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

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