unijimpe » Javascript

Seguimiento de descargas con Google Analytics

unijimpe — Mon, 31 Oct 2011 02:48:19 +0000

Google Analytics el popular servicio de estadísticas de visitas ofrece muchas características que permiten conocer al detalle la interacción que tiene el usuario con nuestra web. Una de ellas es hacer el seguimiento de todos los archivos de descargas, esto no se hace de forma automática por lo que hay que agregar un código adicional.

Utilizando Google Analytics

El primer paso es utilizar el código de seguimiento en nuestra página, actualmente se utiliza la versión asincrona la cual se debe colocar justo antes de la etiqueta

En donde UA-XXXXX-X es el código de seguimiento del sitio web el cual lo podemos obtener al registrar un sitio web en nuestra cuenta de Google Analytics.

Seguimiento de descargas con Google Analytics

Si en nuestra página tenemos archivos de descarga, en enlace de descarga es:

href="/files/map.pdf">map

Para que Google Analytics pueda registrar las descargas es necesario agregar una llamada al método _gaq.push en donde el segundo parámetro es un nombre con el cual se identificará la descarga.

href="/files/map.pdf" onClick="_gaq.push(['_trackPageview','/files/map.pdf']);">map

El código es muy sencillo y hay que colocarlo en cada enlace de descarga que se tenga.

Seguimiento de descargas con Google Analytics y Mootools

Si utilizas Mootools en tu página, entonces puedes utilizarlo para agregar el código de seguimiento de manera sencilla. Para ello a todos los enlaces de descarga le agregaremos un estilo llamado download.

href="/files/map.pdf" class="download">map

Luego podemos agregar el siguiente código con el cual se busca todos los enlaces con el estilo download y le agrega la llamada al método _gaq.push.

window.addEvent('load', function() {
$$('.download').addEvent('click',function() {
_gaq.push(['_trackPageview', this.get('href').replace('http://','')]);
});
});

Seguimiento de descargas con Google Analytics y jQuery

Si utilizamos jQuery podríamos modificar el código anterior el cual se convertiría en:

$(document).ready(function () {
$('a.download').click(function() {
_gaq.push(['_trackPageview', $(this).attr('href').replace('http://','')]);
});
});

Seguimiento de descargas automático

Si todas estas formas te parecen complicadas o ya tienes un sitio con muchas páginas y resulta complejo agregar el código de seguimiento, existe una solución llamada Entourage.js el cual agregará de forma automática el código de seguimiento a todos los enlaces que contengan archivos: .pdf, .zip, .doc, .xls, .ppt, .exe, .dmg, .mov, .avi y .mp3.

Para utilizar este método descargan los archivos y copian el archivo entourage.min.js y lo adjuntan a la página donde desean hacer el seguimiento, esto justo antes de colocar el código de Google Analytics.

src="js/entourage.min.js">

Esta pequeña librería con un tamaño de solo 579 bytes y que nos facilita de manera muy sencilla el trabajo de hacer el seguimiento de descargas en nuestra página.

Mas Información

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Como incluir el botón Google +1 en tu Web

unijimpe — Sun, 07 Aug 2011 17:22:52 +0000

El botón Google +1 es una utilidad de Google que permite a los usuarios marcar como recomendado el contenido de un determinado web. Estas recomendaciones serán mostradas en los resultados de Google y deben ser hechas por usuarios con cuentas de Google. De esta manera nuestros visitantes recomendarán a sus amigos nuestro contenido de forma que tendremos una nueva manera de publicitar nuestra web.

Generador de Google +1

Google ofrece una página donde puedes configurar rápidamente el botón +1, obtener el código javascript para colocarlo en tu web. Para ello primero ingresamos a http://www.google.com/webmasters/+1/button/ donde seleccionamos el tamaño del botón (Small, Medium, Standard, Tall) y el idioma para obtener el código javascript.

El primer código lo ubican en donde desean se muestre en botón Google +1, pueden ubicar el varios lugares el código para mostrar varias veces el botón.

</g:plusone>

El siguiente código se pone una sola vez y hay que colocarlo justo antes de la etiqueta . Este código es la forma asincrona de insertar javascript externo en una web, lo cual hace que primero cargue todos los elementos de la pagina y al final recién se carga el javascript necesario para el funcionamiento del botón +1.

type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

También es posible utilizar la forma tradicional para llamar al javascript externo, para ello en lugar del código anterior colocaremos el siguiente código en el header de tu HTML.

type="text/javascript" src="https://apis.google.com/js/plusone.js">

Con lo cual obtenemos el siguiente resultado en nuestra página:

Estas son las configuraciones básicas, ahora si necesitas personalizar o integrar aún mas el botón Google +1, puedes leer la documentación en Adding the +1 button to your site.

Como pueden ver utilizar este nuevo botón es sencillo y ayudará a obtener mas visitas a nuestras paginas mediante las recomendaciones de nuestros visitantes a sus contactos.

Smaller: Interfaz Gráfica para YUI Compressor en MAC

unijimpe — Wed, 22 Jun 2011 04:57:46 +0000

Smaller es una interfaz gráfica para YUI Compressor en Mac, con esta herramienta podremos minificar múltiples archivos Javascript y CSS sin necesidad de utilizar línea de comandos. Es ideal para diseñadores que no necesitan aprender línea de comandos para minificar los archivos.

YUI Compressor

YUI Compressor el una herramienta desarrollada en Java que permite minificar (Elimina espacios en blanco, saltos de linea, reemplaza los nombres de variables por otras mas cortas) archivos Javascript y CSS para de esta forma acelerar la carga de nuestras páginas. Para comprimir o minificar un archivo con YUI Compressor se utiliza la siguiente sintaxis en linea de comandos:

java -jar yuicompressor-2.1.1.jar myfile.js -o myfile-min.js

En donde myfile.js es el archivo que deseamos comprimir. De forma semejante se puede minificar archivos CSS.

Smaller

Si eres diseñador y te es complicado aprender la sintaxis en línea de comandos o deseas acelerar el proceso de minificar archivos, entonces Smaller te sacará de apuros pues es una interfaz gráfica para utilizar YUI Compressor en MAC. Con Smaller puedes arrastrar directamente los archivos hasta la ventana de Smaller y minificarlos rápidamente.

Puedes arrastrar varios archivos a la vez o incluso carpetas completas, además de ello tiene un panel de configuración para controlar al detalle el proceso de minificar archivos. En mi caso el proceso de minificar archivos que me demoraba 5 minutos ahora se ha reducido a 30 segundos!!!

Smaller tiene un costo de US$ 20.00 pero tiene una versión de prueba por 30 días. Adicionalmente se puede obtener un descuento del 25% en el precio para ello solo tienen que seguir en Twitter al creador @chenluois y publicar un tweet con el siguiente texto: Smaller - Batch Minify CSS and JavaScript on the Mac http://smallerapp.com.

Más Información

Depurar Javascript utilizando console.log()

unijimpe — Fri, 13 May 2011 05:14:59 +0000

Tradicionalmente para depurar Javascript se hace uso de la función alert con la cual muestra un texto que contiene el valor de una determinada variable. Pero este método tiene un inconveniente: detiene la ejecución del script hasta que el usuario acepte esta alerta.

Javascript Console

Safari y Firefox con Firebug instalado ofrecen un comando para facilitar la depuración de Javascript, se trata de console el cual imprime el mensaje en el panel de console como se muestra en la imagen que acompaña este artículo.

Existen varios tipos de mensajes que se pueden mostrar:

console.log() muestra un mensaje en la consola.
console.debug() muestra un mensaje y ademas nuestra el número de línea donde se encuentra.
console.warn() muestra un mensaje de alerta con un icono y fondo amarillo para identificarlo.
console.error() muestra un mensaje de error con un icono y fondo en color rojo.

Para mostrar un mensaje se le pasa la cadena de texto que deseamos imprimir:

console.log("-> log");
console.debug('-> debug');
console.warn('-> warm');
console.error('-> error');

También se pueden pasar mas parámetros al estilo de printf y sprintf de PHP, por ejemplo:

var total = 12;
var consulta = "Google";
console.log("Total: %s para '%s'", total, consulta);
// Total: 12 para 'Google'

Utilizando console.log() en otros Navegadores

Ya que console solo esta disponible para Safari y Firefox con Firebug, si pruebas tu desarrollo en Internet Explorer u Opera te generará un error puesta la sentencia console.log() no existe. Para ello se ha propuesto en KeeKim un script para reemplazarlo por opera.portError() en el caso de Opera y alert() en el caso de Internet Explorer.

if (!window.console) {
var log = window.opera ? window.opera.postError : alert;
window.console = { log: function(str) { log(str) } };
}

Más Información

Cached Commons: Librerías Javascript Online para tus Proyectos

unijimpe — Wed, 01 Sep 2010 04:46:36 +0000

