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>.

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.

BlogPress
BlogPress es una aplicación que permite administrar blogs de diferentes plataformas como: WordPress, Blogger, Movable Type, TypePad, LiveJournal entro otros. Tiene un costo de $US 2.99. BlogPress: Blogger Edition es una versión reducida de BlogPress con soporte para Blogger / BlogSpot y completamente gratuito. Esta herramienta nos permitirá.

• Administrar cualquier blog de Blogger.
• Tiene un mini-editor WYSIWYG para redactar tus posts.
• Permite incluir fotos en cualquier parte de tu post sin usar codigo html.
• Puedes incluir fotos desde la librería o tomarlas directamente.
• Puedes incluir y subir las fotos que quieras. Las fotos se subiran a tu cuenta de Picasa.
• Soporte para tags, categorias, post publicos y borradores.
• Puedes administrar multiples blogs, editar y eliminar posts.
• Puedes configurar tu firma para incluirla al final de cada post.

BlogPress Lite, es la aplicación ideal para publicar posts desde el iPhone o iPod Touch, tiene una interfaz muy bien lograda y con todas las funcionalidades necesarias para administrar nuestro blog. Nosotros hemos hecho nuestras pruebas y puedes ver un post redactado desde el iPhone en nuestro blog de prueba: http://2webfacil.blogspot.com/2009/10/publicando-en-blogger-desde-iphone.html

Sintaxis del título en una Página
El titulo en una página se encuentra encerrado entre los tags <title> los cuales se ubican entre los tags <head> de nuestro HTML, entonces la sintaxis sería de la forma:

1

<title>Titulo de tu Web</title>

Observaciones
Es recomendable tener títulos diferentes por cada página, de esta manera los buscadores las reconocerán como páginas diferentes. Este es un error común por lo cual los buscadores solo devuelven un resultado para nuestra página obviando loas demás paginas.

Otro punto a tener en cuenta es no dejar paginas con titulo vacío o con los títulos por defecto como “Untitled Page 1″, esta muy improbable que los usuarios nos encuentren mediante los buscadores.

Personalizando los títulos en Blogger
Lo que haremos es cambiar los títulos concatenando el nombre de la página con el titulo del blog para las páginas internas y dejando intacto el titulo de la página principal. Entonces buscamos el titulo por defecto de nuestro blog:

1

<title><data:blog.pageTitle/></title>

Ahora lo reemplazamos por el siguiente código que cambiará los títulos para las páginas internas dejando intacto el titulo de la pagina principal.

1
2
3
4
5

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

Este tip sencillo de implementar hará que todos los posts de nuestro blog sean indexados por los buscadores y por lo tanto obtener mayor cantidad de visitas.

Normalmente se deberían agregar un description y keywords por cada página de nuestro blog, pero solo agregaremos los metatags a la página principal de nuestro blog. En las páginas que no tengan metatags los buscadores generarán automáticamente el description basado en el texto de la página.

Código para los Metatags en Blogger
Entonces utilizando la sintaxis condicional en Blogger, tendríamos el siguiente código para mostrar los metatags en el home de nuestro blog. Este código debe ser colocado justo antes del tag </head>.

1
2
3
4

<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='keywords, separados, por, comas' />
<meta name='description' content='Descripcion del sitio web' />
</b:if>

Ejemplo Practico
Entonces para nuestro blog de ejemplo creado en Blogger tendríamos nuestros metatags personalizados con el siguiente código:

1
2
3
4

<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='tips, wordpress, blogger, twitter, html, css' />
<meta name='description' content='Tips, tutoriales, ejemplos y descargas para personalizar tu web.' />
</b:if>

Sencillo pero les ayudará mucho a posicionar su blog en los buscadores.

Creando enlaces básicos
Los enlaces se crean utilizando el tag <a> en donde debemos colocar a donde queremos enlazar y el texto que servirá de enlace. Por ejemplo si deseamos enlazar al buscador Google lo hacemos con el siguiente código:

1

<a href="http://www.google.com">Google</a>

La ruta a la que deseamos enlazar puede ser de dos tipos: absoluta y relativa.

• Absoluta: es decir la ruta completa, sirve para cuando deseamos enlazar sitios externos al nuestro, por ejemplo: http://www.google.com
• Relativa: es la ruta relativa a la página que estamos visitando, se utiliza cuando deseamos enlazar páginas de nuestro mismo dominio, por ejemplo: contacto.php

Respecto a las rutas relativas, vemos que sucede si la página esta en una carpeta diferente a la de nuestro archivo actual:

• folder/pagina.html para cuando la pagina se encuentra en una carpeta llamada folder.
• ../pagina.html para cuando la pagina se encuentra en una carpeta superior.
• /pagina.html cuando el destino se encuentra en el root de nuestro servidor.

