About Tom Evslin

Video Profile of Tom Evslin

Follow Tom Evslin on Twitter


Add to Technorati Favorites!
Powered by TypePad
Member since 01/2005


« Election Eve From Afar | Main | Searching for Girl Geeks in Barcelona »

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.


TrackBack URL for this entry:

Listed below are links to weblogs that reference Google Custom Search Engine – Framing the Results:



HEY! Yeay. it fixed my problem EXACTLY. thanks, you saved teh DAY.

Darla Mack

Thank you so so so much for this!!! I've been racking my brains like mad trying to get my Custom Search to work!! And here it is with your tips it only took me like 5 minutes!!

Post a comment

If you have a TypeKey or TypePad account, please Sign In.

Now on Kindle!

hackoff.com: An historic murder mystery set in the Internet bubble and rubble

CEO Tom Evslin's insider account of the Internet bubble and its aftermath. "This novel is a surveillance video of the seeds of the current economic collapse."

The Interpreter's Tale

Hacker Dom Montain is in Barcelona in Evslin's Kindle-edition long short story. Why? and why are the pickpockets stealing mobile phones?

Need A Kindle?

Kindle: Amazon's Wireless Reading Device

Not quite as good as a real book IMHO but a lot lighter than a trip worth of books. Also better than a cell phone for mobile web access - and that's free!

Recent Reads - Click title to order from Amazon


  • adlinks
  • adsense