Google‎ > ‎Sites‎ > ‎

Creating a custom gadget to use 3rd party code in your Google Site


So you want to embed custom code in your Google Site but the security policy from Google disallows it, gives you a warning message similar to the one below:

Google Sites Code violation warning

and you end up with a dinky little hyperlink at best:
In this example I'm going to use the twitter follow button code shown below:

TWITTER BUTTON HTML CODE

<a href="https://twitter.com/shooshmonkey" class="twitter-follow-button" data-show-count="false">Follow @shooshmonkey</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

So creating a gadget is sometimes the only way to accomplish this, it sounds daunting but after some trial and error I have found the recipe that can be repeated easily over and over again.

All you need is this default code:

Gadget Template Code

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Shoosh Monkey IT Solutions CSE" />
  <Content type="html">
    <![CDATA[

************ PUT CUSTOM CODE HERE ************
 
]]></Content>
</Module>

Then make your button on the applications website, for example Twitter is: https://about.twitter.com/resources/buttons#follow
and replace the text 

***************** PUT CUSTOM CODE HERE ************************

with your custom button or what ever code like I have above.

NOTE: I use xmledity to do this on my Chromebook, it's easy and free check it out here: http://xml.editey.com/

 and it should look like this:

Custom Gadget with Twitter Code

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Shoosh Monkey IT Solutions CSE" />
  <Content type="html">
    <![CDATA[
<a href="https://twitter.com/shooshmonkey" class="twitter-follow-button" data-show-count="false">Follow @shooshmonkey</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
]]></Content>
</Module>

Save this somewhere that is publicly accessable as you will need to give the URL for the file location to Google Sites gadget wizard, I put it on my wiki page in a folder, then right click on the download link and select:

Copy LInk Address

Then go to your site, in the place you want to have your gadget, click Insert > More Gadgets > Insert Gadget from URL > paste the copied file public URL into the address field.  You will be given options for the size of the gadget so this will need a little fiddling depending on the size of your button etc, as the Gadget area will push text down the page leaving lots of negative space around it which will look silly.

Also get rid of the display title etc. 

  

and voila! You have a proper button using a custom Gadget! 


I hope this helps.  Buzz me if you need any help with this or leave a comment.  Cheers.
Comments