Cached Commons es una colección de librerías Javascript que han sido cacheadas, optimizadas y alojadas en el CDN de Github las cuales podemos incluir directamente en nuestros proyectos. Están disponibles librerías como: jQuery, SWFObject, SWFAddress, SyntaxHighlighter, jqPlot entre otros.

Cada librería incluida ha sido minificada, luego se la envía al usuario utilizando compresión GZIP y además con los headers necesarios para ser guardados en el cache del usuario. Esto significa que han sido correctamente optimizados para cargarse rápidamente y por consiguiente acelerar la carga de nuestra web.

Como utilizar Cached Commons

Para utilizar cualquier librería alojada en Cached Commons solo debes copiar la ruta de la librería e incluirla directamente en tu proyecto.

Por ejemplo si deseamos utilizar la librería SWFObject podemos hacerlo mediante:

type="text/javascript" src="http://cachedcommons.org/javascripts/swf/swfobject-2.2.js">

También podemos utilizar la versión minificada:

type="text/javascript" src="http://cachedcommons.org/javascripts/swf/swfobject-2.2-min.js">

Este proyecto es semejante al Google Ajax Libraries API el cual también aloja a las principales librerías javascript, pero tiene la ventaja que aloja a muchas mas librerías y plugins más populares. Si aún así no encuentras la librería que necesitas puedes solicitar qu la agreguen al directorio.

Prevenir el clickjacking con Javascript

unijimpe — Sun, 22 Aug 2010 21:20:54 +0000

Prevenir el clickjacking consiste en evitar que nuestra página sea cargada dentro de otra mediante un frame o iframe, esto para prevenir el robo de contenido así como evitar el uso de nuestra página para forzar a los visitantes a realizar clicks maliciosos. Entonces el objetivo es evitar que nuestra página pueda ser cargada dentro de otra utilizando frames o iframes.

Que es Clickjacking?

El clickjacking consiste en cargar una página dentro de otra utilizando un iframe y sobre ella mostrar otra página oculta con transparencia, de forma tal que si hacemos click en un botón para buscar estaremos indirectamente haciendo click sobre otra página para propósitos maliciosos.

Prevenir Clickjacking - Primer Método

La idea básica para prevenir que nuestra página sea cargada dentro de otra con frames o iframes es verificar la propiedad location del frame actual es igual al del frame superior. Si no son iguales estas propiedades es síntoma que nuestra página se esta cargando dentro de otra por lo tanto redireccionamos al url de nuestra web.

type="text/javascript">
if (top.location != location) top.location = self.location;

El método anterior por lo general es suficiente en la mayoría de los casos, pero existen técnicas para saltarse esta verificación, por ejemplo utilizar iframes anidados o generar errores de Javascript con lo cual se detiene cualquier verificación con javascript adicional. En el artículo Busting frame busting: a study of clickjacking vulnerabilities at popular sites se explica las múltiples formas de evitar el Frame Busting.

Prevenir Clickjacking - Segundo Método

Una forma sencilla de prevenir el uso de nuestras páginas en otros sitios es primero ocultar todo el contenido de nuestra web utilizando estilos. Luego de ello verificamos si la propiedad location del frame actual y el superior son iguales en cuyo caso volvemos visible todo el contenido de nuestro web en caso contrario redireccionamos a nuestra url.

Primero colocamos el siguiente código en el header para ocultar el contenido.

type="text/css"> body { display:none; }

Al final del contenido colocamos el siguiente código, el cual verifica si el frame actual es igual al frame superior para volver visible el contenido.

type="text/javascript">
if (self == top) {
document.getElementsByTagName("body")[0].style.display = 'block';
} else {
top.location = self.location;
}

De esta forma si el atacante de alguna forma genera un error de javascript o utiliza frames anidados solo se mostrará una página en blanco, una validación sencilla pero muy eficiente para evitar que nuestra web sea utilizada por terceros.

Mas Información

Técnicas para Ofuscar Email

unijimpe — Mon, 09 Aug 2010 07:13:38 +0000

El SPAM es uno de los problemas por la que todo usuario a perdido mucho tiempo, siempre nos envían correos no solicitados con publicidad. Una de las técnicas utilizadas por los Spammers para obtener dirección email es crear robots que van por todas las páginas leyendo y guardando las direcciones email publicadas. Basado en este método para obtener nuestras direcciones tenemos una regla para evitar el spam.

Nunca publicar directamente direcciones email en una página web.

Veamos algunas técnicas para mostrar direcciones de correo en nuestras páginas sin exponernos a un ataque de spam a estas cuentas de email.

