Google CSE and AJAX Search API
By Simon Vandyk
Added Friday 27/06/2008
CSE is short for Custom Search Engine - it's a Google product that's been in circulation for while now and is a facility which enables you to add a search function to your website using Google's search technology.
http://www.google.com/coop/cse/
You can set it up to search a list of predefined websites, which is exactly I what I wanted to use it for, in fact I am just using it as a 'site search' for a specific website. You have almost complete autonomy over the results that are displayed to the end user, you can predefine pages to display when certain keywords are entered, you can group thing together into different categories and display them a the top of the results as independent links, loads of stuff you can do!
It's a very cool facility and you are given several methods of implementing it on your site. Here are a couple of them:
1. The iframe -- you can have a form on your site which you enter a query in, and your results are displayed in the iframe, fairly simple. Your 'Look and Feel' is however fairly limited (especially compared with the option below), so conforming the search results to the rest of your site can be difficult, an issue I had was that you are constricted to a minimum width for your iframe, which is non adjustable, so if the area you want your results to be displayed in is smaller than this (in my case it was)...well it won't look very nice.
2. Google's AJAX Search API -- This is very cool indeed, and is the option I decided to go for. This is in fact a separate Google technology (http://code.google.com/apis/ajaxsearch/), it essentially allows you to post a query to Google via JavaScript, it then uses AJAX to display the results to you within a predefined area on your web page. Since the results being displayed are actually on your web page (as appose to the iframe), it means the results will conform to whatever CSS you have set up.
This is not a part of the CSE product, and you can in fact use it on its own to search the web, or a specific website, and display all different types of results i.e. videos, images, blog's, etc all depending on the parameters you set up in the JS.
Now this is where it can get somewhat confusing: Now what I am in fact doing, is using this technology and telling it to use my CSE (via one of those JS parameters), now you may ask the question,
"why should I need a CSE, when I can tell it what site to search in anyway?"
Well this is the answer: Your CSE will have results more attuned to your website and the configurations you have set up in the CSE control panel, in fact the CSE uses a completely different search index, where as just telling what website to search would be like typing into Google 'site:www.mysite.com query' where you have little or no control over what results are displayed to the end user.
Now I had purchased the CSE Business Edition, the 'Business Edition' means I don't have to include any of Google's branding on my website.....or do I?
Since I am using their AJAX Search API, which is for all intensive purposes a different facility, and according to their TOS (Terms Of Service) I have to include attribution. This brings me to the question I posed to a Google Group.
"OK, i would like to know what branding i have to include on my search page in the following scenario.
I have purchased an instance of the CSBE (custom search business edition). From what i have gathered when using the iframe and overlay option i can remove all Google branding on my search page.
However, i am using the AJAX Search API to grab the results (using the SetSiteRestriction() option), now under the TOS for the AJAX API I have to include a 'powered By Google' branding somewhere in close relation to either my search form or my results.
My question: Can i remove the 'powered by Google' branding from my site in this scenario, as i am using the AJAX API only to fetch results from my CSBE?"
A Google staff member then replied back to me:
"In your case, since you are using CSBE, you can use the AJAX API without attribution, since you are only using it to access your CSBE."
So there we are, if we are using Google's AJAX Search API to access the search results from our CSBE, according to the response above we don't have to put any Google branding on our site in this scenario. Woo Hoo.
News
Newsletter
Call us today
Comments
How did you get the two to work together? How do you push the search query to a separate/specified search results page that uses the AJAX search API?
Hope you can share how you did it :)
Well, when you configuring the AJAX API to perform the search you have to tell it to use your CSE, to do this there is a parameter you have to set in the Java Script; see here for an example: http://code.google.com/apis/ajaxsearch/documentation/#SiteRestrict (this page also gives full detailed instructions on how to get the AJAX API working)
You will see the parameter:
siteSearch.setSiteRestriction("000455696194071821846:reviews");The bit marked in red is the identifier for your CSE. You can find this identifier in the control panel of your CSE in the 'Advanced' section right at the bottom of the page, this will force it to search just using your CSE.
In answer to your second question, in order to post a query from anywhere on your site to a separate search results page, all you have to do is set the 'action' attribute of your search form to URL of wherever your search results page is
e.g. < form name="searchFrom" method="get" action="www.mysite.com/search-results/" >.
Then on your search results page (where your AJAX API Java Script is set up) you can tell an input field on this page to pick up the search query from the URL (if the form post was a 'get') www.mysite.com/search-results/?q=books
e.g. < input type="text" name="search-input" id="search-input" value="query from url in here" / >.
You then tell the API to use the value from this input and perform the search when the page loads.
function cse {
var searchQuery = document.getElementById('search-input').value
//the value in here would have been collected from the URL (in our case its 'books')
//perform search here
}
function OnLoad() {
new cse();
}
GSearch.setOnLoadCallback(OnLoad);
Many Thanks
Simon