As a member of the Google AJAX Search API Google Group I have seen multiple requests for a tutorial for non-developers who want to implement this on their site or blog. So, here goes.
Step 1: Get yourself an API key here.
Step 2: On your blog or website, add the following line in between the
< head>...< /head>
sections of your website:
(Note: If you are using a hosted wordpress account, you’ll have to add a page and then add the code since you do not have access to template code)
< script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=insert
your Google API Key" type="text/javascript">
(Note: Replace the text ‘insert your Google API Key’ with the API key provided to you by Google when you sign up)
Step 3: Add the following script (preferrably in the
< head>... < /head>
if you have access, but elsewhere will work) to your site:
< script language="Javascript" type="text/javascript">
//< ![CDATA[
function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
// add search controls in order you want them to appear
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GwebSearch());
// add local search option
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
// set starting point for local search
localSearch.setCenterPoint("Des Moines, IA");
// video search
searchControl.addSearcher(new GvideoSearch());
//set size of dataset you want returned
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
//search options
var searchOptions = new GsearcherOptions();
searchOptions.setExpandMode(GSearchControl.EXPAND_MODE_PARTIAL);
// draw options determine how results are displayed
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
// Execute an inital search (optional - you can remove this line if you dont want it to auto search)
searchControl.execute("Get A New Browser");
}
window.onload = OnLoad;
//]]>
The above script can be modified to suit your needs. For example if you do not want to implement video search, simply remove the line
searchControl.addSearcher(new GvideoSearch());
from your script.
Step 3: Add a div in your template or page for the search control to access. In the case of the code above, you want to add
< div id="searchcontrol" />
to your markup. Put this where you want the search box and results to appear. Position it accordingly.
Step 4: Styling. Here is where you make the textbox, button, and results appear like you want them to. The easiest way to do this is to use Google’s stylesheet provided if you look through their samples deep enough. The easiest way is to paste the following code below the script code above:
< style type="text/css">
@import url(http://www.google.com/uds/css/gsearch.css);
< /style>
Now, if you want a custom style, you can download the linked stylesheet above and edit it. There are a lot of good comments in the stylesheet markup that will guide you through any customizations.
If you have any questions, leave us a comment here and we’ll get back to you to help you with what you need to get this up and running on your site.
Check out my first implementation here, and get a sneak peak at our new design.
Get more information using Google’s reference.
Or, join the Group.
tags: google, search, blog, ajax, javascript, web development
Note: I apologize for the code formatting — I am having issues with wordpress and the pre tags. So, html elements have an extra space in them so they render as text. Sorry for any inconvenience.
Related posts:
- Google Launches New Search Index: Caffeine via googleblog.blogspot.com “So why did we build a new search...
- Google Reader Adds Search If you hadn’t noticed in your Google Reader today –...
- Google Music Search and Google Reviews So I was searching on Google for Norah Jones, my...
- Search Google Docs with Spotlight Precipitate is an application from the Google Mac team that...
- Google Maps API Gets Spatial Search via techcrunch.com Meaning you can search for things on a...


{ 20 comments… read them below or add one }
Hey,
Don’t instruct people to copy and edit gsearch.css. Instead, they should include it, and then add their own customizations after including gsearch.css.
I told them to include it in order to learn it. Once they have figured out which classes do what by playing with the stylesheet they can then create their own once they understand.
UDPATE: After helping a reader through a wordpress implementation we came upon something I failed to mention above. If you have custom wordpress implementation, you will want to put the <script> and <style> parts in the header.php file. And depending the section you want to put the control in, you will have to add the <div id=”searchcontrol”/> in there. The reader I helped decided to put this in the sidebar.php file.
Cool!!!
Does this line: window.onload = OnLoad; avoid having to add this line in your html: ? Basically, they both do the same function, correct?
Oops this comment form seems to have stripped part of my code i typed.
“ should be the same as window.onload = OnLoad();
Hopefully that doesn’t get stripped.
OnLoad is my custom onload function. It is equivalent to
window.onload = function() { //do stuff }also equivalent to another way I commonly call javascript on load:
window.onload = function init() { //do stuff }I want to get a new blog
nothing worse then a tutorial that doesn’t include a working example of the tutorial.
Copy and Paste Jason. Works for me and everyone else that read it.
Nothing worse than a worthless negative comment.
Interesting website, very informative and The above topic helpful. Good job
Nice and simple tutorial
this is needful, but i want to get only response links through the google search
Very useful article and nicely explained. Thank you very much.
Great tutorial!
Saved me some time.
Thanks!
I did my favourite search with google ajax here
hi i work the above sample but in design no control there how it will search
can u pls describe clearly.
Thanks
You can find more information at http://www.ajaxatoms.com. Check in the article section.
Hi,
Thanks for this content, it is very useful. I need some help from your side regarding styling of the page. i just want to put some adds with this content in left side or right side of the search result. Simply i want a control on this to place my adds.
Please help me.
Regards,
Varun
You could place the ads outside the container you are loading the
google Ajax search
{ 8 trackbacks }