Add Google Wave In Your Web/Blog Site

Just this early morning, I have received an Google Wave invitation from my co-worker and checked it out immediately, watched the looooooong video from Google Wave and all I can say everytime they showed something was “whoa!”

So embedding Google Wave object into a web site got me something to work on. Got some disappointments due to some feature were no longer working and some of it was just uhh.. ok. Then I crossed into a site which brings back my energy.

Thanks to @Mark Essel and his How To Embed Google Wave on Your Wordpress Blog just for Wordpress. Since am using Blogger I thought it was a bit of .. different approach .. approach that it could be use in any web site.

Anyway! here’s how to embed google wave in your web site.

First thing to do, you have to know what your Wave ID is .. to easily help you with that… add embeddy@appspot.com to your contacts

Now once you created a New Wave and added Mr Embeddy to partcipate in your Wave, you’ll notice it will automatically add something like this

Something like the image below	But what you really need is this .. The WaveID

Copy that somewhere, or paste it in the Notepad.

Now you can safely remove Mr Embeddy and add public@a.gwave.com so you can make your Google Wave viewable in public. But unfortunately, only the Preview and Sandbox account can view the Wave (FOR NOW). There are some issues regarding to public@a.gwave.com you can read it here Google Wave 101.

So if you have all those setuped now.. then the real deal starts.

Adding Javascript in your website

It’s small and easy. Just add this Javascript

<script src='http://wave-api.appspot.com/public/embed.js' type='text/javascript'></script>
<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
*/
var div = document.getElementsByTagName('div');
/* 
    If you're going to use this script in Blogger, make sure the "<" (lesser-than) sign in "for (var i = 0; i < div.length; i++)"
    is converted to &lt;
*/ 
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>

for blogger users. Get it here http://pastebin.com/f6894ebaa

and INSERT IT BEFORE the </body> tag

and if you want to start embedding a (Multiple) Google Wave object in your Website, Blog Post, or Gtalk ( huh!? ;) view only though .. )

add this small HTML tag called DIV in your POST page.

<div id="wave_<waveid>" style="width: 560px; height: 420px"></div>

e.g. the WaveID is G00gl3Wav3

<div id="wave_G00gl3Wav3" style="width: 560px; height: 420px"></div>

and you’re ready to Publish!

Give it a try and don’t forget your feedback!

Cheers!