14. Google Gadgets Embed



 Prev:
13. +1 button		 Menu: 
WYSIWYG HTML		  Next:
15. Google Services Embed

Google Gadgets Embed Html

Embed Google Gadgets in Google Sites through the WYSIWYG Insert HTML menu.

Google Gadgets Embed WYSIWYG Menu


Google Gadgets Embed  Example

Example Calendar Gadget
Standard Google Gadget embed using Javascript: 
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/106323307000219006410/goopal-toolbar12.xml&amp;synd=open&amp;w=320&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

In Google Sites you can add the URL (Highlighted), Google Sites renders the Gadget , you cannot add a Google Gadget directly to the HTML in Google Sites.

Standalone Gadget 
Standalone Gadgets which are useful for mobile devices.
http://www.gmodules.com/ig/ifr?url= http://hosting.gmodules.com/ig/gadgets/file/106323307000219006410/goopal-toolbar12.xml &amp;synd=open&amp;w=320&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=html

Where the last standalone Gadget url parameter is output=html

Google Gadgets HTML Code for Google Sites

The standard way to Insert a Gadget in Google Sites.

The Html code generated by the WYSIWYG insert menu > More Gadgets, will only render within Google Sites.

  • Select from the Google Gadgets Gallery
or 
  • Add the Gadget by URL

In the Google Gadgets Embed HTML code, The User Preferences are URL encoded.

Google Gadgets User Preferences

Define your Google Gadget user preferences within the Gadget development and they will be available in google sites within the Properties [Gear] Button.

Standard Webpage properties are available for quick adjustment:
  • Alignment
  • Wrapping







Google Sites - WYSIWYG HTML Menus


WYSIWYG Menu - Menu bar

WYSIWYG Menu Bar

WYSIWYG Menu - Insert HTML

WYSIWYG Insert Menus

WYSIWYG Menu - Format HTML

WYSIWYG Format Menus

WYSIWYG Menu - Insert Table HTML

WYSIWYG Insert Table Menu

WYSIWYG Menu - Adjust Layout HTML


The Layout HTML Menu is not adjustable manually through the HTML editor.

WYSIWYG LAYOUT Menu