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:  


A Google Sites Code violation warning which it then rips out the code that makes your button special 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 (I know that there is already a Twitter gadget in the Gadget store but it was easy and people are familiar with how it's supposed to look):

<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 a text editor like notepad.exe, DriveNotepad or xml.edity.com and this 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 go to the website for the service you want to create a button for, example Twitter is https://about.twitter.com/resources/buttons#follow 

Replace the line of text:

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

with your HTML code that is needed to embed in your site and add the title of the module where it says:

<ModulePrefs title="Shoosh Monkey IT Solutions CSE" />

So the finished product should look like this (changes highlighted in orange): 

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Twitter follow button" />
  <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 as an .XML file format file somewhere online that is publicly accessible 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!

Set your width and height and remove the title etc..

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.