With Google AdSense Search you can harness the power of Googles Search Engine and maybe make a couple dollars through advertising. Although it is not necessary to have a Google AdSense account to add Google Search to your site if you have one or can sign up for one it is just another benefit if you want to monetize your searches.

Before you begin.

The first thing you should do is make sure Google has current search data for your site.

You can do this in many ways you can submit your Website directly to Google.

If you have a Blog or use CMS software there is probably a plugin to announce your XML Site map to Google.

Setup

In this HowTo we will setup a Google AdSense search Box and we will make a Results page template to display the results on your own site.

Login to your AdSense Account and select AdSense for Search as the Product you want to setup.

Search Type – select Only sites I select and enter your website in the Selected Sites box below.

Optional Keywords: If you want to add some keywords to restrict your search you can but it is probably better to leave this open.

Select your encoding and other options like language.

Add a Channel for your Search Box or make a new one.

Safe Search is probably best left on if you have a general rated site.

click continue and setup the look of your search box

Look and Feel: You have a few options to match the search box to your site layout. The Watermark option is nice because the Google Logo info is located within the Box and less space is used around the box requiring more area on your sites pages.

Set the Width of the Text Box area by number of characters visible however larger searches are possible the visitor just won’t see the full text search.

Don’t worry about the preview width above your selections the box will not be that wide when you insert it on your site.

Select Continue

Setting Up the Results Page Info

You have a number of options here choose whether you would like your search results to open on Google or within your site.

Select Open results within my own site then enter the url of the html page that we will make next for where you want your visitors taken when they perform a search.

We will use http://www.yoursite.com/search.html

Enter width of results area it must be at least 800px wide in the setup but you can make it smaller once you have the code to put in your search.html

Select the location that you want Google to place Text ads within the search Results.

If you have a wide page test the side but for most sites choose the top and bottom.

Set Your Colors
This is important you want the results to match your site but also standout so use appropriate color settings and check the preview.

Save Your Search and Continue to the Code

Getting the Code

On the next page you will be presented with 2 text boxes of code.

The top box contains the code for your Search Box that you can paste into your Header area or sidebar to allow your visitors to enter their search information.

The Bottom Box gives you the code that you need to put into your Search Results html page.

Copy the code from both boxes and place it into a temporary text file so you can past it into your theme files and your search results page.

Search Results

Once you have tested your search box and made sure it is working you will want to theme your search results.

Generic Search results will show up in a generic page that isn’t very attractive for your visitors.

Yes it works but because theming your results is so easy there is no reason to use the default search.

The first thing you should do is visit the most generic page on your site.

This could be a page or single post. You want one that is basically empty. Hey theres an idea if you are using a CMS product just create a page that is empty.

Now view source on the page and copy the contents to a text file.

You should now edit out any content that will change overtime.  Personally I feel you should even edit out menu items and just have a HOME link. After all if you are searching for something you want to find the next link to click in the results not on a menu.

Once you have slimmed down your html to just a single generic page you can add the code that will be used to display the search results.

The Search Results will be shown within the IFRAME you paste into your Template File.

The search results code  looks like this
As you can see the IFRAME is named and when visitors use your search box it will target that frame within your search.html file.
<div id=”cse-search-results”></div>
<script type=”text/javascript”>
var googleSearchIframeName = “cse-search-results”;
var googleSearchFormName = “cse-search-box”;
var googleSearchFrameWidth = 800;
var googleSearchDomain = “www.google.com”;
var googleSearchPath = “/cse”;
</script>
<script type=”text/javascript” src=”http://www.google.com/afsonline/show_afs_search.js”></script>

Overriding The Width of the Results
As you can see above the frameWidth is set and can be altered here to a smaller window if you need to. Do not make it too small but you can slightly adjust it to fit your layout better. This

Save the Search Template and name it search.html or the name you provided when you setup your search within the AdSense setup.

Now FTP the file as ASCII to your website and place it in the location that you used when you setup your AdSense Search.

Test your search box on your site and you should be sent to your results page with a nicely formatted page of information and ads.

Final Notes

Everyone’s site is different and it may take you a little time to adjust how your search box and results page work best for you.

Remember you want the results to match your site well enough that users feel that the search process was performed by you but you also want the information to stand out so visitors can make use of it easily and quickly.

And if you mess up a color scheme don’t worry just log back into your AdSense account and make changes and resave your settings. Updates will occur automatically and there should be no reason for you to alter the code for your search box or results page.

Test the NPSites Search box for a demo we use the Google AdSense Search on this site because it is the best we have found.