Utilizando CSS: Método #1

Una técnica sencilla pero que da buenos resultados es escribir la dirección email al revés y luego con estilos mostrarlo en la dirección correcta utilizando la propiedad direction, por ejemplo:

style="direction:rtl; unicode-bidi:bidi-override;">moc.oinimod@otcatnoc

Entonces creamos una función que se encargue de utilizar este método para mostrar los emails en nuestra web:

function hideEmail($mail) {
$mail = strrev($mail);
return "\"direction:rtl; unicode-bidi:bidi-override;\">".$mail."";
}

Utilizando CSS: Método #2

Otró método consiste en agregarle un texto oculto dentro de la dirección email, de esta forma la dirección se visualizará correctamente pero si un spammer copia el email esta contendrá un dirección inválida. Este texto se oculta con estilos utilizando la propiedad display.

contacto@ style="display:none">nulldominio.com

Luego creamos la función en PHP para ofuscar los emails:

function hideEmail($mail) {
$temp = explode("@", $mail);
return $temp[0]."@\"display:none;\">null".$temp[1];
}

Utilizando codificación ROT13

Este método consiste en codificar la dirección email con el algoritmo ROT13 que consiste en trasladar 13 posiciones las letras del alfabeto, dejando los caracteres no-alfabéticos sin modificar. Para ello escribimos el email codificado y lo mostramos correctamente con una función Javascript str_rot13.

type="text/javascript">
document.write(("pbagnpgb@qbzvavb.pbz").replace(/[a-z]/gi, function(s){
return String.fromCharCode(s.charCodeAt(0)+(s.toLowerCase()<'n'?13:-13));
}));

Luego escribimos una función en PHP que se encargue de codificar la dirección email y que imprima el código javascript para decodificarlo:

function hideEmail($mail) {
$temp = "";
return $temp;
}

Puedes escoger cualquiera de estar técnicas y utilizarlo rápidamente para mostrar tu dirección de email sin temor a ataques de SPAM. Puedes descargar el código fuente con estas funciones asi como el ejemplo de uso para que puedan hacer sus pruebas.

Mas Información

Utilizar Eventos en Javascript

unijimpe — Sun, 27 Jun 2010 23:07:28 +0000

Un evento es un proceso que se realiza en respuesta a determinada acción realizada por el usuario, por ejemplo si el usuario presiona un botón, entonces en respuesta al evento 'onclick' que representa el presionar el botón realizamos una acción. Para poder interactuar con los eventos se utilizan los Detectores de Eventos lo cuales detectan los eventos y permiten llamar a funciones en respuesta al evento.

Cuales son los Detectores de Eventos Disponibles?

Existen eventos para los diferentes elementos de la página, los mas importantes son los siguientes:

Eventos de Formularios

onblur - el campo pierde el foco.
onchange - el elemento que tiene el foco ha cambiado su valor.
onfocus - cuando el campo recibe el foco.
onreset - sucede cuando el usuario ha reseteado el formulario.
onselect - cuando un texto ha sido seleccionado.
onsubmit - el usuario ha seleccionado enviar el formulario.

Eventos de Enlaces

onclick - Cuando se hace click en el elemento seleccionado.
onmouseout - Cuando el mouse se mueve encima del enlace o botón.
onmouseover - Cuando el mouse se mueve fuera del enlace o botón.

Eventos del Teclado

onkeydown El usuario presiona una tecla.
onkeypress El usuario mantiene presionada una tecla.
onkeyup El usuario suelta la tecla.

Eventos en Ventanas

onblur - Sucede cuando la ventana o frame pierde el foco.
onerror - Cuando ocurre un error.
onfocus - La ventana o frame recibe el foco.
onload - Si el objeto se ha cargado completamente.
onunload - Cuando la venta se cierra.
onresize - Cuando se redimensiona la ventana o frame.

Nota
Si bien es cierto HTML es case-insensitive es decir no distingue entre altas y bajas, para lograr que los documentos html validen es necesario redactar los detectores de eventos en minúsculas.

Como se utilizan los Detectores de Eventos?

Los detectores de eventos se puedes asociar directamente a cada elemento como si fuera una propiedad adicional, además debemos colocar que acción realizar cuando se detecte el evento.

Primera Forma

Se puede hacer que ejecute una serie de acciones en Javacript:

href="link.html" onclick="alert('Bienvenido!!');">Entrar

Segunda Forma

También podemos hacer que llame a una función definida por el usuario:

href="link.html" onclick="welcome();">Entrar

