Embedding multiple waves into wordpress blogs
Documenting a lifehack / solution to a nagging problem is an important thing on the social web, right? So here I go with a workaround I found out – together with my friend Thorsten Zörner – to embed multiple waves into blog posts.
Now where’s the problem? One can get an embed code for a GoogleWave at the Google Webelements site easily, no?
Add the Wave Element to your site so visitors can see and interact with the wave on your site. This is an easy way to take advantage of the collaborative power of Google Wave.
To get started, simply find (or create) a wave you’d like to embed, and then paste the link into the “Wave” box.
Yes, this works but if you then display multiple posts with embedded waves on your site (say, on you’re blog home or when showing all posts tagged with wave) it all gets mixed up and does look scrambled, ie. the wave from the second blog posts gets added right below the first wave on the page …
Reason for this is that the div element is called waveframe every time you generate the code:
<div id="waveframe" style="width: 500px; height: 500px"></div>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("wave", "1");
google.setOnLoadCallback(initialize);
function initialize() {
var waveframe = document.getElementById("waveframe");
var embedOptions = {
target: waveframe,
header: true,
toolbar: true,
footer: true
};
var wavePanel = new google.wave.WavePanel(embedOptions);
wavePanel.loadWave("googlewave.com!w+F1TPDK0gB");
}
</script>
What to do? Just tweak the embed code you grab from Google by replacing waveframe with something individual for the wave, eg. in the above example replace waveframe with waveframe_wikiwedstuttgart in all places:
<div id="waveframe_wikiwedstuttgart" style="width: 500px; height: 500px"></div>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("wave", "1");
google.setOnLoadCallback(initialize);
function initialize() {
var waveframe = document.getElementById("waveframe_wikiwedstuttgart");
var embedOptions = {
target: waveframe_wikiwedstuttgart,
header: true,
toolbar: true,
footer: true
};
var wavePanel = new google.wave.WavePanel(embedOptions);
wavePanel.loadWave("googlewave.com!w+F1TPDK0gB");
}
</script>
The resulting wave is not only still showing nicely, but now you can embed multiple waves on your site at once without them interfering, too.
