lördag 31 oktober 2009

Google Sök på din hemsida

Med Googles AJAX Search API kan man lägga in en sökfunktion som söker igenom sidorna på sin webbplats. Jag har valt Custom Search Engines och modifierat lite så att resultatlistan är tom till att börja med.

I head-taggen:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
google.load('search', '1');
// Whenever a search starts, alert the query.
function searchStart(searchControl, searcher, query) {
var queryDiv = document.getElementById('query');
queryDiv.innerHTML = "<p>Du sökte efter: " + query + "</p><h2>Sökresultat</h2>";
}
function OnLoad() {
// create a search control
var searchControl = new google.search.SearchControl();
// Set the Search Control to get the most number of results
searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
// web search, open, alternate root
var options = new google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("searchResults"));
// site restricted web search with custom label
// and class suffix
var siteSearch = new google.search.WebSearch();
//siteSearch.setUserDefinedLabel("Min hemsida");
//siteSearch.setUserDefinedClassSuffix("Sök");
siteSearch.setSiteRestriction("url");
searchControl.addSearcher(siteSearch, options);
// Set a callback so that whenever a search is started we will call searchStart
searchControl.setSearchStartingCallback(this, searchStart);
searchControl.draw(document.getElementById("searchForm"));
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>

I body-taggen
<h1>Sök</h1>
<div id="google-search-form">
<div id="searchForm">Laddar...</div>
</div>
<div id="google-search-result">
<div id="query"></div>
<div id="searchResults">Laddar...</div>
</div>


Har ändrat lite på standardutseendet via CSS:
.gsc-twiddleRegionCell { /*döljer rubrik Webb*/
background-image : none;
display : none;
}

Googles AJAX Search API

Google web elements
Vill du göra det ännu enklare så hämta färdig kod direkt på Google web elements. Där kan du också enkelt koppla ditt Adsense-konto till sökmotorn.

Inga kommentarer: