Tuesday, January 10, 2012

CEDO Week 4: Google Sites

When I first started my job at my school several years ago, I was excited to be able to set up Moodle and give it a try. Well ..., it was only used a little at the time and because of various reasons hasn't gone anywhere since. It just happens to be our school website with info on it right now. It happened before and it just happened again, either an intruder hack or code inserted by our webhost, Hostmonster, has caused the rich text editor to disappear. It's a known issue (not just with our hosting provider) and there could be various causes. Perhaps I don't have all the security settings correct or perhaps there isn't much I could do to prevent it. It makes it very difficult to post anything without the editor. Rather than wasting  hours trying to investigate and fix it or recreate the site with the latest Moodle version/installation, I decided to move our school website to Google Sites.

Though I would still love to see how a fully utilized Moodle would work, I've decided to put it onto the back burner and go with Google Sites. I think using it, administering it and maintaining it will be easier to both do and teach others. I think teachers will find it easier using Sites for their classes. Moodle requires you to know it's workings inside and out. Since I have my teachers and students using Google Docs, it's a natural next step to Sites. So for our upcoming assignment I shall display my new school website. It's nice to kill two birds with one code.

One thing about Google Sites that's a pain is the inability to embed objects and widgets like you can in Blogger and Google has no intention of changing this. You are limited to inserting what they let you insert, pre-made gadgets from other coders/vendors or writing your own widgets. Since learning to code widgets is not on my agenda right now I try to find simple hacks if I can.

I was searching for a way to embed a Voki into Sites. <embed> and <iframe> codes won't work because Google strips those kind of codes from your HTML when you save. Thank you RSS & Twitter feeds. I remembered a post about embedding Voki into Glogster and found it again. Basically you need to copy and paste an embed code into a document or note so you can see the whole thing. Then you need to find the part that references the actual URL of the thing you want embedded (minus all the other gunk and formatting information). Once found, paste into a browser and go there to make sure it works. You should see the thing you want embedded on a plain blank page with nothing else. If this is what you get, you are good to go.

Here is an example of the embed code from Voki. The highlighted part is the plain vanilla URL.

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMjYxNjY2MzY*MjMmcHQ9MTMyNjE2NjY1MTczNyZwPTk3NTA3MiZkPTAwMCUyMC*lMjBWb2tpJTIwV2lkZ2V*Jmc9/MSZvPWM4MjhkMWZmMDVlMTQ2OGY5NGFiOTNjMjZjNjBhNmQwJm9mPTA=.gif" /><object height="267" width="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" id="widget_name"><param name="movie" value="http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http://vhss-d.oddcast.com/php/vhss_editors/getvoki/chsm=d3df03927752d44a4c729715210a94e4%26sc=4553182" /><param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><param name="width" value="200" /><param name="height" value="267" /><param name="allowNetworking" value="all"/><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><embed height="267" width="200" src="http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2Fvhss-d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=d3df03927752d44a4c729715210a94e4%26sc=4553182" quality="high" allowScriptAccess="always" allowNetworking="all" wmode="transparent" allowFullScreen="true" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="widget_name"></object>

Try pasting the highlighted URL into your browser and you will see what I mean.

In Google Sites, you need to insert a "more gadgets..." widget/gadget. Search for iFrame. IFrames let you embed a whole web page into a Google Site. Thus, if you can find the plain vanilla URL of the object you want embedded, you can put it into a Google Site using an iFrame gadget.

It works with Voki and I'll be trying out some more such as Animoto ... and others I've already created. Cross my fingers.

Here is my sample.


  1. I think it would be great if our school would move over to the google sites for our school pages, documents, and email. It would be a tough transition and moving of files, but I think it would work. What would be great is we could all work on documents in our trainings and have them saved right way in the same place. NO loss of important documents like our school district just experienced!

  2. It's a tedious process moving documents over. As I'm creating the new website I'm also moving relevant documents over as well. Neither OpenOffics or MS docs completely transfer with formatting in tact. Thus I have to recreated them with a lot of copy/paste. Slowly but surely.