Embed Multiple Wave Website Webpage

Share |

I have explained the way to embed a single wave in to website or web page or blog, here I am going to explain the way to embed multiple waves in to website or web page based on the code at http://pastebin.com/f6894ebaa.

• Edit your website or web page place the following code just before </body> tag:

  
  <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
  <center><a href="http://technical-tejash.blogspot.com">Embed Wave to Website or Web Page</a></center>
  <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 waveid = 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+' + waveid);
  wave.init(document.getElementById(div[i].id));
  }
  }
  </script>
  

• Note: You need to place the above code once only, then you just need to add div tags for the all the waves you want to embed at the required locations as mentioned in the following steps.
  
• Once you placed above code, find the wave id of all the waves which you want to embed (To know how to get your wave ID click here)
• Note: You must make the Wave public before embedding it to any where
  
• Once you know the wave ID of your Wave then embed div elements as mentioned in the following code to particular place where you would like to embed those waves (Note: Here you need to replace the <WAVE_ID> with the actual wave id of your public wave and you can change value of height and width according to your requirements):

  
  <div id="wave_<WAVE_ID>" style="width: 300px; height: 500px"></div>
  

• Examples:

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

  
  

  <div id="wave_ZZjLgImEV" style="width: 500px; height: 200px"></div>
  

  
  

  
  <div id="wave_ZZjLgImEV" style="width: 450px; height: 250px"></div>
  

  
  
• The save it and upload it to the required location if required and your are done with it.
  

Share |