How to install a Google Custom Search

November 26, 2009

If you’re looking to enhance performance on your website’s search engine here is a very easy method that will benefit you in two ways.

  1. You will make money from it
  2. It’s better then what you’ve got installed already.

If you’re not an AdSense  member it’s time you start reading more about how Google can give you the money you’ve been avoiding.

So what is Adsense Search? AdSense for search is a free solution that allows publishers to place a search box on their site and earn revenue from relevant ads on the search results page.

  1. Choosing the content your users search: your site, a collection of sites you choose, or the entire web.
  2. You can also prioritize and restrict search to specific sections of sites. customization of look and feel – you choose the colors, location of the ads, and the option to host the results on your site or have Google host them for you.
  3. Monetization of search results pages with targeted ads

See it in action:

So how do we do this? Easy Peazy.

STEP 1 (Getting the Google Code)
- You will need to go to Google Custom Search http://www.google.com/coop/cse/ and register for an account if you dont already have one. Follow the steps to create a new search engine.
- In the “Look and Feel” tab, you will need to choose the “iframe” option
- Specify a URL in your site where you want the search results to appear: eg http://your_domain_name/search/
- Make sure you specify the advertising be placed on the top and bootom

The Search Box Code and Search Results Code will look like this:

<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

STEP 2 (Create a Search Page to Display the Google Custom Search Results)

You will need to create a search page for the google search results to be on. Making sure the permalink for the page is the same as you specified above.
- Create a new page named Search via the Pages -> Add New command on the left menu in the Admin panel.
- Edit the post slug if needed to ensure the Permalink is http://your_domain_name/search/
- Click the HTML tab in the post editor.
- Paste the Google Search result code.
- Save and publish the page.

STEP 3 (Modify the searchform.php file)
You will also need to modify the searchform.php file. Replace all the contents of the searchform.php file and paste in the Google Search Box code.

For example your new searchform.php file will look like this:

<form action="http://www.yoururl.com/search/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="017284621037843979677:6xpazlqjxva" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

STEP 4 Style the Results Page
The default google custom search results page may be too wide for the themes page if you dont specify the advertising be placed on the top and bootom. To make it fit on the page change value=”FORID:10″ to value=”FORID:11″ in the Google Search Box code. If you need to style the results further you can directly download and manipulate the Cascading Style Sheet (CSS) files that control results styling. Refer to the documentation here http://code.google.com/apis/ajaxsearch/ … index.html

{ 2 comments… read them below or add one }

1 Chat Roulette March 15, 2010 at 16:32

I never thought of viewing search results differently, but this gives me a new idea. Thanks!

2 Daniel March 15, 2010 at 16:33

No problem :)

Leave a Comment

Previous post:

Next post: