Tuesday, December 13, 2011

Scripting in Google Sites? You Bet!

If you are a Google Apps for Education user you may just have people building some pretty amazing Google Sites. Unfortunately, the coding within Sites doesn't always co-operate with embed code that you pulled from different Web 2.0 utilities. For example, Sites does not seem to accept any of the Twitter Widgets codes (which was what a co-worker was trying to do).  This was likely do to the <script> code that makes the widget work.  For those unfamiliar, <script> typically indicates the presence of a client-side script such as JavaScript.  Most of the embed codes you can pull from Web 2.0 sites, includes this type of code.  So after a few hours of struggling with alternatives and having little to no success, I put a call out to my Professional Learning Network, who once again came to my rescue (thanks Aida Awad)!  She led me to an article called Add Twitter to Google Sites.  This simple 4 step process solved the Twitter Widget issue with which we were struggling.

Now if you know me at all, you know my mind is always churning and trying to push the envelope.  So, I started wondering would this work with other <script> code.  Guess what?  It does!  If you are not afraid of "hacking" html code read on.

Using the code at the end of this post and replacing the <script> tags (highlighted in red) with whatever script you choose to use, you can "wrap" the code and it's results into your Google Site.  But first you must save the file as a .XML and upload it to a hosted website.  Uploading the .XML as a Google Doc will not work!    Once you have the file somewhere on the web, copy out the URL to the file.  Then open your site and choose "Insert Gadget".  Under the option "Add gadget by URL" paste the link to the XML file.  When you save and apply the change, the script should now successfully be running on your Site!


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

<script></script>

</head></html>
]]></Content>
</Module>


get your own embeddable forum with Talki