08 Dec, 2007
Google custom search engine
Web Development » Google, Search » Google custom search engine
I have heard of Google Custom Search Engine since a few months ago, but not until recently I gave a good attention and decided to set one up for this blog. Setting up is really simple and it can be done just in a matter of seconds. Here’s a step-by-step guide on how to set up a Google Custom Search Engine for your website:
1. Login to your Google account
2. Go to Google Custom Search Engine homepage
3. Click on “Create a custom search engine button” and it will take you to a form
4. Fill in all the relevant details into the form and click “Next”
5. Provided that there was no error, you will be presented with a “Preview and Congratulations” page. Click “Finish”.
6. Now, to personalise the look and feel of the search engine you just created, go to Manage your existing search engines page.
7. You will see the search engine you just created listed under “My Search Engines”. Click on “Control Panel”.
8. When you are in “Control Panel” page, click on “Look and Feel” link from the top navigation. It allows you to customise the style of your search results pages to match your site.
9. When you are happy fiddling around with the style and have saved the changes, click on “Code” link from the top navigation to get the source code to put into your site
10. Choose “Host results on a non-Google site using an: iframe – requires two pages: one for the search box and another for the results” option
11. Create a new page in your website, name it “Search” and upload it to your web server (If you are using WordPress, login to WordPress Admin, click on Write -> New Page and publish it).
13. Put the URL of the page you just created into URL field provided under “Specify search results details” section
14. You will notice that source code for “Search box code” and “Search results code” are updated on the fly with the URL you put into the URL field
15. Although Google says you need two pages for the iframe option, you can actually get away with just one page. Copy and paste both “Search box code” and “Search results code” into the search page you created earlier in Step 11.
16. Make necessary changes such as the width of the textbox in “Search box code” [input type="text" name="q" size="25"] or the width of the search result iframe in “Search results code” [var googleSearchFrameWidth = 600].
17. Once you are happy with everything, upload the page back to your web server (or republish the page if you are using WordPress).
18. And that’s it – you now have a Google Custom Search Engine perfectly integrated into your website!
The thing I love about Google Custom Search Engine is that it can be integrated with other google products such as iGoogle, Adsense and Analytics, which means you could add the search engine to your google homepage, make money from it, or keep track of what people are looking for on your site.
Google Custom Search Engine rocks! Have a look at the google custom search engine I created for this blog.
Screenshots
Technorati Tags: google, search, search engine, custom search, site search, tool
