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

Características

• Permite la creación de formularios compatibles con multiples navegadores
• Es muy flexible para adaptar a cualquier web con el cambio del ancho del formulario.
• Puedes integrarlo rápidamente con dos líneas de código.
• Cumple con los estándares xHTML.
• Puedes personalizarlo con pocas líneas de código
• Incluye estilos para mensajes de confirmación, error, advertencia.

Como Utilizar Formee

Utilizar Formee es sencillo, lo primero es descargar la ultima versión, en donde encontrarán una carpeta llamada css que contiene los archivos necesarios para su funcionamiento. Luego debes incluir las siguientes líneas en tu archivo HTML.

1
2

<link rel="stylesheet" href="form-structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="form-style.css" type="text/css" media="screen" />

Pueden ver un ejemplo de uso de este framework en: http://www.formee.org/demo/index.htm.

Tweet

Dirección del Feed

Para realizar la versión móvil de nuestro blog utilizaremos el Feed, entonces es necesario reconocer la dirección del Feed de nuestro blog.

Para usuarios de Blogger, si el blog tiene la dirección:
http://2webfacil.blogspot.com/
La dirección del feed sería de la forma:
http://2webfacil.blogspot.com/feeds/posts/default

Para usuarios de WordPress, si la dirección del blog es:
http://2webfacil.com/
La dirección del feed sería de la forma:
http://2webfacil.com/feed/

Método I: Utilizando Google Reader

Una forma de crear una versión optimizada para dispositivos móviles es utilizar la versión móvil de Google Reader, para ello se puede utilizar la siguiente ruta, donde URL-FEED es el URL del feed de tu blog.

1

http://www.google.com/reader/m/view/feed/URL-FEED

Lo siguiente es detectar si el usuario esta accediendo desde un iPhone y redireccionarlo a la nueva versión. Para ello utilizaremos un pequeño Javascript, el cual debemos colocar en el código fuente de nuestro blog antes de la etiqueta </head>.

1
2
3
4
5
6

<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone')!=-1) {
	window.location = "http://www.google.com/reader/m/view/feed/URL-FEED"
}
</script>

Método II: Utilizando el Lector de Feeds de iPhone

Si el iPhone detecta que el contenido al que se accede es un Feed, por defecto utiliza un lector preparado para mostrarse correctamente en dispositivos móviles, por lo cual podemos utilizar directamente la dirección del Feed de nuestro blog. Entonces modificando el código anterior tendríamos:

1
2
3
4
5
6

<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone')!=-1) {
	window.location = "URL-FEED"
}
</script>

No se olviden de reemplazar URL-FEED por el URL de su blog. Además hay que colocar este código antes de la etiqueta </head> de nuestro blog.

Pueden ver el ejemplo funcionando en nuestro blog de pruebas http://2webfacil.com/ si es que acceden utilizando un iPhone.

Tweet

Si publicamos un archivo PDF en nuestra web es necesario que los visitantes tengan instalado el plugin de Adobe Reader para poder visualizar el documento. Para resolver este problema les presento una forma de embeber documentos PDF y que puedan ser visualizados sin necesidad que el usuario tenga Adobe Reader.

Publicando Archivos PDF
Para publicar hacemos uso del visor de archivos PDF de Google Docs, este visualizador tiene herramientas como zoom, navegación entre páginas y la posibilidad de abrir el documento en una ventana nueva. Entonces para mostrar el PDF primero subimos el archivo a nuestro servidor y luego colocamos el siguiente código:

1
2

<iframe src="http://docs.google.com/gview?url=url-del-pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

En donde hemos definido el ancho y alto del visualizador. Entonces si tenemos un archivo PDF en la siguiente dirección: http://2webfacil.com/wp-content/uploads/2009/10/Flash-Player-10.pdf entonces tendríamos nuestro código para publicar el PDF.

1
2

<iframe src="http://docs.google.com/gview?url=http://2webfacil.com/wp-content/uploads/2009/10/Flash-Player-10.pdf&embedded=true" 
style="width:608px; height:500px;"  frameborder="0"></iframe>

