Insercion de Google Wave en un blog

Siguiendo con la entrada anterior entre las cosas que nos permite realizar Google wave esta la de agregar las waves a una entrada de blog permitiendo convertir una entrada estatica en una entrada totalmente dinamica y llena de posibilidades en la que cada participante de la Wave puede aportar en tiempo real.>

Aqui va un pequeño tutorial de como incorporar waves a nuestras entradas del blog.

Como primer paso debemos de incorporar codigo en el diseño HTML en la parte de diseño del blog. El siguiente codigo debe de ir posicionado antes de la vineta </body>

<script src='http://wave-api.appspot.com/public/embed.js' type='text/javascript'/>
<script type='text/javascript'>
/*
    Embed Google Wave Script v2.0
    Re-writen by: Jayson Ragasa, Baguio City, Phillipines

    Original Version (V1.0) from Mr Embeddy: embeddy@appspot.com
    this JS code is for Blogspot only
*/
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
  if( div[i].id.substr(0, 5) == 'wave_' ) {
    var id = div[i].id.substr(5, div[i].id.length-5);
    var wave = new WavePanel('https://wave.google.com/wave/');
    wave.setUIConfig('white', 'black', 'Arial', '13px');
    wave.loadWave('googlewave.com!w+' + id);
    wave.init(document.getElementById(div[i].id));
  }
}
</script>

Después de copiar este codigo en el lugar correcto debemos de dirigirnos a nuestra seccion de Google Wave

En el área de contactos agregar el siguiente contacto: embeddy@appspot.com

Luego en la wave que queremos colocar en el blog agregamos a este contacto, lo que hará que nos despliegue el siguiente mensaje:

y nos fijamos en la parte de que va después de googlewave.com!w+ y copiamos esta id

ya con esta id podemos eliminar al contacto embeddy y el mensaje que nos mostro.

Luego vamos a nuestra entrada del blog y escibimos la sigueinte linea donde <id copiada> es la id de la wave que copiamos anteriormente
 <div id="wave_<id copiada>>" style="height: 420px; width: 450px;"></div>



En esta linea el parametro que introducimos en height es la cantidad de pixeles que queremos que tenga de alto el marco del a wave y el parametro width es la cantidad de pixeles que tendra de ancho el marco de la wave en nuestra entrada.

La ventaja de este codigo es que con tan solo agregar una linea en la entrada se agrega una wave y con tan solo cambiar de id de la wave se pueden agregar varias wave en un mismo blog o entrada de el.