Enlazando desde Imagenes
Si deseamos que el enlace sea una imagen en lugar de un texto, debemos colocar el tag <img> con las propiedades de la imagen de la siguiente forma:

1

<a href="contact.php"><img src="btcontact.gif" width="120" height="24" /><a>

Agregando la propiedad target
La propiedad target sirve para indicar donde deseamos abrir el enlace, para ello tenemos las siguiente posibilidades:

• _blank para abrir en enlace en una ventana nueva.
• _parent si usas frames para abrir en el frame padre.
• _top para abrir en el frame principal de la página.
• _self abrir en enlace en la misma ventana.

Entonces si deseamos poner enlaces para que abran en ventana nueva podemos colocarlo de la forma:

1

<a href="http://www.google.com" target="_blank">Google</a>

Como pueden ver es sencillo la creación de enlaces y con ello ayudarán a sus visitantes a desplazarse cómodamente en el contenido de su página web.

Donde Alojar los SWFs
El primer problema radica en que Blogger no permite subir archivo con extensión SWF, entonces es necesario subir estos archivos a un hosting y luego enlazarlos desde nuestro blog. Ahora si no tienes un hosting pagado puedes hacerlo en algunos servicios gratuitos como:

• Google Sites
• FileDen
• Imageshack

En mi caso prefiero Google Sites, pues me puedo crear una cuenta utilizando la misma que tengo para Blogger, es sencilla de utilizar y sin publicidad. Entonces nos registramos y creamos un nuevo site (el cual solo nos servirá para alojar nuestros archivos). Una vez creado el site deben acceder al menú More Actions < Manage Site < Attachments.

En esta opción podremos visualizar todos los archivos que hemos subido y hacer upload de los archivos que deseamos publicar. Entonces para mi ejemplo he subido una archivo llamado 7762.swf tenemos el URL de nuestro archivo:

1

http://sites.google.com/site/2webfacil/7762.swf

Publicando SWF en Blogger
Ahora que ya tenemos el archivo SWF es hora de utilizar código html para mostrar nuestro archivo flash en el blog. Para ello utilizamos el siguiente código:

1
2
3
4
5

<object id="movie" type="application/x-shockwave-flash"
   data="ruta-archivo.swf" width="ancho" height="alto">
   <param name="movie" value="ruta-archivo.swf">
   <param name="wmode" value="transparent" />
</object>

Donde ruta-archivo.swf es la ruta del archivo SWF, ancho y alto las dimensiones del SWF. Luego siguiendo este código podemos mostrar nuestro Flash con el siguiente código:

Asi de sencillo, pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: http://2webfacil.blogspot.com/2009/07/publicar-swf-en-blogger.html.

SyntaxHighlighter 2.0
SyntaxHighlighter es un script creado por Alex Gorbatchev para resaltar código fuente en páginas HTML hecho completamente en Javascript por lo cual la solución ideal para integrarlo con Blogger.

Instalando SyntaxHighlighter
Normalmente se debe alojar este script en nuestros servidores, pero como Blogger no permite subir archivos .js, utilizaremos la versión hosteada que nos brinda SyntaxHighlighter. Entonces lo primero es incluir la librería en nuestro template, para ello editamos nuestro template y colocamos el siguiente código justo antes de la etiqueta <head>.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="'text/javascript'"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="'text/javascript'"></script>
<script type="'text/javascript'"></script>

Donde las dos primeras líneas incluyen las estilos y las dos siguientes los scripts para interpretar el código fuente. En mi caso he incluido la librería shBrushXml.js pues yo deseo publicar solo HTML. Pueden agregar otros lenguajes con solo agregar mas scripts, para una lista detallada de los scripts que puedes incluir pueden leer SyntaxHighlighter/Brushes.

Publicando Código Fuente
Ahora que ya tenemos instalado nuesro script, el siguiente paso es publicar código fuente, para ello debemos colocar el código que deseamos publicar entre los tags <pre> pero además debemos indicar que tipo de código estamos mostrando esto lo hacemos de la forma:

<pre class="brush: xml">
// codigo fuente
< /pre>

Nuevamente en mi caso utilizo XML para indicar que deseo publicar HTML. Entonces si por ejemplo deseamos publicar parte de un formulario en html, podriamos hacerlo de la siguiente forma:

<pre class="brush: xml"><form method="post">
   Nombre: <input id="nombre" name="nombre" type="text" />
   Email: <input id="email" name="email" type="text" />
   <input name="btsend" type="submit" value="Enviar" />
</form>
< /pre>

NOTA
Hay que tener en cuenta que para evitar errores de HTML al momento de publicar el código fuente debemos cambiar los caracteres < y > por sus equivalentes en HTML:

• < por su equivalente &lt;
• > por su equivalente &gt;

Además de ello pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html

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.

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+