More and more sites are adding support for MediaRSS to include images, videos and other types of multimedia files. Today, we’re announcing that the Google Feed API now includes this metadata in the response. This content is now included in the JSO…
As I mentioned in a previous post, we’ve taken several measures to help differentiate legitimate API traffic from bad requests. To help us serve you better, I’m pleased to announce a new way for you to identify your request as harmful. Beginning…
As I mentioned in a previous post, we’ve taken several measures to help differentiate legitimate API traffic from bad requests. To help us serve you better, I’m pleased to announce a new way for you to identify your request as harmful. Beginning…
One of the major advantages of an Ajax style search box is that users can perform their queries and get their results without leaving the page. However, some webmasters prefer that their users go to a separate results page after they enter a search. Th…
One of the major advantages of an Ajax style search box is that users can perform their queries and get their results without leaving the page. However, some webmasters prefer that their users go to a separate results page after they enter a search. The Ajax search library supports this “two-page” use case as well, and since this is a question that we see from time to time we’ve set up a simple demo site.
To create this page we wrote a simple form in HTML and added JavaScript to add the “Google Custom Search” branding in the search box. View source to see all the details.
When the user submits the form, they are taken to a results page which has the following HTML structure:
Loading...
We then tell the search library to draw its search box and results in the div we just created:
// Draw the control in content div customSearchControl.draw('results');
Since the user came to this page from our search form, their query terms are now part of the page URL, so all we need to do now is extract them and execute their query:
function getQuery() { var url = '' + window.location; var queryStart = url.indexOf('?') + 1; if (queryStart > 0) { var parts = url.substr(queryStart).split('&'); for (var i = 0; i if (parts[i].substr(0, 1) == 'q') { return unescape(parts[i].split('=')[1].replace(/\+/g, ' ')); } } } return ''; }
// See the source code of the results page for full details.
...
// Run a query customSearchControl.execute(getQuery());
There is one more optional setting that you might be interested in. The second page which we’ve just created contains a search box that will allow the user to perform searches on this same page. If you would prefer for the search box not to appear on this results page we can add the following HTML to the page:
We hide the input box because we don’t want the Ajax search library to render the usual query input box, just to show the results. We then tell the search library to draw its search box in the hidden input, making it invisible:
// Set drawing options to use our hidden input box. var drawOptions = new google.search.DrawOptions(); drawOptions.setInput(document.getElementById('hidden-input'));
// Change the draw call to include our new options. customSearchControl.draw('results', drawOptions);
To see an example of a two-page search setup with a hidden query input, visit this page.
To learn more about the Google Custom Search API, read our documentation. If you run into any problems while setting this up, post your question in our discussion group or hop on our IRC channel.
One feature of the AJAX Image Search API that you might find useful is the ability to retrieve only the images which are visible on a specific website. For example, you could add a search box that allows people to search through just the images on your own site or you could create a slideshow which shows images from your favorite site.
To specify a site, use the setSiteRestriction method on an ImageSearch object. Here is a simple example:
We can do more than just provide a site-specific image search box, we could also use the search results in a unique way. For example, we could create a slideshow which shows images which match our desired keyword and appear on a specific site. For this example, let’s create a simple slideshow that displays images from nasa.gov.
var imageIndex = 0; var images;
function nextImage() { imageIndex++; if (imageIndex >= images.length) { imageIndex = 0; }
var imageContainer = document.getElementById( 'image-container'); imageContainer.src = images[imageIndex].tbUrl; }
function searchComplete(searcher) { if (searcher.results && searcher.results.length > 0) { var contentDiv = document.getElementById( 'content-slideshow'); contentDiv.innerHTML = '';
// Switch to the next image every 5 seconds. setInterval("nextImage();", 5000); } }
function slideshowOnLoad() { var imageSearch = new google.search.ImageSearch(); imageSearch.setSiteRestriction('nasa.gov'); imageSearch.setSearchCompleteCallback( this, searchComplete, [imageSearch]); imageSearch.execute('supernova'); }
google.setOnLoadCallback(slideshowOnLoad);
In the above samples, there are three lines I’d like to call your attention to. The first line to note is the imageSearch.execute at the bottom, here we’ve entered the keywords that our slideshow images should be related to. Next we restrict the site to nasa.gov using imageSearch.setSiteRestriction. Lastly, we call setInterval once we receive the results of our search for images. The setInterval call tells the browser to run our nextImage function every five seconds.
Here are the two samples we’ve talked about in action:
The site restriction can also include a path within a website. For example you could do setSiteRestriction(
'http://www.flickr.com/photos/') to search the photos that have been posted by a particular user on flickr.
To learn more about some other neat features of the AJAX Image Search API take a look at our code playground samples and documentation. For questions on this and other topics, drop us a line in the discussion group.
One feature of the AJAX Image Search API that you might find useful is the ability to retrieve only the images which are visible on a specific website. For example, you could add a search box that allows people to search through just the images on your own site or you could create a slideshow which shows images from your favorite site.
To specify a site, use the setSiteRestriction method on an ImageSearch object. Here is a simple example:
We can do more than just provide a site-specific image search box, we could also use the search results in a unique way. For example, we could create a slideshow which shows images which match our desired keyword and appear on a specific site. For this example, let’s create a simple slideshow that displays images from nasa.gov.
var imageIndex = 0; var images;
function nextImage() { imageIndex++; if (imageIndex >= images.length) { imageIndex = 0; }
var imageContainer = document.getElementById( 'image-container'); imageContainer.src = images[imageIndex].tbUrl; }
function searchComplete(searcher) { if (searcher.results && searcher.results.length > 0) { var contentDiv = document.getElementById( 'content-slideshow'); contentDiv.innerHTML = '';
// Switch to the next image every 5 seconds. setInterval("nextImage();", 5000); } }
function slideshowOnLoad() { var imageSearch = new google.search.ImageSearch(); imageSearch.setSiteRestriction('nasa.gov'); imageSearch.setSearchCompleteCallback( this, searchComplete, [imageSearch]); imageSearch.execute('supernova'); }
google.setOnLoadCallback(slideshowOnLoad);
In the above samples, there are three lines I’d like to call your attention to. The first line to note is the imageSearch.execute at the bottom, here we’ve entered the keywords that our slideshow images should be related to. Next we restrict the site to nasa.gov using imageSearch.setSiteRestriction. Lastly, we call setInterval once we receive the results of our search for images. The setInterval call tells the browser to run our nextImage function every five seconds.
Here are the two samples we’ve talked about in action:
The site restriction can also include a path within a website. For example you could do setSiteRestriction(
'http://www.flickr.com/photos/') to search the photos that have been posted by a particular user on flickr.
To learn more about some other neat features of the AJAX Image Search API take a look at our code playground samples and documentation. For questions on this and other topics, drop us a line in the discussion group.
Over the last several years, you’ve helped make Google’s AJAX APIs incredibly successful. Not surprisingly, however, there are some people who try to take advantage of these free APIs by using them in ways that they were not designed for, abuse which …
Over the last several years, you’ve helped make Google’s AJAX APIs incredibly successful. Not surprisingly, however, there are some people who try to take advantage of these free APIs by using them in ways that they were not designed for, abuse which …
I am happy to announce the addition of the ability to scope your searches to a specific country in the AJAX Web Search API. Now, if you have a lot of visitors in Madagascar, you can make sure that the search results displayed on your site are tailored…
I am happy to announce the addition of the ability to scope your searches to a specific country in the AJAX Web Search API. Now, if you have a lot of visitors in Madagascar, you can make sure that the search results displayed on your site are tailored…
In partnership with the Google Chrome Frame team, we are making available a library to allow your web application to detect the presence of Google Chrome Frame. We on the Ajax team are excited about the possibilities of this add-on improving JavaScript performance and enabling some of the new features available in HTML5. If you have a web application which makes use of these new features, you can use this library to prompt the user to install Google Chrome Frame, or recognize when a user has just installed it. The library provides granular controls so that you can create the user experience which best suits your site.
As a short example, I’ve created the following simple demo which just detects whether Google Chrome Frame is installed or not with an alternate message if you are in a browser for which this plugin is not available.
Do you have Google Chrome Frame installed?
We’re checking on that now.
Ben Lisbakken has also added detection for Google Chrome Frame to the Ajax Playground. If you view source on the page you can see another example of a customized CFInstall.check implementation which is designed to fit the page.
For more details on the Google Chrome Frame Ajax API, see the documentation and for questions, please visit the discussion group.
In partnership with the Google Chrome Frame team, we are making available a library to allow your web application to detect the presence of Google Chrome Frame. We on the Ajax team are excited about the possibilities of this add-on improving JavaScript performance and enabling some of the new features available in HTML5. If you have a web application which makes use of these new features, you can use this library to prompt the user to install Google Chrome Frame, or recognize when a user has just installed it. The library provides granular controls so that you can create the user experience which best suits your site.
As a short example, I’ve created the following simple demo which just detects whether Google Chrome Frame is installed or not with an alternate message if you are in a browser for which this plugin is not available.
Do you have Google Chrome Frame installed?
We’re checking on that now.
Ben Lisbakken has also added detection for Google Chrome Frame to the Ajax Playground. If you view source on the page you can see another example of a customized CFInstall.check implementation which is designed to fit the page.
For more details on the Google Chrome Frame Ajax API, see the documentation and for questions, please visit the discussion group.
The language APIs keep right on trucking, released recently are a handful of new translation languages, pairs, and keyboard layouts.We’ve added the ability to use machine translation to or from the following languages:AfrikaansBelarusianIcelandicIrishM…
The language APIs keep right on trucking, released recently are a handful of new translation languages, pairs, and keyboard layouts.We’ve added the ability to use machine translation to or from the following languages:AfrikaansBelarusianIcelandicIrishM…