Google Custom Search Engine – Framing the Results

Election over; back to nerding.  This post has some pointers for getting the Google CSE (Custom Search Engine) results page to show up inside a page on your own site or blog. It’s not too hard but takes a little work.

By default, Google search results show up on a Google page.  The reader has now left your site and needs to use the back button to return.  If you frame the search results, you can still leave your navigation sidebar, for example, in place so that the reader can get back to pages on your site if that’s what she wants to do.

Having the results on your site also means that you can use your site monitoring software to capture the search terms readers are using and to monitor where they go when they leave.  These statistics can be valuable in improving the effectiveness of CSEs you’ve built.

Of course, you don’t have to have a web site to have a CSE.  Google will host both your search box and your results page if you want.  In that case, no point in reading the rest of this post.  But, if you do have  a website or a blog, then you probably want to closely link your CSE(s) to it.

As part of the CSE control panel, Google generates code necessary to make search results appear on a page you host.   Google FAQs say that you want to place the search results “in an iframe on your own site.”  At first this sent me off on a wild goose chase.  I’m not really an HTML nerd so I Googled “iframe html” and got this great tutorial.  Made sense: iFrame is a way to embed a page in a page just like IMG imbeds an image. Built an iFrame in a test page and it showed up empty!

Hmm…downloaded the source from some sample sites that have embedded search pages and realized that what Google should have said was “the javascript we’re giving you to embed builds an iFrame dynamically wherever you put it in your page.”  So the net is you just stick their provided code in your page and it builds the iFrame.

Next problem was how to get this page to show up between the sidebars of Fractals of Change which is a TypePad blog.  TypePad documentation was very good on this.  Hopefully other blog platforms are as well.  Seached for “index templates” (lucky guess) in the knowledge base and got this helpful page.  What you want to do is create a new index template by copying the Main Index Template and put the Google supplied code in place of the tag: <$MTWeblogIncludeModule module="entry-list"$>.  The result of doing that is that search results show up where your posts normally do. Here’s how it looks in FOC:

You can also click here to see it live.

Final problem was that the search results as they came back were too wide for my center column.  Looked easy to fix because they have a parameter in their generated code “var googleSearchFrameWidth = 600”.  Changing this, unfortunately, does nada.

Nothing in the documentation about this.  But nerds help nerds; the discussion group for CSEs had the answer (and many others as well).  It all has to do with stylesheets.  You surround the Google supplied code with “<div id="google_results">…</div>” and then you go into your stylesheet (in TypePad the stylesheet is an index template) and set the width for google_results with something like this: “#google_results IFRAME {width: 500px;}”

Side result of this was I now knew enough to make my About page appear between the sidebars as well.  All it needed was another index template and another addition to the stylesheet.  Check it out here.