11

How do I get the ability to add/edit the JS on a google sites site? This way I want to use jQuery and jQuery UI to manipulate the look and feel of the site.

To be clear, I am not talking about all google sites, just the create-your-own system google has made, called "Google Sites" -> https://sites.google.com/.

On the howto page, there is this: Unsupported features

The HTML Box tool currently doesn't support the following features:

iframes JavaScript code can't create any script, image or link tags Document/window onload and onready functions. You can place any JavaScript at the end of code that needs to load after the document loads.

Does that mean HTML tool cannot create tags? even though they are in the demo above?

Rubén
  • 34,714
  • 9
  • 70
  • 166
jeffery_the_wind
  • 17,048
  • 34
  • 98
  • 160
  • 1
    Do you want to change google sites? I'm not sure I follow... – gdoron Jun 03 '12 at 21:42
  • well i want use google sites, but a lot of the options and styling are unable to be changed by the usual settings, so I thought if i could ex execute a block of JS on the page, i could put in my own jQuery and change what i wanted to change. – jeffery_the_wind Jun 03 '12 at 21:45
  • Are you looking for [GreaseMonkey](http://en.wikipedia.org/wiki/Greasemonkey)? Chrome has built-in support for GreaseMonkey as well. Take a look at http://userscripts.org/ for some examples of what you can do. – Fabrício Matté Jun 03 '12 at 21:46
  • I still don't get it, why would you want to change google site, like gmail for example. – gdoron Jun 03 '12 at 21:47
  • 1
    no... google sites -> https://sites.google.com/ – jeffery_the_wind Jun 03 '12 at 21:48
  • Sorry. I don't think it's achievable using google sites. – ahren Jun 03 '12 at 21:52
  • Never heard of that hosting, my bad. Does it allow you to edit your site's HTML? If it does, all you'd have to do is include the path your js scripts (durr), but if it doesn't, you'll have a hard way around. Best of luck. – Fabrício Matté Jun 03 '12 at 21:52

3 Answers3

11

The Google Sites help explains how to add custom HTML/CSS/JS content:

  1. Go to the Google Sites page that you’d like to embed HTML in.
  2. Go to the Insert menu and select HTML Box.
  3. In the dialog that opens, add HTML, CSS and/or Javascript code.
  4. When you’re done, click Save.
  5. To preview your embedded HTML, click Save on the Google Site page.

It goes on to note that "code from one HTML box can’t interact with or refer to code outside of the HTML box, including other HTML boxes" -- presumably, each "HTML box" is a separately sandboxed iframe element. As such, your ability to use JS to "manipulate the look and feel of the site" will be pretty limited.

  • Yes i tried this first... didn't seem to work, let me try again. – jeffery_the_wind Jun 03 '12 at 22:07
  • 1
    As I noted, the capabilities of JS running in the Google Sites sandbox are restricted. Depending on what you're trying to do, you may or may not be able to do it. (In particular, if you're trying to modify content on the page that isn't part of the HTML box, you're out of luck.) –  Jun 03 '12 at 22:11
  • 1
    i tried putting this into the HTML, and no alert box showed : `` – jeffery_the_wind Jun 03 '12 at 22:11
  • I see, yeah then it wouldn't work. I want to change the height of ther nav-bar, location and size of navigation tabs... etc. – jeffery_the_wind Jun 03 '12 at 22:12
  • HTML box does not render with a – jeffery_the_wind Jun 03 '12 at 22:34
  • I have tried this as well. It generates an iframe with your stuff in there. You can do things there, but `alert()` doesn't work. And the new Google Sites (not Classic) doesn't have the possibilities to add Gadgets. So I fear it just doesn't work. – Martin Ueding Sep 22 '22 at 12:19
3

Another alternative is writing your own Gadget

"Gadgets are small web applications that can be added to web pages. Gadgets are XML files that typically wrap HTML and JavaScript" as explained by a Google Sites Guru that goes by the name Mori. https://sites.google.com/site/mori79/html-gadgets

You can also find more information in Google Developers site: https://developers.google.com/google-apps/sites/gadgets/site_gadgets?hl=en

Hope it helps.

Hugo O.
  • 31
  • 5
2

Google Site has a good documentation, and you cannot use any JavaScript against their program policy.

Please read the documentation, it lists details of the steps for inserting custom CSS, JavaScript and general HTML.

activars
  • 1,664
  • 13
  • 15
  • 1
    The "program policy" link you grabbed there is for Docs, not Sites, and it's irrelevant to this question. –  Jun 03 '12 at 22:00
  • @duskwuff **This is a general policy for hosting Google Sites as well as Google Docs.** If you take a look the documentation for Google Site, they specifically link to this policy. So all your content, javascript, css, images should follow the same policy. The "alert" didn't work simply because it's against the policy. I did intentionally link to their doc instead of copying the steps, because their documentation might change over time, your copied content will not be able to keep up to date. **This is NOT irrelevant**. So please read it carefully before rating. – activars Jun 05 '12 at 13:41
  • It's possible that we're actually seeing different versions of the policy page. The version I'm seeing doesn't mention JavaScript anywhere. –  Jun 05 '12 at 15:08
  • 1
    That link is just talking about violence, hate speech, child safety, etc. Absolutely nothing to do with Javascript. – Jeff Evans Sep 30 '12 at 02:00