* July 30th, 2008 *
Integrating search on a website can be an incredibly complex subject far beyond my web development skills. Fortunately, Google offers a service called “Custom Search Engine” which you can integrate right into your own site. This leverages Googles awesome search power, and it can all happen directly on your own website!
Ken
July 30, 2008
[ permalink ]
Chris Coyier
July 30, 2008
[ permalink ]
Just change those & characters to &
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?amp;form=cse-search-box&lang=en"></script>
Then it will validate.
Ken
July 30, 2008
[ permalink ]
You are the man! Thanks.
Before I was trying was to escape the = sign not the &
Marc Grabanski
July 30, 2008
[ permalink ]
For anyone who wants static, SEO friendly search that has more ability to be customized - check out the Yahoo Search BOSS web service. More difficult to implement, but yahoo gives you the raw data to do with what you want, so you can customize everything on it beyond what Google provides.
yashh
July 30, 2008
[ permalink ]
@Marc
Nice point highlighted. Yahoo BOSS api is one such I was really waiting for. Google once had such an api but closed it in 2006 and promoted AJAX search api where the results cannot be customized. Now developers can build search products over BOSS api without showing their search logic. Just wrote a post on BOSS api you can check it at http://smallr.net/boss
V1
July 31, 2008
[ permalink ]
If want google’s results u can always do serveerside dom scraping from the google result page.. and process it and spit it out as your custom search engine.
Bryce
August 2, 2008
[ permalink ]
Wow, great tutorial. I had heard of Google Custom Search before, but never knew you could have so much design control over it. I might have to take another look at it.
Chris
August 5, 2008
[ permalink ]
Hi Chris (nice name by the way 
),
may I asked you what combination of hard- and software you used to record your voice? Because it sounds very nice.
I’m an assistant in a multimedia-project and we have no clue how to get nice voice records without spending lots of money for equipment.
(It’s a public institute, we have no money….)
Thanks a lot. =)
Chris
Chris Coyier
August 6, 2008
[ permalink ]
@Chris: It’s all about the microphone. As with anything in the world, you can buy crap and you can buy incredible luxuries, and everything in between. I am very happy with my Rode Podcaster microphone. Around $200 US and it’s very rugged and sounds great.
kyle
August 7, 2008
[ permalink ]
Fantastic! I’ve been watching this the past few days as I work on a new proposal for a client. I want to show them how you can still incorporate a search function on an XHTML site. Right now they have a DNN site, which is outdated and quite ugly if you ask me. So I’m glad I was able to find this and learn how to customize the search box.
Thanks.
Chris
August 14, 2008
[ permalink ]
Heya, this is Chris again.
Thanks a lot for your answer Chris.
I will have a look at this mic.
What Soundcard are you using? I suppose it also plays a crucial role in audio recording.
Art
September 1, 2008
[ permalink ]
Thanks for the tutorial Chris. Just created a site that using the google’s custom search engine. It’s called tutsearch. It searchs 80 hand-picked websites for tutorials (and yes css-tricks is one of them) I also used WuFoo for the form to submit sites. I got tired of using google to search for tutorials and getting everything else except what I was looking for. Now you can search for CSS and get NO results about the band CSS just the code. Thanks again.
Chris Coyier
September 2, 2008
[ permalink ]
@Art: Very cool! I had the idea to to that exact same thing a while ago, then just never had the motivation. I’m glad you did it!
George Bokata
September 23, 2008
[ permalink ]
Any ideas on how to remove the extra white space at the end of search results? I noticed in the presentation video, that is wasn’t there as I assume you were using Firefox?
When I try a search in the example page, the extra white space is displayed - but I’m using Safari (mac). It just appears to effect Safari from what I can tell.
Thanks in advance.
Out of 12914 people surveyed... CSS was the #1 answer!
Or... browse the archives.
Script & Style is a community driven feed of links and exclusive tutorials to help you grow as a designer and developer. Got a great link? Submit it now!
Loading ...
Hi Chris, I have a question when it comes to validating your xhtml code with the w3c validator.
In the past I tried setting this form up for a friend on a site he had, and the one thing that hunted me then was the code not validating.
I was looking at your page and you are getting that “bug” as well. Any ideas on how to fix this or is that one error we should learn how to live with?
The code in question is this.
…op/cse/brand?form=cse-search-box&lang=en”>
✉
If you meant to include an entity that starts with “&”, then you should terminate it with “;”. Another reason for this error message is that you inadvertently created an entity by failing to escape an “&” character just before this text.
Line 30, Column > 80: XML Parsing Error: EntityRef: expecting ‘;’.
…://www.google.com/coop/cse/brand?form=cse-search-box&lang=en”>…
Thanks.