How to Change Google Custom Search Results IFrame Width

Google Custom Search Engine (CSE) is highly customizable search engine to power the search function for website or blog. One customizable configuration is hosting option, which determines how the search results are displayed – either via a search element overlay, iframe, or Google-hosted page. Some webmasters may choose to present search results in iframe so that it will blend nicely into the site’s template.

However, the width of iframe is not as easily changed or modified as it seems. The default width of the Google CSE iframe may be too big and wide or too small and narrow for different websites or blogs, which may result in horizontal scroll bar, or too much wide space in later case. The Google CSE code does provide a variable named “googleSearchFrameWidth” within the search results code to change the width of search results’ iframe, but it’s not always working as intended.

To change the width of the iframe which showing the search results, change this width value in the search results code snippet:

var googleSearchFrameWidth = 600;

By default, the width is 600px (pixels). Decrease or increase the 600 as needed to match the design of the site. However, there is limitation to how small the width of iframe can be reduced to. For iframe which has advertising displayed on the “Top and Bottom”, the minimum width of iframe is 500 pixels, while iframe with ads appear on the “Right” or “Top and Right” must have the width of at least 795 pixels.

Thus, if you intend to reduce the width of iframe to less than 795px, another line of code has to be changed in search box snippet, which is:

<input type="hidden" name="cof" value="FORID:11" />

The FORID:11 indicates ads will be placed on top and bottom of iframe. FORID:9 is for ads on the right, while FORID:10 is for ads on the top and right, both of which must have minimum width of 795 pixels. As the result, no matter which value is assigned to googleSearchFrameWidth, any less value than minimum width will be ignored. The rule also apply to paid Google Custom Search or Site Search which does not have ads.

If you want to tweak the iframe to display with width less than assigned minimum, a hack on show_afs_search.js is required. Here’s a step-by-step guide on how you can edit the show_afs_search.js, self-host the file, and get to display search results in iframe less than 795 or even 600 pixels.

1. Download and save show_afs_search.js from http://www.google.com/afsonline/show_afs_search.js.
2. Edit the show_afs_search.js with any text editor.
3. Choose of the following ways to achieve the hack to has iframe at any desired width:
   1. Replace the following code:

      width:c

      To:

      width:"600"

      Where 600 should be replaced with the desired width in pixel.

   2. Replace the 795 or 500 which corresponding to cof’s FORID value tag of search box snippet in the following code with the desired width value in pixel:

      var c={"9":795,"10":795,"11":500}

      The trick above reduce the minimum width required to each of three ads display location supported. So, the value of desired width still has to be set properly in googleSearchFrameWidth variable in search results snippet.

   3. Locate the following line of code:

      d={name:”googleSearchFrame”,src:d,frameBorder:g.googleSearchFrameborder,width:c,height:b,marginWidth:”0″,marginHeight:”0″,hspace:”0″,vspace:”0″,allowTransparency:”true”,scrolling:”no”}

      Change:

      width:a

      To:

      width:googleSearchFrameWidth

      The trick above will force search results iframe to display in width that is defined by googleSearchFrameWidth variable.

4. Save the modified show_afs_search.js, and upload the edited show_afs_search.js to the same directory of which search results page is saved.

   You may upload to any public location that accessible from Internet, but you must specific full path to the file in step below.

5. Modify the last line of search results code snippet from:

   <script type=”text/javascript” src=”//www.google.com/afsonline/show_afs_search.js”></script>

   To:

   <script type=”text/javascript” src=”//full/path/to/show_afs_search.js”></script>

   Or,

   <script type=”text/javascript” src=”show_afs_search.js”></script> (if show_afs_search.js is located in the same directory with the search results page HTML file.