HOW TO Embed Wave in to Blogger Blog? Step by Step guide / workarounds to embed wave into blogger blog

Share |

I have explained the way to embed a wave into website or blog and add multiple wave into web site or web page. But which doesn't seem to work for the blogger blog. As per this guide if we place the given code before in the HTML Template of the blog then you may get the following error as shown in the bellow image:
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."

Hence here I am going to publish some easy step by step guide for the work around which I have found.

Workaround 1: Use the script with escaped HTML characters as shown in the following steps:

• Log in to www.blogger.com and go to Layout for the blog in which you would like to embed wave.
• Now you are at Layout->Page Elements. Now "Edit HTML" link to go edit HTML template of your blog.
• Here the first thing you need to do is take a back of your HTML template. Hence you can restore it later if you wanted to undo changes (Click here to know how to backup and restore HTML template for blogger’s blog)
• Then click on Checkbox for Expand Widget Templates to view complete HTML Code of your blog.
• Once it is done scroll down to the end of the HTML Template code. Here you can find </body> tag, just before </body> tag copy and paste following code:
  
  

  <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
  <center><a href="http://technical-tejash.blogspot.com/2009/12/embed-wave-in-to-blogger-blog.html">Embed Wave to Blogger</a></center>
  <script type="text/javascript">
  /*
  Embed Google Wave Script v2.1
  Encoded with escape characters By: Tejash Shah : http://technical-tejash.blogspot.com
  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 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>
  
  

• After this click on "SAVE TEMPLATE" link to save the template. This time you can be able to successfully save the template.
  
• If there is any issue with the template then restore previously backed up template (follow the instruction to restore the backed up template)
• Once everything is fine then you can add one or more waves using HTML / Javascript gadget as per following steps.
• Go to Layout -> Page Elements and click on "Add a Gadget" link as shown in the following image.
• 
• In the Content section write the following code for each wave you need to embed in to your blog (Note: Here you need to replace wave Id of your wave in place of <WAVE_ID> and you can change the value of height and width as per your requirements see the examples).
  
  

  <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>
  

  
  
• Then click on "SAVE" button to save this gadget and now you can move this HTML / Javascript gadget to any where in your page elements layout and save the template.
  

Workaround 2:

• Log in to www.blogger.com and go to Layout for the blog in which you would like to embed wave.
• Now you are at Layout->Page Elements, here click on "Add a Gadget" link and from the pop up select "HTML / Javascript" gadget to add.
• In the Content section of the Gadget copy & paste following code,
  
  

  <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>
  

  
  then in the Title mention "WAVE CODE" or any thing which can be used to identify the gadget in the Page Elements and click on "SAVE" button to save the Gadget.
• After this move the newly added HTML/ Javascript gadget at the bottom of all the page elements (in the side bar, if there are more side bar then put it in the right most side bar) so that this code will be executed at the end.
• Then click on the "SAVE" button to save the Page Elements Layout
  
• After this you can add following code for the every wave you would like to embed in the new HTML / Javascript gadget (Note: Here you need to replace wave Id of your wave in place of <WAVE_ID> and you can change the value of height and width as per your requirements see the examples).
  
  

  <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>
  

• Then click on "SAVE" button to save this gadget and now you can move this HTML / Javascript gadget to any where in your page elements layout and save the template.

Share |

Detailed Google Wave FAQ - Frequently Asked Questions + Tips & Tricks + Hacks

Share |

Google Wave Frequently Asked Questions and Tips and Tricks... Please wait till it is being loaded

Share |

Google Wave FAQ - Frequently Asked Questions

Share |

Google Wave Frequently Asked Questions and Tips and Tricks... Please wait till it is being loaded

Share |

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 |

How To Embed Wave in to Website or Webpage or blog?

Share |

The google's guide to embed wave (at http://code.google.com/apis/wave/embed/guide.html) seems to be not easy to understand by the non technical person or the person. Here is simple and step by step guide to embed the wave.

• Get the Google wave id using this tutorial click here
• Open the source code of your Web Page or Website. Or if you are having blog then open HTML template for the blog.
• Search tag which is not case sensitive. Just before this tag paste following code and put the id of your wave in place of "waveIdD" e.g. "ZZjLgImEV":
  

  
  <script type="text/javascript">
  function initialize() {
  var wavePanel = new WavePanel('http://wave.google.com/wave/');
  wavePanel.loadWave('googlewave.com!w+waveID');
  wavePanel.init(document.getElementById('waveframe'));
  }
  </script>
  
  

  
  
• Now place the following code where you want to embed the wave:

  <div id="waveframe" style="width: 400px; height: 100%"></div>
  

  
  Note: Here you can change the value of height and width according to your requirements.
• Then finally search tag and add the initialize() method to onLoad of the body as follows:

  <body onload="initialize()">

• Everything is done now you can save and for website or webpage upload it to the desired location. For the blog just same the template and you are done with it.
  

Share |

What is WAVE ID and How to Get Wave ID of your wave?

Share |

What is Wave ID?
Ans: Wave ID is unique ID of the Wave which you can use to embed the particular Wave into your Website, Web Page or blog or any thing else.
I have written article on creating public wave and how to embed wave in to website or blog. Here I need to explain how can you get Wave ID which you can use to share your wave on website or blog.

• Log in to http://wave.google.com
• Then go to Inbox or All to get list of waves
• Click on the wave to open the wave
• Once the wave is opened you can get the wave's unique URL from the address bar which will be similar "https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BZZjLgImEV.2"
• This URL will end with "googlewave.com!w%252BZZjLgImEV.2" here what ever after "googlewave.com!w%252B" and before dot "." i.e. "ZZjLgImEV" is the wave id for my wave.
• Note: the unique URL can be "https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BZZjLgImEV.1" or "https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BZZjLgImEV" also i.e. it can end with .1 or .2 or .3 .. Or if it does not have dot "." at the end then any thing after googlewave.com!w%252B is the wave id.
  

Share |

How to Add friends on google wave to your contacts?

Share |

Google wave currently restricts that you can share a Wave with your contacts only. That means you can add new people on your wave only if they are on your contact list. Here is simple step by step guide to add a Google wave user to your contacts.

• Login to wave.google.com
• Once the wave is loaded you can see contacts list at the bottom left part of the wave as shown in the bellow image.
• 
  
• Click on the + icon / button the bottom of contacts. Type the your friends Gmail id or Google Wave id in the text box. If this user has google wave account then submit button is enabled and you can add this user to your contact by pressing submit button.

Share |

How to create new wave on Google Wave?

Share |

Here is very simple step by step guide to know how can you create new wave on Google Wave?

• Login to http://wave.google.com
• After successful login you can find "Navigation" panel on the left side of the screen. You can select "Inbox" or "All" from the Navigation panel. Which will display waves you have subscribed on the right side of Navigation panel. And on the top of it you can find the button "New Wave"
• 
• Click on "New Wave" button to create new Wave.
• 
• Here you can type any kind of message or information you need to share with your friends. You can also attach images or any file over here. Once everything is done click on "Done" button to finish and let your friends view your changes.
  
• You can add one or more friends to the newly created wave or existing wave by clicking "+" button as shown in the images.

Share |

Creating Public Wave : How To Make your wave as Public Wave or Provide Everyone Access on Google Wave?

Share |

Finally, I got invitation from Google to access the Google Wave. It is really gr8 way to communicate with the people on Google Wave. Currently you can get Google Wave by invitation only either form Google or if your friend who has Google Wave can invite you. I and many of my friend got the wave, I was just experimenting Google Wave features and gone though wave help article http://www.google.com/support/wave/bin/answer.py?hl=en&answer=162099 to create public wave.

This seems to has insufficient information. I search on Google and found out a way to create a Wave with public access or grant existing wave to public access. Hence, I thought of writing this article to provide complete information about creating public wave or granting public / everyone access to existing wave.

As per Google Help you need to add "public@a.googlewave.com" to your wave and your wave will become public as shown in the bellow images. But many users are getting error "public@a.googlewave.com is not a Google Wave account." as shown in the bellow image.

There is an alternate solution you can try to add the "public@a.googlewave.com" in your google wave contact list. This may fail by showing following error.

In this case there is another work around using a bot "easypublic@appspot.com" to make your wave public. Add "easypublic@appspot.com" in your wave

And it will make your wave a public wave by automatically adding "public@a.googlewave.com" in to your wave.

Note: You might need to add "easypublic@appspot.com" to your contacts before adding it to Wave as follows:

Share |