How To Add JavaScript or Custom Contents to Google Sites with Gadget

posted Aug 23, 2011, 11:12 PM by magic stone

Google Sites is web page creation service and a structured wiki offered by Google to general and Google Apps users, which allows multiple users to collaborate and edit the website. Although Google Sites accepts Google AdSense ad code and Google Analytics tracking code to be added and inserted into web pages via internal controls and settings, Google Sites offers just minimal support for JavaScript, an important HTML code brings extra functionality such as third-party advertisements and web traffic tracking.

For example, AdBrite, Tribal Fusion, ValueClick Media, Bidvertiser (beware of Bidvertiser cloaked keyword linking though), BlogAds, StatCounter and etc. Previously, in Google Page Creator, a script or any HTML code can be inserted into web pages by directly editing the HTML. But in Google Sites, attempting to save and update the customized HTML will result in the following error:

HTML content will be modified

Your HTML either contains unsafe tags (iframe, embed, styles or script) or extra attributes. They will be removed when the page is viewed.

Cannot Add JavaScript and Custom Advanced Code to Google Sites

Google Sites does support custom gadgets feature that can be added to websites hosted on Google Sites. Gadget is essentially a programming interface with custom code that can be embedded and used to provide content to iGoogle homepage and websites hosted on Google Sites. As a workaround, gadgets can be used to add, include or insert JavaScript (JS) code and other content that is otherwise prohibited.

When using gadgets with Google Sites, the first consideration is where should the gadget be hosted and accessed from. There are basically two options:

  1. Create the gadget as XML file with any text editor, and upload or host the XML gadget file to the website on Google Sites itself, or at any online web hosting service.
  2. Build, manage and host the gadget using Google Gadget Editor (GGE).

Here’s the brief step-by-step guide to build and host gadgets for Google Sites using two methods above.

Method 1: Manual Gadget Creation

  1. Create a new XML file (can be a text file with file extension of .xml) in any text editor such as Notepad.
  2. Copy and paste the following base code for the gadget into the text editor:

    <?xmlversion="1.0" encoding="UTF-8"?>
    <Module>
    <ModulePrefs title="Custom Gadget" />
    <Content type="html"><![CDATA[
    Insert the custom content, script, JavaScript, CSS ad code, tracking code or other code here...
    ]]></Content>
    </Module>

  3. Replace the “Insert the custom content, script, JavaScript, CSS ad code, tracking code or other code here…” with the actual code to display by the gadget on the web pages hosted on Google Sites.
  4. Replace the “Custom Gadget” with any prefer title for the gadget.
  5. Save the file with any file name with .xml extension to make it a gadget. For example, gadget.xml.
  6. Upload the .xml gadget to an online website. To host at Google Sites, create a page or edit an existing page, then expand Attachments section, and attach the file.

    Attach File to Google Sites

    Remember the URL (link location) at which the gadget is hosted and accessible.

  7. At Google Sites, browse to web page to include the gadget, and click Edit page button.

    Edit Pages

  8. Place the mouse pointer at where the gadget (content, JavaScript or ad) to be inserted.
  9. Click on Insert from the menu bar.
  10. Select More gadgets….

    Insert Custom Gadget into Google Sites

  11. In “Setup your gadget”, click on Add gadget by URL.

    Add Gadget by URL

  12. Enter the URL that points to the gadget.
  13. Click on Add button.
  14. Customize the display properties of the gadget if required, such as width, height, whether to include a scrollbar, whether to include a border and whether to display title on gadget, and if yes, what’s the title.
  15. Click OK.

Method 1: Google Gadgets Editor (GGE)

  1. Sign in to Google Account if not yet logged in.
  2. Visit Google Gadgets Editor web page at http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE.
  3. On first login, an example code of “Hello World” will be displayed, as show below:

    <?xmlversion="1.0" encoding="UTF-8"?>
    <Module>
    <ModulePrefs title="hello world example" />
    <Content type="html"><![CDATA[
    Hello, world!
    ]]></Content>
    </Module>

  4. Remove the line of Hello, world! and replace it with the custom code.
  5. Name the gadget by changing the hello world example in the line of ModulePrefs.
  6. Click on File menu, and choose Save As, and name the gadget accordingly.
  7. Once saved, the URL (link location) of the gadget will be shown on status bar of web browser when mouse hover over the the gadget name in the upper-right corner of the editor. The Google hosted gadget should have a URL similar to below:

    http://hosting.gmodules.com/ig/gadgets/file/1234567890/MyDigitalLife.xml

    Google Gadgets Editor

  8. At Google Sites, browse to web page to include the gadget, and click Edit page button.

    Edit Pages

  9. Place the mouse pointer at where the gadget (content, JavaScript or ad) to be inserted.
  10. Click on Insert from the menu bar.
  11. Select More gadgets….

    Insert Custom Gadget into Google Sites

  12. In “Setup your gadget”, click on Add gadget by URL.

    Add Gadget by URL

  13. Enter the URL that points to the gadget.
  14. Click on Add button.
  15. Customize the display properties of the gadget if required, such as width, height, whether to include a scrollbar, whether to include a border and whether to display title on gadget, and if yes, what’s the title.
  16. Click OK.
Comments