Insertar Google Buzz con jQuery

Este es un widget desarrollado por moretechtips.net/ que utiliza jQuery para incrustrar Google Buzz en cualquier sitio web. El proyecto está lojado en Google Code y podemos descargarlo desde allí o bien, insertarlo de modo directo.


Para esto, agregamos lo siguiente antes de </head>:
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://google-buzz-widget.googlecode.com/files/jquery.google-buzz-1.0.min.js"></script>
Y luego, con una serie de definiciones CSS podemos personalizarlo:
<style type="text/css">
div.google-buzz { /* es el contenedor principal */ }
ul.gbw { /* será una lista */
padding:0;
margin:0;
}
ul.gbw li { /* cada item de la lista será el buzz a mostrar */
float: left;
list-style-type: none;
height: 48px;
margin: 2px 0;
overflow: hidden;
padding: 5px 10px;
width: 500px;
}
ul.gbw span.gbw-meta { /* los datos de la fuente y la fecha */ }
ul.gbw span.gbw-meta a { /* los enlaces */ }
ul.gbw a.gbw-link { /* podemos personalizar los difentes tipos de enlaces y datos */ }
ul.gbw a.gbw-date { /* la fecha*/ }
ul.gbw a.gbw-source { /* fuente del buzz */ }
ul.gbw a.gbw-at { /*@nombre */ }
ul.gbw a.gbw-hashtag { /* hashtags */ }
</style>
Por último, lo agregando un DIV donde quisieramos mostrarlo:
<div class="google-buzz" options="{username:'nombre',n:valor,show_n:valor,animate:'valor'}"> cargando ... </div>
options="{}" es una secuencia de parámetros separados con comas; las opciones son estas:

username es el nombre de usuario tal como aparece en Google Profile y es el único argumento obligatorio
debug si se establece en 1 permite verificar errores (por defecto es 0)
n es la cantidad de buzzes a leer (máximo 100 y por defecto 10)
show_n es la cantidad máxima de buzzes a mostrar simultáneamente (un cero deshabilita el efecto de transición y por defecto es 1)
stay_time es el tiempo que permanecen visibles expresado en milisegundos (por defecto es 5000)
enter_time y exit_time definen la velocida de las transiciones (por defecto es 200)
animate define el modo de la animación, puede ser opacity (el valor por defecto), height, width, fontSize o lineHeight
header es el contenido HTML a colocar como título del widget
snippet si es 1 se muestra un resumen del buzz (es el valor por defecto) y si es 0 se muestra completo
show_source si es 1 muestra la fuente del buzz (desde donde fuen enviado)
show_date si es 1 muestra la fecha del buzz
info es un enlace opcional a la página principal del autor del plugin

0 comentarios:

Publicar un comentario