How to Add Google Search Engine in Your Website

You can easily add a search engine on your website to provide your users a way to explore your website or the web by just entering a keyword. There are several sites that can provide you with this service, but what I like most is Google.com. Aside from it’s the number 1 search engine in the world, it allows you to easily set up the search box and customize how it will look like.

First off, you need to create an account on on Google or Gmail. Log in to your account and visit this site. Once you are on the google’s custom search box page, you can click on the “Create a Custom Search Engine button” and fill out the form. You can specify if the search that will be made by your website visitor is restricted to your site or the whole web.

To generate the html code that you can insert in your website, look for the control panel link and click it. Click on the Code link to display the code. Below is the code generated when I used the CSE feature of Google.

<!– Google CSE Search Box Begins –>
<form id=”searchbox_007628096636203655468:atwji6iltvi” action=”http://www.google.com/cse”&gt;
<input type=”hidden” name=”cx” value=”007628096636203655468:atwji6iltvi” />
<input type=”hidden” name=”cof” value=”FORID:0″ />
<input name=”q” type=”text” size=”40″ />
<input type=”submit” name=”sa” value=”Search” />
<img src=”http://www.google.com/coop/images/google_custom_search_smnar.gif&#8221; alt=”Google Custom Search” />
</form>
<!– Google CSE Search Box Ends –>

By default, the search result will be displayed on http://www.google.com/cse. If you want that the result will be displayed on a page with your own layout, in the form tag, change the value for the action attribute to the url of your “result page”. To display the result of the search in your “result page”, you have to insert the Google Search Result Snippet. The snippet can also be found in the code page where you found the CSE Search Box snippet. The code will look like this:

<!– Google Search Result Snippet Begins –>
<div id=”results_007628096636203655468:atwji6iltvi”></div>
<script type=”text/javascript”>
var googleSearchIframeName = “results_007628096636203655468:atwji6iltvi”;
var googleSearchFormName = “searchbox_007628096636203655468:atwji6iltvi”;
var googleSearchFrameWidth = 600;
var googleSearchFrameborder = 0;
var googleSearchDomain = “www.google.com”;
var googleSearchPath = “/cse”;
</script>
<script type=”text/javascript” src=”http://www.google.com/afsonline/show_afs_search.js”></script&gt;
<!– Google Search Result Snippet Ends –>

You can visit TESDA9 website to see a sample implementation of this feature.

It’s not too hard at all. 🙂

Advertisements

One Response to “How to Add Google Search Engine in Your Website”

  1. renen Says:

    rye, i tried the tesda site search, its not doing a site search instead a web search =) must be the configuration on the google site search feature…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: