How to add a Google Wave to a local Drupal website

Posted by Kipp Elliott Watson on July 23, 2009 at 1:06am

1. Create a google wave after you have accessed your sandbox.

2. While the google wave is active, select Debug>Get current Wave ID.

3. A small window should pop up, displaying a Wave ID. Copy the value that is displayed to your clipboard. You'll have to highlight the value before a copy command becomes available.

4. Create a new content type in a fresh Drupal installation and call it "Google Wave". The machine name can be googlewave. Put in whatever description you like.

5. At Home > Create content in the local Drupal website, select the new content type "Google Wave".

6. For title enter "My first Google Wave" or something else if you like.

7. At Input format select Full HTML.

8. In the Body, insert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Wave Embed API Example: Simple Wave</title>
    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
      wavePanel.loadWave('wavesandbox.com!w+waveID');
      wavePanel.init(document.getElementById('waveframe'));
    }
    </script>
  </head>
  <body onload="initialize()">
    <div id="waveframe" style="width: 500px; height: 100%"></div>
  </body>
</html>

9. Substitute the argument used in the loadWave() function with the value that was copied to the clipboard.

10. Save the content using the Save button.

11. The Google Wave that you created in the sandbox should now be displayed on the Home page.

Good luck exploring Google Wave!

Ciao for now,

Kipp

Comments

Embed Wave

Posted by plnolan on July 23, 2009 at 5:06am

Kipp,

Thanks for the post. Following your instructions I can embed a wave and follow it in real time but cannot participate in the WAVE.

Embeded Wave

Posted by plnolan on July 23, 2009 at 5:11am

Sorry I can reply and post to the Wave from my Drupal Site

Pretty neat
Plnolan

That's a bit of strange behavior ... let me see if I can explain

Posted by Kipp Elliott Watson on July 24, 2009 at 2:50am

If you access a Google Wave through a Drupal website, as I have demonstrated in my recent tutorial, two things can happen. You can access a Wave without editing privileges, or you can access the sandbox with full privileges. This outcome depends on whether you are logged into the sandbox at the time you attempt to access the Wave through the site. The best procedure is to access the website page. A message will be posted from the sandbox denying access because you haven't logged in. A link to the sandbox will be shown. Access the sandbox at this point in time and you will experience the full Wave functionality (beta level, of course). You can even create new Waves, but you still need your own username and password for this access.

By the way, I have placed Drupal Wave up at http://wave-samples-gallery.appspot.com/.

Would you like to view the values of all site variables one line at a time while your Drupal code is running on a multisite installation on Vista, using open source Eclipse and Xdebug? Visit http://sites.google.com/site/drupaldebugmultisite/ for details.

Some html-tags do not need

Posted by vadbars on July 24, 2009 at 12:34pm

Hi Kipp! Thank you for this sample. I think that some tags are not needed.
Just such a code:

<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
      wavePanel.loadWave('wavesandbox.com!w+2Bi7arMxYM%25A');
      wavePanel.init(document.getElementById('waveframe'));
    }
    </script>
  </head>
  <body onload="initialize()">
    <div id="waveframe" style="width: 500px; height: 100%"></div>
  </body>

Moreover, in this example is better to replace "500px;" with "100%". Then the iframe, containing the wave will appear at the full width of the window.

--
Vadim Barsukov (vadbars)
vadbars@wavesandbox.com
http://groups.google.com/group/google-wave-russia

Using the additional capabilities API

Posted by vadbars on July 26, 2009 at 9:01am

We can add buttons like "Follow this wave" and "Add comment" by using the addParticipant() and addReply() functions and also get rid of the use the tag body twice, if we use this code:

<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<div id="waveframe" style="width: 100%; height: 100%"></div>
// Let's add the buttons like "Follow the Rabbit" and "Speak here"
<form id="comment_form"> 
    <button type="button" onclick="wavePanel.addReply()">Add comment</button> 
    <button type="button" onclick="wavePanel.addParticipant()">Follow this wave</button> 
</form> 
<script> 
     var wavePanel = new WavePanel('https://wave.google.com/a/wavesandbox.com/');
