Tutorial : Creating A Custom Google Site Search With Your Own Controls In Under 10 Minutes

In case you haven’t stumbled across it yet, Google Site Search (GSA) is a brilliant quick way to integrate search onto your website.  It costs as little as $100 a year for up to 20,000 searches and it can be implemented within less than an hour, if you know what you are doing.

One issue I have whenever I have integrated a GSA, is that I always need to integrate my own CSS and html elements and, after a day of searching, I was able to develop my own .net solution using their custom API.  I’m not going to talk you through the API as there is plenty of information here. Instead I’m going to share the code with you that will give you full control over your mark-up, which should take you less than 10 minutes to implement.

This code sample was created using C#, but it is pretty easy to change for any language.  Also note: you will have to put in your own GSA key in the relevant bit.

Loading…

OK that should give you the frontend of your user control. IN the back end all you need to do is implement the PostbackResults method, shown here :

 protected void PostbackResults(object sender, EventArgs e)
{
try
{
var url = HttpContext.Current.Request.Url.AbsoluteUri;
var query = searchText.Text;
Response.Redirect(string.format("{0}?q={1}", url, query);
}
catch (Exception ex)
{
Logger.Error(ex);
}
}

All this method does is get what the user has entered into the search box, reload the page adding the term to the correct query string parameter.  That’s it!  If you followed the above you should now have a working search on your website, it really is that simple.  The one thing you might be wondering.. why does it look so bad ?!?!? To fix this you just need to copy in the GSA css element and style as required. Below shows you my css file extract.

.gsc-control-cse .gs-spelling,
.gsc-control-cse .gs-result .gs-title,
.gsc-control-cse .gs-result .gs-title * {
font-size: 14px;
font-weight: normal;
color: #FAA634;
}
.gs-spelling a {
font-size: 16px;
font-weight: bold;
color: #FAA634;
}
/* Wrapper for a result. */
.gsc-webResult .gsc-result {
margin: 15px;
padding: 1em 0;
border-bottom: 1px solid #777777;
padding-left: 30px;
}
/* Wrapper for a result. */
.gsc-webResult .gs-result {
height: 75px;
display: inline-block;
}
.gsc-result-info {
text-align: left;
font-size: 1em;
margin: 10px 0;
padding-left: 30px;
}
.gs-image {
height:80px;
width:150px;
padding-right: 10px;
overflow: hidden;
}
/* By default show url at the bottom of the snippet */
.gsc-url-top {
display: none;
}
.gsc-url-bottom {
display: block;
}
/* By default show thumbnail at the left of the snippet */
.gsc-thumbnail-left {
display: block;
}
.gsc-thumbnail-inside {
display: none;
}
/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
display: none;
}
.gs-visibleUrl-short {
display: none;
}
.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
font-weight: normal;
font-style: italic;
color:  darkgray;
font-size: 14px;
}
/* tabbed mode of search control */
.gsc-tabsAreaInvisible,
.gsc-refinementsAreaInvisible,
.gsc-refinementBlockInvisible {
display : none;
}
/* tab specific results header supression
* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
padding-left: 30px;
}
.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}
.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display: none;
}
/* pagination */
.gsc-results .gsc-cursor-box {
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
cursor: pointer;
padding: 12px 15px;
margin-right:10px;
float:left;
position:relative;
line-height:1;
font-size:14px;
color: #FAA634;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page,
.gsc-results .gsc-cursor-box .gsc-cursor-current-page:hover {
cursor : default;
font-weight: bold;
color: black;
}
.gssb_c {
margin: 0 0 0 -10px;
}
.gsc-completion-container {
background :white;
}
/* remove branding */
.gcsc-branding {
display:none;
}

As always, you can download the source code here.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts