Automatically Submit Google CSE

This tutorial outlines two techniques to customise Google’s Custom Search Engine:

  1. Generating your own custom styled search form
  2. Fetching the search results on page load rather than the default which requires the Google provided search form to be submitted

This enables you to place your custom styled search form anywhere on your site (for example in a global site header), and when the form is submitted the search results are automatically loaded as soon as the user lands on the search page – as opposed to the default behavior which requires submission of the Google provided search box.

This is a sample global form that I use in my header file, which submits to the url “/search”. I will leave the CSS side to your imagination.

<form id="search" method="get" action="/search">
<fieldset>
<input type="text" name="q" value="" placeholder="Search Records" />
<button type="submit">Search</button>
</fieldset>
</form>

On my search page, the following code displays the Google CSE search box and pre-loads the results which are passed in from PHP’s $_GET. Don’t forget to replace myUniqueID with your Google CSE unique ID.

<!-- div container to display search results -->
<div id="cse" style="width: 100%;">Loading...</div>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('**myUniqueID**'); // change this to your unique ID
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF); // open results in current window
    customSearchControl.draw('cse'); // set the results div id
    customSearchControl.execute("<?php if (isset($_GET['q'])) echo filter_var($_GET['q'], FILTER_SANITIZE_STRING); ?>"); // run the search using the value of $_GET['q']
}, true);
</script>

Google-O-Meter tutorial with examples

Sentence Severity
You are sentenced to Life (doh!)... in Australia (woohoo!)

I came across the Google-o-meter widget in the Google Charts API today, and had a perfect use for it in my current pet project, convict records.

For the uninitiated, the Google Charts API allows you to request an image with query string parameters and format it in various different ways to produce a pretty graph.

I wanted to display the severity of a convict’s sentence, relative to the known minimum and maximum sentence terms of other convicts I had in my database.

It took a little wrangling before I discovered that I really only needed a few parameters to achieve what I wanted – the final request HTML looked like this:

<img src="http://chart.apis.google.com/chart?chs=240x100&amp;cht=gm&amp;chco=555555,FAFA05|FF0000&amp;chd=t:<?php echo $sentency_severity; ?>" width="240" height="100" alt="Sentence Severity" />

Lets break that down a little.

Range and Indicator Position

The Google-o-meter defaults to a range of 0-100, therefore the easiest way to position your indicator is if you can create a percentage value from 0-100. It does also support custom ranges but that is beyond the scope of this tutorial.

How do we determine the position of the indicator (in PHP)?

// determine the sentence severity
$sentency_severity = round(($term / $max_sentence) * 100);

The sentence severity is the sum of the sentence term in question, divided my the maximum known sentence (in my case 47 years, multiplied by 100, and finally rounded for good measure. This gives a percentage result somewhere between 0-100%. 23 years = 50%, 47 years = 100% and so on.

Other Parameters

Now that the sentence severity is known, all that is left to do is to pass the parameters to the Google Charts API.

  • chs=240×100
    The dimensions of the image length x height. *important* if you change the height value here, make sure you also change the <img> width and height attributes
  • cht=gm
    The chart type – gm = google-o-meter
  • chco=555555,FAFA05|FF0000
    The indicator hexadecimal colour followed by the start colour and end colour (the gradient in between is almost certainly created by some sort of voodoo magic)
  • chd=t:<?php echo $sentency_severity; ?>
    The chart data, in this case the indicator position.

The documentation is quite extensive on both the Google-o-meter and the Chart Wizard can also be helpful, although I did find that the wizard was a bit confusing for the google-o-meter in particular, and it ended up adding more parameters than I really needed in the end.

The Golden Rule of Design: KISS

A sincere thanks goes out to my borderline insane visual communication from my latter high school years – it all started when we had to build a scale house out of paper materials, architecturally acurate to the last detail. What I failed to see was that my fantastic H shaped house had a roof that was incredibly complex, nearly making me overshoot the project deadline trying to figure out how to build a roof for the thing!

My teacher told me something thing that really stuck, and it continues to be a good way of kick starting the creative process when I find myself staring aimlessly into space.

The rule is called KISS – Keep It Simple, Stupid.

The “stupid” part is a reflection of how many of us tend to act out of instinct – so many ideas are floating around that we want to do everything and anything. When a designer sits down and scribbles down how the design will work, perhaps only one person can make sense of it – can you guess who? The user is not stupid, the designer is stupid for expecting others to realise their vision.

Can you think of a top site that does not follow the rule of KISS? Look at Google’s phenomenal growth; once upon a time there was no Google Tools, Google Maps or Google Earth. Despite these tools being generally easy to use, what could be easier than the original Google search design that has barely changed in years? One logo, one search box, one submit button, and a few links at the bottom.

What the other major search engines failed / fail to notice, was that this very simple idea worked. This very simple idea kept people coming back over and over again to something that delivered what they wanted, without any hoo haa. Sure it helped that Google also generally returned the best results, but my opinion is its success lies in the simplicity.

Some sites have the benefit of only providing one function while others are obviously far more complicated. Take my home away from home, www.sitepoint.com as an example. The initial navigation is brilliant:

Home | Articles | Books | Kits | Videos | Blogs | Contests | Marketplace | Forums [search]

They do not enjoy the luxury of having one or two simple goals for their website, but they have the benefit of very well organised content. They started with perhaps one or two of the above sections, and expanded. Now they are enjoying a thriving forum community and a rising star status amongst the web community, not to mention a huge turnover thanks to a user base that keeps coming back.

I’ve been reading “The Usability Kit” from SitePoint.com of late, and it has a very useful set of points that I would like to share – in fact I keep them permanently pinned on the wall next to me!

  • Provide effective navigation and orientation
  • Provide appropriate functions
  • Provide access to help and support
  • Minimise Errors
  • Give the user control
  • Support the user’s prefer way of working
  • Speak the user’s language
  • Keep the user informed
  • Be consistent
  • Implement a clear visual design
  • And for good measure, my addition: Keep it Simple Stupid!