Google Custom Search Engine - iframe Result Page

Notes about the Custom Search Engine iframe interface

• To set up the iframe, go to the CSE Control Panel / Look and Feel page and choose iframe. You can also set some border, background and text colors. Then be sure to Save, and click on Get Code
• Paste the results page URL in the top field of the Get Code page.  This page should have your site look and navigation elements. 
• In the Get Code page, the Search box field will update with the results URL: copy and paste this into an HTML page.
• From the Get Code page, copy the Search results code. Open your results page (the URL you gave above) and paste the code into the middle of that page. The search results will be inserted there.
• iframe results list width and advertising location
  • Note that the free CSE must display the ads returned with the search results.
  • Ads on the right: set the cof parameter to FORID:9 and the result will be 795 pixels wide:
  • Ads on the top and bottom: set the cof parameter to FORID:11 and the result will be 500 pixels wide
  • Set the googleSearchFrameWidth wider if desired.
• The iframe height should auto-adjust based on content (but sometimes leaves a lot of blank space at the bottom).

This example table is centered and has a 1 px border to show exactly where the edges are.  The search box has a red border.  The FORID is set to 11 (ads on top and bottom), and the googleSearchFrameWidth is set to slightly over 500px, it has a 1 px green border.  The search results are set to have blue borders.

Note that this version is carried forward from 2009 and has less JavaScript than 2011 versions, but still requires JavaScript in the results page.

For more information and help, please contact me via the SearchTools contact form.

Page modified: 2011-04-01