Sunday, June 19, 2011

Custom Search Elements won't support iframe for much longer - change to new options now

This article is about changes made to Google's custom search engines made in June 2011, and the implications for Blogger users who have been using the iframe option to show search results inside their blogs.

Previously I've explained how to make a Google custom-search engine for your blog,  This is particularly useful for AdSense publihsers, because it lets them have a share of the revenue from the advertising displayed inside Google search results.

In June 2011, Google's Custom Search team announced some new options for displaying search results.  Overall these are a step forward, but they do include removing the "iframe" option which, until now, has been the only way that Blogger users who implemented a custom-search could display the search-results inside their blog.

As a result, Blogger users who used the CSE i-frame display option need to upgrade to one of the new displays.   This can be done now - it's not clear how much longer the iframe-based code will work for.

Also, Blogger users who don't currently have a custom-search in their blog but want to install one have some new options to choose from, as described in the New CSE Display Options.

What's happened for existing Custom Search Engines

If you already have a Custom Search Engine (CSE), you manage it  by logging in to the CSE control panel. If you have been using the iframe option and you go to the look-and-feel tab now, there is a new message like this:

It says:
Deprecation warning: The Iframe option is deprecated. We recommend the "Two page" or "Results only" layouts in the Search element as the new options. Please refer to our developer guide for a complete list of layout options.
"Depreciated" is web-developer speak for "we don't like this, and one day we will stop supporting it and wll do some new feature that makes it break".    In short, "we don't apprecaite this any more".

In short, the new message is saying that the iframe option will work for now, but you will need to change to use something else sooner or later.

New CSE results display options

Instead of the iframe option, Blogger users need to choose one of the options that are based on Google web-elements.   Choose Search-element under Hosting Options and you will be shown the new display options, which are:
  • Full-width - The search box and search results take up the whole width of the place(post, page or gadget) where you put the Search element.
  • Compact - Like the full-width option, this takes up the the entire width of the page or column, but the results section shows fewer results, so it takes up less vertical space. Google say that "this option is optimized for mobile devices, so it works well on Android, iPhone, or Palm webOS devices."
  • Two Column - The search box and the search results section are in places in your webpage, and to leave the search results section, a user must click on the X icon next to the search box.
  • Two Page - The search box and the search results are placed in two different places (posts, pages or gadgets).  In this option, the search results section also has search box, so visitors can submit further queries directly in the search results page.
  • Results Only - Search results are shown in the place (post or gadget) where you put them - but Google CSE doesn't give you a search box, you need to make your own.
  • Google-Hosted - CSE gives you the code for a search-box, and you put this into a post or gadget.  But then someone clicks search, they are taken to a Google-hosted webpage outside fo your blog, which can be opened either in the same window or in a new window.
Google have provided examples of each layout option.

How to install these into blogger

Follow these steps to choose one of the new display options, for either a new or existing Google Custom Search Element that is used in Blogger:

1)  From the Custom-Search-Elements, choose Control Panel, and then choose Look and Feel.

2)  Choose a layout option, by clicking on it.  The one you have selected is shown in a frame.

3)  Scroll to the bottom of the page, and click Save and Get Code

4) Install the code into your blog in the way specified by the option you chose:  some options have code for place where you want the search box and where you want the resutls, while others only have code for one of these.

How well do each of the options work with Blogger

Full-width and Compact

These options both display their results well inside blogger.   However the search-box is only shown on the same page as the results, so either
  • You need to put the search-element into a gadget that is visible the whole time, or
  • Searching your site becomes a two click process (on click to get to the search box, one to run the search), which will confuse some users.
But the search results look good - although the ads at the top blend very strongly into the results.


This option does not currently appear to work with Blogger (at least not when I tested it under Firefox 4 / MS Windows XP)


Inside Blogger, this appears very similar to the way that the iframe-results display worked:   to install the code, you need to say what page or post the results will appear on, and then you are given specific code to put into each of:
  1. The place (gadget or page or post) where the search-box goes. and
  2. The place (gadget, post or page) where the results go.
I haven't fully decided, but it's likely that this is the option I will use for the Blogger-Helpers-Search Tool.

Results only

Again, inside Blogger, the results-only option is very similar to the Two-page option, with some key differences:
  1. There is no search-query bar at the top of the place (post, page, gadet) where the results are displayed, and
  2. You need to make your own search query form and to call the search from it.
It's very likely that I will use this option for several of my other blog-sites, where the search is always called from a gadget:   because the gadget will continue to be shown on the search results page, I don't need to put a search-form into the results.

NB  Having to make your own search-query may seem difficult, but there is a very simple way to do this, by using CSE itself to build the search-box code for you:
  • Choose the two-page option
  • Enter the URL of the post or page where you want the results to appear
  • Click Save and get code
  • Copy the code that you are told to install into where you'd like the search box to appear.
  • Paste that code into the appropriate gadget, post or page
  • Go back to the Look and Feel tab in CSE
  • Choose the results-only option
  • Click Save and get code
  • Copy the code that you are told to install into where you'd like the results to appear.
  • Paste that code into the gadget, post or page where you want to put the search results


I have not investigated this option, because I want to have the search-results right inside my blog.


Related Articles

Putting a Google Search Engine into your blog

Setting up AdSense for your Blog

Blogger-Helpers-Search-Tool - a customised search of high-quality sites

Installing HTML into your blog

Share this Article


HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


  1. CSE changes to layout options - Thursday, June 16, 2011 - have resulted in the inability to carry out a date range search by adding, for example, '&as_qdr=d5' to search string. How do I do the equivalent search in the new environment?

  2. Maxine, I'm afraid that's beyond what I've used CSEs for, so I can't even begin to help. Try asking a question in the CSE help forum, which is at:

  3. Thanks Mary for this valuable information.

  4. My pleasure: I was actually really annoyed when I found out about it, because I'd only just changed the CSE's in all my blogs using the info in your earlier article.