Blog‎ > ‎

2010/01/16 - Scripts on Sites, Do Not Be Afraid

posted Jan 16, 2010, 7:58 AM by Rick Anderson
Part of the Google Apps suite, Google's Sites is a great product for developing internet and intranet (wikis) sites.  Easy to use, Google Sites allows rapid development of team collaborative information.  

One of the challenges of making a product easy to use is to balance simplicity with flexibility.  Simplicity is adding content by utilizing wysiwyg (what you see is what you get) editing, simple gadget insertion for functionality and document integration versus the open flexibility of generating HTML commands and script programming.  

Google's Sites makes a very good attempt to be simple and flexible.  Google's editor is wysiwyg and creating web pages is easy as typing an e-mail.  Additionally, thousands of gadgets add all sorts of content from sports scores, stock tickers, music, videos, pictures, charts and graphs, etc.  If that's not enough, Sites allows integration with the entire suite of Google Apps Docs - documents, spreadsheets, and presentations.  In order to be flexible Google Sites allows direct HTML manipulation for the coding geeks that enjoy writing cryptic HTML tags.  Each page's HTML content is available by selecting the edit HTML icon within the page content.  However, adding scripts always generates the dreaded script error - "Your HTML either contains unsafe tags (iframe, embed, styles, script) or extra attributes. They will be removed when the page is viewed."


Bummer!  There's a wide array of third party gadgets, widgets, and tinkering that can be done with just a little bit of scripting.  Forget about what you've been told or Google's tyrannical message - scripts can be used in Sites - you just have to know how by receiving a little help from others on the web - the following is an expanded example from Mori's tips and tricks site.  I wanted to insert a Yuuguu widget into my Google Apps page to make it easy and enticing for potential customers to see a demonstration.  Yuuguu is a fantastic piece of free or low cost software that allows people across the internet to view your computer screen.

On the Yuuguu site is the ability to generate a custom widget to display on your website - going through the mini-wizard produces the following code:

<!-- Yuuguu Widget Code START --> <div id="yuuguuWidgetWebshareEmbeddedContainer" style="height:230px;width:305px;"> <script src="http://www.yuuguu.com/public/widgets/webshare/js/yuuguu-webshare.js" type="text/javascript"></script> <script type="text/javascript">displayYuuguuWidget( "http://www.yuuguu.com/", "blue" )</script></div><!-- Yuuguu Widget Code END -->

Placing that code into a Sites page causes the dreaded Google gestapo to remove your code because of the scripting.  The basic concept of what needs to be done in order to run scripts on Sites is to place a wrapper around the javascript.  This is done by opening a textpad editor and pasting in the wrapper top, the javascript, and the wrapper bottom - then save it as an XML.

Wrapper top:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Custom Gadget" /> 
<Content type="html"><![CDATA[ 

Wrapper bottom:

]]></Content> 
</Module>

The end result when you combine the wrapper top and bottom with your javascript and save the file as an XML (you'll need to overwrite the default .txt by using save as type - all files and putting the .xml at the end of the filename) looks like this:


Once the file is saved as an XML it now needs to be hosted by Google Sites - this is done by utilizing your Sites management tool.  From any web page on your site, select the More Actions button (it's located in the upper right hand corner) and then select the Manage Site option.  This action will bring up Google Sites Management.  On the left column is an Attachments link - selecting the link displays the web file management - simply select the Upload button - this will place the file onto your website.  Now, right-click on the Download link and copy the link address - you'll need this in the next step - you'll get something like this: http://sites.google.com/a/zingodia.com/www/yuuguuexample.xml?attredirects=0&d=1

(note: if you don not have administration rights to your Site, the above step can be done by creating a page type of file cabinet and uploading the file to the cabinet)

It's time to display the code results onto your Google Sites page - this is done by going to the page you want to display the script and inserting a gadget.  Select Insert --> More gadgets... --> Add gadget by url and paste the link address.  Make sure to modify the width and height accordingly - preview your gadget and when ready select the OK button.  Final results - a script on your Google Sites page!!!!



Comments