Thursday, December 24, 2009
HOW TO Embed Wave in to Blogger Blog? Step by Step guide / workarounds to embed wave into blogger blog
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.
This article explains how you can add "Related Articles" widget to your Post in Blogger (based on JSON callback technique) makes use of your existing labeling system, as shown in figure
No comments yet