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?
The Google Sites help explains how to add custom HTML/CSS/JS content:
Go to the Google Sites page that you’d like to embed HTML in.
Go to the Insert menu and select HTML Box.
In the dialog that opens, add HTML, CSS and/or Javascript code.
When you’re done, click Save.
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.
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.
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.
Related
I am trying to create a web widget that can be easily integrated into any website by just copying a small piece of code but most importantly give the user custom CSS controls like changing the font or button color, etc. My code consists of JavaScript and PHP. I tried to do this with <iframe> but it just copies the whole page with menu and footer. I couldn't find any solution on how to remove it. Please help, thank you.
SharePoint is a beast and seems to stomp on everything. Customizing the front-end with javascript has gone well, but now I would like to provide my content owners with more back-end controls. However, any changes made to objects in the WYSIWYG editable area at $(document).ready are immediately reverted by SharePoint.
I imagine this has to do with that "content" not really existing there, but being a copy of hidden input fields. Does anyone know how to get some control of this area? I would love to be able to insert or modify "page content" under the control of scripts, but SharePoint documentation is so terrifyingly sparse.
*EDIT: It appears as though content which is inserted "late" (as in html which is inserted by a click event well after page load) will stick. Anything done at doc.ready or window.load however is rinsed before the area is relinquished to user control.
Sharepoint does a lot of "Sanitizing" of Content entered into some HTML Fields or Content Editor Web Parts sadly. Can you edit the Master Page through SharePoint designer and stick your JavaScript in there?
Also look at ExecuteOrDelayUntilScriptLoaded or _spBodyOnLoadFunctionNames.push()
I am looking to create an easy java script plugin for my site that can be placed in other sites to pull info from my site. The Facebook live stream plugin allows you to select a couple options and it will spit out a line of code to place in your site to have the Facebook live stream. Can someone point me in the right direction or give me some info on how to do this? I know how to write the java script to pull from my site but I do not know how to make it so simple to integrate into another site. I really like that the Facebook plugin requires only one line of java script, this will make it easier for my customers to include in their site. Any help would be appreciated.
Thanks
Take a look at the code you have to post when using FB live streams:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>
<fb:live-stream event_app_id="APP_ID" width="400" height="500" xid=""
always_post_to_friends="false"></fb:live-stream>
So here's what I would think happens under the covers:
The script is fetched from the server
Onload the script code looks for the fb:live-stream element and looks at the attributes as parameters
The fb:live-stream element is removed from the DOM and converted to appropriate DIVs, etc.
The script registers some mechanism to periodically refresh the content in the DIVs
It's also possible that the fb-root element is used for the content. No idea. Would have to look # a DOM.
That's really all most of these widgets do. Usually you tell the user to get a script.js via a script tag and also define an element that they would like for the content to appear in. Once the script tag is loaded, register an onload handler, find your element, and do what you gotta do.
Just be careful to isolate any jQuery instances or globals you might depend on so you don't mess up anything on the page.
So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?
You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/
I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.