// You can customize the design of the wave to your taste.
     wavePanel.setUIConfig('#446666', '#cceedd', 'verdana', '9pt');
     wavePanel.loadWave('wavesandbox.com!w+i7arMxYM%A');
     wavePanel.init(document.getElementById('waveframe'));
</script>

How to add callbacks

Posted by vadbars on July 26, 2009 at 7:26pm

An example, how to add callbacks:

<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<div id="waveframe" style="width: 100%; height: 100%"></div>

// Add any text here or somewhere on the page. For example, username. 
// Or maybe, user address on the wave like user@wavesandbox.com, if user fill this address in his profile...
<span id="waveuser"><?php global $user; print $user->name;?></span>

<form id="comment_form"> 
    <button type="button" onclick="wavePanel.addReply()">Add comment</button> 
    <button type="button" onclick="wavePanel.addParticipant()">Follow this wave</button> 
</form> 
<script> 
var wavePanel = new WavePanel('https://wave.google.com/a/wavesandbox.com/');
wavePanel.setUIConfig('#446666', '#cceedd', 'verdana');
// Add any callback function. Similarly, you can do also to wavePanel.init function.
wavePanel.loadWave('wavesandbox.com!w+i7arMxYM%A', welcomeMsg("Welcome to World Wide Wave, "));
wavePanel.init(document.getElementById('waveframe'));

// Callback, for ex. greeting to the user
function welcomeMsg(text) {
  var item=document.getElementById("waveuser");
  if(item) {
    item.innerHTML=text + item.innerHTML + "!";
  }
}
</script>

That's some cool stuff,

Posted by litwol on July 27, 2009 at 6:05pm

That's some cool stuff, please continue discussing and givng examples. cheers.

------------------
Sometimes interesting things appears on http://litwol.com

Good stuff. Just got my

Posted by tommyent on August 2, 2009 at 8:41pm

Good stuff.
Just got my invite the other day

Im honestly a little lost

Posted by tsukasatiger on August 13, 2009 at 6:22pm

I'll be honest, I dont have Drupal (My best friend does though.) I am currently unskilled in most ways of web-design. I am using a mac, building a site inside iWeb, the HTML snippet should potentially work the same way from what I am looking at, but currently, ever time I use the current build of that code (obviously adding in my own wave ID) I always get to error "Everything's shiny, Cap'n." (nice Firefly reference :p ) I have searched and searched and even read over the google API pages many many times and still cant find the reasoning behind this.

is there even the slightest chance someone has an idea of why this is? this is the current line of code I am useing and this is the site http://www.luminaryreef.net/Luminary_Reef/Wave.html

< script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript">
< script type="text/javascript">
function initialize() {
var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
wavePanel.loadWave('wavesandbox.com!w+RctSLmAE%B');
wavePanel.init(document.getElementById('waveframe'));
}
< /script>
< /head>
< body onload="initialize()">
< div id="waveframe" style="width: 700px; height: 600px">
< /body >