Con lo cual obtenemos el resultado mostrado a continuación y como pueden ver se adapta muy bien a nuestra web, todo ello con un par de líneas de código muy sencillas.

Tweet

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.

Tweet

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.

Tweet

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

Tweet

Como utilizar Google Analytics
Lo primero es registrarte de forma gratuita para obtener una cuenta, el siguiente paso es registrar el web para el que deseas hacer el seguimiento, ello lo hacemos accediendo a la opción Add Website Profile la cual nos mostrará una pantalla para ingresar la dirección de nuestro web.

Luego de ello nos llevará a otra pantalla donde se nos muestra un código, el cual es necesario copiar y pegar en todas las paginas que deseamos seguir, este código hay que colocarlo justo antes del tag </html> de nuestras paginas.

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXX-XX");
pageTracker._trackPageview();
} catch(err) {}
</script>

Donde UA-XXXXXX-XX es tu código personal de Google Analytics. Listo, el siguiente paso es esperar pues a partir del momento que colocas el código se irán almacenando los datos de las visitas los cuales podrás visualizar en cualquier momento.

Tweet

Para nuestro formulario de contacto utilizaremos el servicio Kontactr el cual mediante un registro sencillo y sobre todo gratuito nos permitirá obtener un formulario de contacto para nuestro web o blog según sea nuestra necesidad.

Utilizando Kontactr
Una vez registrados en este servicio tendremos las siguientes opciones, Embed Widget – AJAX el cual permite incluir el formulario con validación y envío en AJAX, para es necesario copiar un codigo del tipo:

1
2

<script type="text/javascript"> id = XXXXX; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>

La segunda forma de utilizar es Embed Widget el cual nos brinda el código html del formulario para incluirlo directamente, el cual es de la forma:

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

<form method="post" action="http://kontactr.com/euser.php">
<input name="id" type="hidden" value="XXXXX" />
<table cellpadding="10px" border="0" style="font-size: 13px; font-family: Tahoma, Verdana;">
<tr>
<td align="right">Your Name : </td>
<td><input name="sender_name" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td><input name="sender_email" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td><input name="subject" type="text" style="width: 250px;" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td><textarea rows="10" cols="40" name="message" style="font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td><img src="http://kontactr.com/captcha.php" /> <input type="text" name="captcha_code" style="margin-bottom: 10px; font-size: 13px; padding: 3px; font-family: Tahoma, Verdana;" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>

Podemos observar en este formulario que tenemos los nombres de los campos, los cuales podemos modificarlos para personalizarlos, por ejemplo podríamos tener nuestro formulario en español:

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

<form method="post" action="http://kontactr.com/euser.php">
  <table cellpadding="2px" border="0">
    <tr>
      <td align="right">Nombre: </td>
      <td><input name="sender_name" type="text" style="width:250px;" /></td>
    </tr>
    <tr>
      <td align="right">Email: </td>
      <td><input name="sender_email" type="text" style="width:250px;" /></td>
    </tr>
    <tr>
      <td align="right">Asunto: </td>
      <td><input name="subject" type="text" style="width:250px;" /></td>
    </tr>
    <tr>
      <td align="right" valign="top">Mensaje: </td>
      <td><textarea rows="10" cols="40" name="message" style="width:250px;"></textarea></td>
    </tr>
    <tr>
      <td align="right" valign="middle">Imagen: </td>
      <td><img src="http://kontactr.com/captcha.php" />
        <input type="text" name="captcha_code" style="margin-bottom: 10px; padding: 3px;" /></td>
    </tr>
    <tr>
      <td align="center">&amp;nbsp;</td>
      <td><input name="send" type="submit" id="send" value="Send" style="width: 100px;" />
        <input name="id" type="hidden" value="XXXXX" /></td>
    </tr>
  </table>
</form>

Pueden ver el ejemplo funcionando:

• Formulario de contacto en WordPress
• Formulario de contacto en Blogger

Tweet