En este caso estamos llamando a una función llamada welcome la cual debemos definir:

type="text/javascript">
function welcome() {
alert('Welcome!!!');
}

En el ejemplo solo hemos mostrado un mensaje de alerta dando la bienvenida al usuario. Obviamente podríamos realizar múltiples acciones como validación de formulario, formateo de datos o llamar a datos AJAX.

Tercera Forma

Otra forma es asignar los eventos como métodos de los elementos Javascript. Para ello necesitamos asignar identificadores a los elementos que deseamos.

href="link.html" id="bt">Entrar

Luego podemos agregar los eventos como propiedades del elemento Javascript (Hay que tener en cuenta que en esta forma los nombres de los detectores de eventos deben estar todos en minúsculas.

type="text/javascript">
document.getElementById("bt").onclick = function () {
alert("Welcome!!!");
}

Cuarta Forma

Otra forma de crear los detectores de eventos es haciendo uso de listeners, para ello se utiliza la función addEventListener de Javascript, el cual recibe como parámetros el nombre del evento (Sin en prefijo on) y la función a ejecutar. Para nuestro ejemplo se tendría:

type="text/javascript">
document.getElementById("bt").addEventListener('click', welcome, false);
function welcome() {
alert("Welcome!!!");
}

Como se puede ver utilizamos el evento onclick pero sin el prefijo lo que significa utilizar la palabra 'click'.

Con estas dos ultimas formas de asignar los detectores de eventos podemos separar el código HTML del Javascript con lo cual es mas sencillo dar el mantenimiento a nuestro código. Incluso la asignación de los eventos lo podríamos hacer en un archivo externo.

Pueden ver los ejemplos de este post en http://samples.unijimpe.net/eventos-javascript.html.

Mas Información

Validar Formularios con Mootools

unijimpe — Mon, 31 May 2010 04:34:07 +0000

En las ultimas versiones de Mootools se ha comenzado a incluir la clase Form.Validator la cual permite validar formularios de forma sencilla con muchas opciones predefinidas y con la posibilidad de extender con nuevas reglas de validación.

Preparando para Validar con Mootools

Lo primero es descargar e incluir el archivo mootools.js en nuestro documento, también se necesita descargar e incluir el archivo mootools-more.js que debe contener las clases: Form.Validator y Form.Validator.Inline.

type="text/javascript" src="js/mootools.js">
type="text/javascript" src="js/mootools-more.js">

También es necesario agregar tres estilos para indicar al usuario el resultado de la validación, estos estilos los creamos en la hoja de estilos de nuestro sitio web donde obviamente los colores y estilos los haremos para que se integren con nuestra web.

.validation-passed { border-color: blue; } /* campo valido */
.validation-failed { border-color: red; } /* campo invalido */
.validation-advice { color: #C00; font-size: 10px; } /* mensaje de error */

Validaciones Disponibles

Lo primero es conocer todas las formas de validación disponibles

IsEmpty: devuelve verdadero si el campo esta vacío.
required: el campo debe ser obligatorio o no debe estar vacío.
minLength: verdadero si campo tiene mas de cierta cantidad de caracteres.
maxLength: devuelve verdadero si el campo tiene menos de cierta cantidad de caracteres.
validate.numeric: verdadero si el campo es un número
validate.integer: verdadero para números enteros, decimales no esta permitidos.
validate.digits: verifica si el campo contiene números, espacios y caracteres de puntuación.
validate.alpha: verdadero si el campo solo contiene letras.
validate.alphanum: el campo es verdadero si contiene unicamente letras y números.
validate.date: es verdadero si el campo contiene una fecha (mm/dd/yyyy).
validate.email: verifica que el campo contenga un dirección de email.
validate.url: verifica que el campo contenga una dirección URL.

Utilizando Form.Validator

Para utilizar las formas de validación antes mencionadas estas se deben agregar como si fueran estilos. Si deseamos aplicar mas de una regla podemos hacerlo dejando un espacio en blanco. Veamos un ejemplo de un formulario de registro.

id="frRegister" method="post" action="">
Name:
name="name" type="text" id="name" class="required" />
Username:
name="user" type="text" id="user" class="required validate-alphanum minLength:5" />
Password:
name="pass" type="text" id="pass" class="required validate-alphanum" />
Email:
name="email" type="text" id="email" class="required validate-email" />
Phone:
name="phone" type="text" id="phone" class="validate-digits" />
type="button" name="btsend" id="btsend" value="Registro" />

En el código mostrado hemos creado un formulario con 5 campos, a los cuales hemos aplicado las siguientes reglas:

- name: debe ser obligatorio y se acepta todos los caracteres.
- user: es obligatorio, solo se aceptan letras y números y deber de 5 caracteres como mínimo.
- pass: es obligatorio y solo se aceptan letras y números.
- email: el texto ingresado debe ser una dirección de email válida y no puede ser vacía.
- phone: campo opcional, pero si se llena solo acepta números, espacios y caracteres de puntuación.

Luego creamos una instancia del objeto Form.Validator que recibe como parámetro el identificador del formulario que deseamos validar, en seguida agregamos un evento al botón 'btsend' el cual procederá a la validación cuando se haga click para enviar el formulario.

window.addEvent('domready', function() {
var validate = new Form.Validator("frRegister");
$('btsend').addEvent('click', function() {
validate.validate();
});
});

Uniendo estos bloques de código tenemos nuestro primer ejemplo de validación con Mootools, podemos ver el resultado en Mootools: Form.Validator - Basic.

Utilizando Form.Validator.Inline

Si deseamos que al validar el formulario este muestre los mensajes de error junto a cada campo, de esta forma el usuario sabra exactamente cual es el error que tiene en el formulario. Para ello utilizaremos la clase Forma.Validator.Inline la cual tiene la misma sintaxis que el ejemplo anterior:

window.addEvent('domready', function() {
var validate = new Form.Validator.Inline("frRegister");
$('btsend').addEvent('click', function() {
validate.validate();
});
});

Pueden ver el ejemplo funcionando en Mootools: Form.Validator.Inline y como se puede apreciar esta validación es mucho mas intuitiva para el usuario.

Mostrando la validación en nuestro Idioma

Por defecto los mensajes de la validación se muestran en Ingles, si deseamos cambiar de idioma por ejemplo a Español a estos mensajes entonces debemos incluir la clase Form.Validator.Spanish y luego inicializar en Mootools de la siguiente forma:

window.addEvent('domready', function() {
MooTools.lang.setLanguage("es-ES");
validate = new Form.Validator.Inline("frRegister");
$('btsend').addEvent('click', function() {
validate.validate();
});
});

Pueden ver el resultado del ultimo ejemplo en Mootools: Form.Validator.Spanish en donde las validaciones se muestran en Español.

Si estas opciones de validación no son suficientes puedes utilizar una clase adicionar con mas opciones de validación las cuales están documentadas en Additional InputValidators.

Resumiendo: para validar formularios con Mootools se deben descargar las clases adicionales Form.Validator y Form.Validator.Inline, crear los tres estilos para mostrar las validaciones, aplicar las reglas de validación como si se trataran de estilos. Finalmente se agrega una instancia de la clase Form.Validator para realizar las validaciones.

Mas Información

Publicar Tweets desde tu Website o Blog

unijimpe — Tue, 18 May 2010 04:23:21 +0000

Like it? Tweet it! es un widget Javascript en jQuery que permitirá a los visitantes a tu sitio web o blog para publicar Tweets directamente sin necesidad de ir al web oficial de Twitter con lo cual los visitantes ahorrarán tiempo al compartir contenido de su web, facilitando asi la distribución del contenido de nuestro web.

Este widget esta basado en el nuevo API lanzado por Twitter, el cual facilita el login de los usuarios mediante el protocolo OAuth para luego poder publicar tweets desde webs externos.

Instalación

Lo primero es incluir jQuery en nuestro web, luego de ello es necesario incluir el archivo tweet-is.js o podemos hacerlo directamente desde el URL que ellos proveen, esto sería de la forma:

type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js">

El siguiente paso es crear un elemento HTML que al hacer click mostrará la ventana para publicar el tweet, por ejemplo podemos crear un enlace que tenga un estilo llamado tweet-it.

href="javascript://" class="tweet-it">Publicar en Twitter

Finalmente agregamos el método necesario para llamar a la ventana de Tweet It!, el cual mostrará una pantalla para escribir el tweet el cual incluye en enlace de la página que estamos visualizando.

type="text/javascript">
$(document).ready(function(){
$(".tweet-it").tweetIt();
})

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/tweet-it.html, como pueden ver el resultado es de excelente calidad y los colores se integran muy bien con cualquier web.

Para facilitar el uso de este widget existen un plugin para WordPress, también hay guías para integrarlo con Tumblr y con Blogger. También pueden configurar parámetros adicionales, para ello pueden encontrar mas información en el web oficial de Like it? Tweet it!.