obviously with no spaces in the <> (like I said, im rather new to the whole web design thing.

thank you in advance. ~Kasa

(edit) I managed to actually get it to work, I found out that if you change the height of it at all, in the and then for any reason change the size of the snippet box by use of the drag, it will break it some how, you have to set the size of it manually, and you HAVE to specify a numerical value to the height, it cant just say 100% I hope this helps future users.

Everything's shiny, Cap'n!

Posted by Kipp Elliott Watson on August 13, 2009 at 6:22pm

Kasa, relax. You got the code right.

Everything's shiny. I just visited http://www.luminaryreef.net/Luminary_Reef/Wave.html and it worked for me. What you experienced is a common experience in Developer Preview land. An outage due to a sundry variety of bugs leading to server overload. Before it goes to the next level in its march towards public release, I hear Google intends to get this failure rate down to below 1%. Of course, before it goes public it will have to do much better than that.

====================
Would you like to view the values of all site variables one line at a time while your Drupal code is running on a multisite installation on Vista, using open source Eclipse and Xdebug? Visit http://sites.google.com/site/drupaldebugmultisite/ for details.

Thank you

Posted by tsukasatiger on August 13, 2009 at 6:37pm

Thank you for starting a thread like this, I was having so much trouble and I couldn't figure out why till I read here, (i already knew about the ID part) I just wasn't able to get it to work and this is clearly why, your right, calm down, something I have trouble doing in my line of work, messing around with new things is, I guess you would call it, "happy place".

Well, thank you again. (hey I just saw that wave reply, surprises me every time.)

Change Sandbox embed url to live url

Posted by Greg Varga on October 2, 2009 at 12:40pm

Anyone know how to change the sandbox embed code to use the "new" urls?

This is the important bit from the code:

function initialize() {
var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
wavePanel.loadWave('wavesandbox.com!w+[waveID]');
wavePanel.init(document.getElementById('waveframe'));
}

Find more info here: http://code.google.com/apis/wave/embed/guide.html

Thanks.
Cheers, e

Try using this, which came from embeddy@appspot.com bot

Posted by Smag on November 2, 2009 at 3:57am

The Wave ID is hard to find in the wave.google.com preview--I was able to get it by adding the user embeddy@appspot.com to a Wave I wanted to embed--it generates the snippet you need with the Wave ID:

var wave =
new WavePanel('https://wave.google.com/wave/');
wave.setUIConfig('#FFF', '#666', 'Arial', '13px');
wave.loadWave('googlewave.com!w+1PcHmJCYD');

<div id="wave" style="width: 500px; height: 90%"></div>

I put some info on how to embed and make a wave public here (please vote on the little poll in there so I know if others can actually edit): www.smagula.net/test/google_wave.html

PS: Vadbars, I tried using your code for the Add comment and Follow this wave functions, but I'm not sure it's working...

--Stefan
www.smagula.org

Here's a full example that

Posted by slip on November 3, 2009 at 1:02am

Here's a full example that worked for me based off of smag's post above:

<script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<div id="waveframe" style="width: 400px; height: 100%"></div>

<script type="text/javascript">
  var wave = new WavePanel('https://wave.google.com/wave/');
  wave.setUIConfig('#FFF', '#666', 'Arial', '13px');
  wave.loadWave('googlewave.com!w+d8hWl7KgA');
  wave.init(document.getElementById('waveframe'));
</script>

After a quick google search, I found an alternative way to get the wave ID:

"You can also use the url:
Click on a wave in the Google Wave site, the resulting URL might look something like this:https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BP9PIf1t-A
*remove everything except googlewave.com!w%252BP9PIf1t-Achange the part after the exclamation mark from w%252B to: w+*you are done and you wave id is googlewave.com!w+P9PIf1t-A"

http://www.google.com/support/forum/p/wave/thread?tid=54caed34d8a4697c&h...

Hi, May be a stupid thing to

Posted by summit on November 4, 2009 at 3:38pm

Hi, May be a stupid thing to ask. But is it already possible to have a google wave access without having to login to google wave? So could other people already see the wave, without editing?

Thanks for going into this in advance.
greetings, Martijn

Also for those of us who do

Posted by nycjomo (not verified) on November 4, 2009 at 11:18pm

Also for those of us who do not yet have google wave accounts :( to at least see it in action.

tks

Accessing Google Waves

Posted by Kipp Elliott Watson on November 5, 2009 at 1:15am

Technically speaking, it is possible. I would estimate that there are about five people in the world who have figured out how to actually "federate" with Google's wave server at this point in time. There's also probably a smaller number who can actually hack into Google's servers. In practical terms, you have a much better likelihood of seeing what's going on by looking over the shoulder of someone who has an account.

My suggestion is to go to YouTube and look at the videos there about Google Wave. It will give you a pretty good look at this new technology. Also, you may want to check out my sites at http://sites.google.com/site/drupalwave/ and
http://sites.google.com/site/federationprototypeserver/

By the way, I have a limited number of invites to give out. If you get your name and email addy with a subject line "Please invite me" over to me real soon, I'll do what I can to get you, my fellow group members, invited.