Custom Search Engine for Google Sites


Custom Search Engine - Control Panel

In your Custom Search Control Panel you have many more options built into Site Search within Google Sites:

Basics - Search Box Description , Language and some Preferences
Sites - Active Sites called from Web Master Tools.

Indexing - Indexing Statistics and Re-indexing
Refinements - Refinement Labels - a form of tagging. Adds 'refined' search tabs to Search Element (mini site) and CSE page searching.

Promotions - Promotional Information Triggered for Search Queries
Synonyms - Variants of Search terms - Grouping terms

New* Auto-completions - Automatically Suggests Search keyword directly in the Search Box - Custom Auto-completions Add/Hide Keyword Terms

Custom Search Engine - Advanced Settings

Look and feel - Design Layout
Get code - Search Box Code
Collaboration - Invite Collaborators
Make money - Show Ads from you Google Adsense
Business account - Business Site Search paid search engine - ad free and even more options!
Advanced - Annotations - XML Context upload Rich content additions - Promotions download.

Preview - Preview your Site Search Box
Statistics - View Day/Week/Month/Overall Search Queries linked to Google Analytics.

Custom Search Engine Gadget


CSE Gadget Example - The CSE Gadget is available for your Custom Search Box when it is created.

The Generated code must be created in a Google Gadget because it uses JavaScript. (Enables Auto-complete)

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function() {
google.search.CustomSearchControl.attachAutoCompletion(
'009175364876030469854:bhwkzol-tjc',
document.getElementById('q'),
'cse-search-box');
});
</script>
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="0091xxxxxxxxxxx54:bhxxxxlxjc" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="off" 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>


Custom Search Engine Form (Without JavaScript)


You can simply embed the following Custom Search Engine Form directly into Google sites.
Changes the yellow Elements.

(No JavaScript features will be available eg. Auto-complete)


<form action="http://www.goopal.org/system/app/pages/customSearch" target="_Blank"> <input type="text" dir="" name="q" size="20"> <input type="hidden" name="scope" value="cse-goog_1xxxxxxxx6"> <input name="sa" type="submit" value="Search"> </form>

Replace the Website with your Google Site.

action="http://www.goopal.org/system/app/pages/customSearch"

Get the cse id from the CSE search
 cse-goog_1xxxxxxxxx6







Search Box

Related tab : Search Box using the CSE Search Element which provides realtime search results in the same page.

Searches tab: Multiple Search Boxes
Opening a new page for the Custom Search Engine with the choose of site search or web search.

Custom Search Engine Example


New* Google Marker


The Google Marker adds more functionality to your Custom search engine . 


With the Google Marker Link you can Add Sites , label Sites and annotate your Google Site.

In the "Goopal Toolbar" Google Gadget above drag the Link "Google Marker" into the address bar of your Browser.

You can Annotate (Tag) your Google site for the Custom search Engine.

The annotations options for www.goopal.org for example:


Business

Html

Embed

Tutorials

Features



CSE Control Panel

These Annotations are setup in CSE Control Panel for website sections using a URL.

Annotation: Business
www.goopal.org/google-sites-business/ 

Annotation: Features
www.goopal.org/google-sites-features/  

CSE Search Element

These annotations also appear as tabs for the CSE Search Element and Links for the Standard CSE Web Page Search.






Google Marker Link Code

In Firefox/Chrome Browsers: Drag the marker into the Bookmarks Toolbar.

Internet Explorer users: Right-click on the marker, then select "Add to Favorites" > "Links."

You will need to use the <object></object> tags for Google Sites. Inline JavaScript is filtered out in the Google Sites HTML.


<object><a href="javascript:(function(){var a=window,b=document,c=encodeURIComponent,d=a.open('http://www.google.com/cse/manage/bookmarklet?url='+c(b.location) + '\x26hl=en','coop_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=420px,width=700px,resizable=1,alwaysRaised=1,scrollbars=1');a.setTimeout(function(){d.focus()},300)})();"> Google Marker</a></object>


New* Auto-Complete


In Custom Search Engine you can enable/disable the Auto-complete feature. the autocomplete is triggered when typing within the CSE search Box.

You can define the keywords for your automatic suggestions or even disable keywords.


Search Gadgets and Search APIs





 Search: Tags Search