How to Get Google AJAX Search For Your Site
If you want some help getting the Google AJAX search control working on your site, here's a quick and easy summary of what I did.
UPDATE: Google has updated their search control, making some of this code redundant. If you are using the code below, I've written another post outlining the changes you should make. You can view the new post here.
A little HTML, a little CSS, and a little Javascript should do the trick. In my HTML, I used two divs, and a link to clear the results. One div is the search control div, and the other is a wrapper for the search control div. I put it near the bottom of my html files so it appears on top of the content on each page. Here's how it looks:
I also added an onload function to the body tag:
For the css, I styled the wrapper to have an absolute position in the top right corner of my site. You can put it anywhere you'd like. I made both the search control and the clear link float left so they'd be on the same line. I gave the clear link some padding on the right. Here are the css changes I added:
Lastly, the Javascript. I found this "hack" from a post made to Google Groups, but I changed it slightly. This goes inside the header of your html file(s) ( you could also put it in an external javascript file). You just need to change where I have "www.cjmillisock.com" to your site's URL.
That's all there is to it. Now if only Digg would replace their site-search with this. . . .
UPDATE: Google has updated their search control, making some of this code redundant. If you are using the code below, I've written another post outlining the changes you should make. You can view the new post here.
A little HTML, a little CSS, and a little Javascript should do the trick. In my HTML, I used two divs, and a link to clear the results. One div is the search control div, and the other is a wrapper for the search control div. I put it near the bottom of my html files so it appears on top of the content on each page. Here's how it looks:
<div id="searchControlWrapper">
<a href="#" id="clearLink"
onclick="searchControlClear();">Clear</a>
<div id="searchControl"/>
</div>
I also added an onload function to the body tag:
<body onload="onLoad();">
For the css, I styled the wrapper to have an absolute position in the top right corner of my site. You can put it anywhere you'd like. I made both the search control and the clear link float left so they'd be on the same line. I gave the clear link some padding on the right. Here are the css changes I added:
#searchControlWrapper
{
position: absolute;
top: 5px;
right: 5px;
background: #FFF;
border-left: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-left: 5px;
padding-bottom: 5px;
}
#searchControl
{
float: left;
}
#clearLink
{
float: left;
padding-right: 10px;
}
Lastly, the Javascript. I found this "hack" from a post made to Google Groups, but I changed it slightly. This goes inside the header of your html file(s) ( you could also put it in an external javascript file). You just need to change where I have "www.cjmillisock.com" to your site's URL.
<script language="Javascript" type="text/javascript">
//<![CDATA[
function onLoad()
{
// Create a search control
var searchControl = new GSearchControl();
function MyBlogSearch()
{
this.execute_=GblogSearch.prototype.execute;
}
MyBlogSearch.prototype=new GblogSearch();
MyBlogSearch.prototype.setBlogUrl=function(blogUrl)
{
this.blogUrl_= blogUrl;
}
MyBlogSearch.prototype.execute=function(q)
{
if(this.blogUrl_)
q+=' site:'+this.blogUrl_;
return this.execute_(q);
}
var blogSearch=new MyBlogSearch() ;
blogSearch.setBlogUrl('http://www.cjmillisock.com');
searchControl.addSearcher(blogSearch);
// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchControl"));
}
function searchControlClear()
{
document.getElementById( "searchControlWrapper" ).innerHTML = "<a href='#' " +
"id='clearLink' " +
"onclick='searchControlClear();'>Clear</a>" +
"<div id='searchControl'/>";
onLoad();
}
//]]>
</script>
That's all there is to it. Now if only Digg would replace their site-search with this. . . .
Labels: google
posted by CJ at 6/05/2006 02:23:00 PM
38 Comments:
Excellent job, very nice layout and use of the API, I plan on using this on some of my sites, thanks for sharing with everyone.
Good one and thanks for sharing this with all.
I also included the Search API in my blog, but for some reasons I could not get it on. You can visit my blog: http://sumanthtechsavvy.blogspot.com/ and help me if you can.
thanks again and keep going...
Let it be just above the About Me section in the sidebar.
thanks,
Sumanth.
tosumanthkrishna@gmail.com
Now if only blogger would introduce native categories with their xml there would be a darned easy way to pass these to the google blogsearch for an instant "who else is blogging about:" link.
Damn that would be good.
thanks for sharing such a valuable information- you certainly seem to know what you're doing =)
Yeah!
how to get google ajax search for your site
Very helpful information here! It's appreciated. I was wondering if anybody could email me and answer me one simple question? I don't use css in my coding (I just don't enjoy it...), but I could still use the javascript and the div tags in my html, right? And still get the search box?
You betchya, Mike. You don't need to use the CSS to implement the Ajax search. It's only for positioning (the upper right in my case) and styling (the font and the border in my case).
I am so going to try to get this working on my blog!
Thanks for posting this! Having a bit of trouble getting it working myself (so far only the "clear" button is showing up, for whatever reason) but it seems like an amazing tool.
CJ is the man!
They should change the name to CJAX!
Sorry for the newbie question, but does your solution require any particular DOCTYPE?
To my knowledge, no DOCTYPE is needed.
Pardon me for all together different question, but I'm curious to know if it is possible to get the Google Suggest way this search bar.
Yours is another great way to do that. But, If it is possible to do Google Suggest way then can you help me with it?
Email: chillingdk@yahoo.com
Thanks for your help.
I can't seem to get this to work, there is no search box
asdfadsfadsf
Sooo... How about you tell us WHY this AJAX search bar is so cool, before I add it to my site. :)
PROPS TO YOU MY CYBERBLOGGER ANGLE!
THANKS SO MUCH FOR CONTINUING AN ABBIE HOFFMAN MANNER OF STAYING A STEP AHEAD OF "THE MAN"! REMEMBER HIS BOOK? INTITLED, "STEAL THIS BOOK!".
THIS GENIUS WROTE A WONDERFUL TRAVELING THROUGH LIFE GUIDE LATE 60'S-EARLY 70'S AND AT THE TIME EASILY ATTAINABLE BY THE MASSES.
I SO APPREACIATE YOUR TOIL AND TROUBLE VIA TRUDGING THE ROADS OF CYBERSPACE, PICKING UP INFO, SPREADING IT WIDE OPEN, AND KEEPING IT REAL! THANKS SO MUCH!
This post has been removed by a blog administrator.
This is very good stuff, my heartfelt thanks!!
What modification do i need to make it compatible for my personal web...that is for local search? Please mail me at jigar_shah83@hotmail.com
Well I have finally gotten round to adding the AJAX search toolbar to my blog. huffalum-tech.blogspot.com
Its rather cool. =) But it is a little unstable at the moment, does anyone know why? I also embed meebo, would that be a problem?
Anyways just to answer some queries, if you see only a "clear" link.
It is likely that you have not gotten for yourself an application key from google.
Read the following for more info:
gOOGLE ajax sEARCH blOG
Google AJAX search examples
Good related article from tech2all
Get your AJAX search Key
Thanks to your excellent documentation I successfully implemented Google AJAX Search on my TypePad blog CleverClogs (http://www.cleverclogs.org) yesterday. I studied the code in your blog post, the code that you currently use on your site (slightly changed I think) and the Google sample code that shows up once you've signed up for an API license key.
To express my gratitude I posted a little thank-you note for you at the bottom of today's post http://www.cleverclogs.org/2006/09/9_rss_reader_ho.html
(would have used trackback if you had offered that option)
Thanks so much again!
Are u using blogger in beta ?
I tried many times in my blogger in beta, but it doesnt works.
I'm not using Blogger Beta, but I plan to soon write up a method to get Google Ajax search working with Blogger Beta as well.
Demo : http://www.modelalive.com
Ajax Search on your site [Full]
Demo : Ajax Search on your site [Full]
Good stuff. I'm thinking I'll modify this slightly for one of my sites.
good job!!!
thanks
get rich with adsense
cmon men, there are easyest ways to do it!!!!! check my blog and look at it it beautyfull ejjeje
These comments have been invaluable to me as is this whole site. I thank you for your comment.
Can be good but you re a very bad teacher. I just put an entire java menu in my site from www.milonic.com and lots other stuff, and I still cant make a google search tool. If you dont know to explain... just dont say anything.
Hi There!
Very awesome, thank you so much. By the way, in the HTML code, isn't there a div ending missing at the end?
I am just trying to understand this. I´ve got my code yet, and I´ve visited a lot of sites that tells me how to add google ajax to my blog, and i just can´t. :(
I´m a mess with html!!!! Maybe blogger should add it as a widget for people like me.
Damn that would be good.
I did my favourite search with google ajax here
Post a Comment
<< Home