Quick n’ easy Google Wave embed

If you haven’t heard about Google Wave, you might have been living in a desert island with a ball.  A couple of days ago I received a Google Wave account and started playing with the Embed API to add a Wave to WordPress. We will also see a nice list of keyboard shortcuts for Wave.

First thing I tried was changing my avatar (who doesn’t?). I found quite awkward that I actually had to leave the Wave interface and enter a GMail-like interface to do so. If you have Wave, click Manage Contacts, then Mail and then Settings. The nice thing is that these accounts have 25.6 Gb of storage space.

If you wonder about advertisements and if Google will embed AdSense on Wave, the answer is on the privacy terms stating that:

Does Google Wave contain advertisements?
We have no plans to include advertisements, but we might consider doing so in the future. If we do, we won’t share your personal information with an advertiser without your consent, and we will update this privacy FAQ with the change.

Ok, meanwhile, Wave is ads free. Using the Wave Embed API example, I wrote a small function to be added on the functions.php file in WordPress. There’s already a plugin at WordPress extend, but it didn’t worked for me. So, open your functions.php file and type the following:

[php]
<?php
function wave_wp_head(){
if(is_post()){
?>
<script type="text/javascript">
jQuery(window).load(function () {
initialize();
});
</script>
http://wave-api.appspot.com/public/embed.js <script type="text/javascript">
function initialize() { if(jQuery(‘#waveframe’).length){
var wp = new WavePanel("http://wave.google.com/a/wavesandbox.com/&quot;);
wp.loadWave("wavesandbox.com!w+UGHdAQ13%C");
wp.init(document.getElementById(‘waveframe’));
} }
</script>
<?php
}
}
function wave_sc( $atts ) {
$wavediv = ‘<div id="waveframe" style="width: 500px; height: 400px; display:block; clear:both;"></div>’;
return $wavediv;
}
add_action(‘wp_head’, ‘wave_wp_head’);
add_shortcode(‘add_wave’, ‘wave_sc’);

[/php]

The example calls the initialize function from the body onLoad event, but using jQuery we can call

jQuery(window).load(function()

When we enter the initialize function, make sure the element where we’ll be creating the Wave exists by testing:

if(jQuery(‘#waveframe’).length){

Now, after we create the constructor, you must provide the Wave ID to the loadWave function. In your wave account, click on Debug and from the drop down menu, select Get Current Wave ID. You will get a popup box with

Wave ID: “wavesandbox.com!w+ywmqSkT9%6”

And this is what it looked like last time I tested it on a page.

In order to make the wave public, you must add the public@a.gwave.com. In case you don’t want to do this everytime you create a new Wave, you could add the line

[php]
wp.addParticipant("public@a.gwave.com");
[/php]

so the script will automatically add it. I’m not sure if it will keep adding it everytime it runs, I hope they perform a check to see if the waver is already included or not.

Just like GMail, Wave has a lot of shortcut keys. Here’s a list in one of the many waves that you will receive on your inbox.

Wave Navigation

Up/Down arrows use to navigate messages.

Tab/Shift-tab same as Up/Down arrows (outside edit mode)

Home/End focus first/last message

Space go to next unread message.

Left/Right arrows to switch focus between digest panel and wave panel.

Page Up/Down go to the next page in the panel [does not currently work, known bugs]

Ctrl-Space mark all messages read (focus must be on wave panel though mstahl@google.com )

Messages

Enter replies to messages: the new message will appear just below the selected message (it will be the same indentation level if it is the first reply, but indented more if a non-first reply).

Shift-Enter replies to messages at the end of thread: the new message will appear at the same indentation level, and at the BOTTOM most position.

highlight text + Enter inline reply: the new message will appear indented and INSIDE the current message.

Ctrl-R same as enter

Ctrl-E edit message

Ctrl-Enter (while editing) insert inline reply at caret

Text Editing

Ctrl-B toggles bold attributes for selected text

Ctrl-I toggles italics attributes for selected text

Ctrl-G Color

Ctrl-L Links to another Wave (highlight text, hit CTRL-L and put in a URL or a Wave ID (see Debug menu for ID’s) [NOTE: we will soon change the key combo]

Copy/Paste

Ctrl-C copy the selected text.

Ctrl-X cut the selected text.

Ctrl-V paste the text from the text buffer.

Structural Formatting

Ctrl-<n> Make the current line a heading, where n = 1..4 for different sized headings.

Ctrl-5 Bullets

Ctrl-6 Normal (removes heading/bullet style, but not bold/italic etc. current visual glitch in some browsers where text stays big – but this is not persistent.)

Ctrl-7 LTR + Left align

Ctrl-8 RTL + Right align

Slide Show

Space / Right Next Slide

Shift-Space/ Left Previous Slide

Down / Page Down Next set of thumbnails

Up / Page Up Previous set of thumbnails

Home First Slide

End Last Slide

Google will be releasing many more accounts in the coming months. When you are given one you also get a test account so you will have two accounts to test and try. Sign up for Google Wave and get ready to wave!