How'd they do that?

Have you ever gone to a site, looked at the page and wondered, "how did they do that?" Since we launched our 2008 U.S. Election site I am getting lots of questions about that nifty little "page element" sitting in the center of the page. Everyone wants to know, "how did you guys do that? how did you pack so much valuable and tightly scoped information in such a small amount of space?" Take a look at the page element below, play around with it a little bit and when you are ready, continue reading.



If you know how to use Firebug, then you can see that behind each tab (Election News, YouTube, etc.), there is a simple AJAX APIs JSON-P request. For some tabs the base operation is a Google Web Search or Custom Search, for others a Google News Search, and for others, a simple YouTube Search. The AJAX APIs work really well in this mode where the page author determines both the query and search options, as well controlling the end-to-end UI and resulting user experience.

But back to the tabs, and to answer the questions, "How'd they do that?", I will walk through each tab and show you the AJAX API requests that are used to generate the results for this page element:

First, the Election News tab. For this tab, we simply target News Search with the name of the candidate and a query addition of unitedstates_uselections. Something like this:

http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=Barack%20Obama%20unitedstates_uselections

Next, the YouTube tab. For this tab, we use the Video Search system to directly target each candidate's YouTube Channel (e.g., ytchannel:barackobamadotcom), render the results with a simple fade in effect, and then bind each result click to a dynamically created player. Very simple stuff. Check out the url we use to grab the results:

http://ajax.googleapis.com/ajax/services/search/video?v=1.0&q=ytchannel:barackobamadotcom

Next, the Blog Posts tab. For this tab, we built a little Custom Search Engine, populating it with several of the top political blogs. The search then becomes the name of the candidate plus a &cx= argument to indicate the Custom Search Engine to use for the search:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Barack%20Obama&cx=010222979794876194725:pqldevwuapa

See what I mean? Take the queries above, slap on a little UI, and any application can take Google News, Custom Search, Web Search, YouTube, etc. and create a very tight little customized search experience...

The Quotes tab is very cool. Instead of just searching for News articles, this tab searches for news articles that contain quotes spoken by one of the candidates. Again, a simple News search with a &qsid= argument to scope to quotes for a particular candidate and we have what we need:

http://ajax.googleapis.com/ajax/services/search/news?v=1.0&qsid=tPjE5CDNzMicmMa

Finally, the News by State tab. This one has two things going on. First there is the state selector control. We use the just launched google.loader.ClientLocation property to determine the user's current location. Then, we simply use this location to form a geo scoped query for the candidate's name in the politics category, scoped with a geo restrict using &geo=. Something like this:

http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=Barack%20Obama%20any_politics&geo=CA,US

So there you have it. Take the above collection of page author defined queries, mix in a few hours of coding, throw in some product managers, a handful of lawyers, a few PR folks, and you have a clever little page element that delivers tons of very focused information.

To learn more about the APIs used in this page element, visit the AJAX Search API and AJAX Feed API documentation. To learn more about Custom Search Engines, check out the recently updated developer guide. To discuss the APIs with us and the community, visit us on our developer forum.

p.s. - If you really like that page element and have to have it on your site, you can iframe it in, or just include our JavaScript directly:

<iframe 
  title="In the News" 
  style="border: 0px none ; margin-left: 1em; width: 540px; height: 530px;" 
  src="http://www.google.com/uds/gadgets/inthenews/iframe.html" 
  frameborder="0">
</iframe>

Or if you prefer including the raw JavaScript controls where you can make mild UI modifications with simple CSS rules, try this approach:

<style>
  @import url("http://www.google.com/uds/gadgets/inthenews/inthenews.css");
  body {
    font-family: "arial", sans-serif;
    font-size: 11px;
  }
</style>

<script src="http://www.google.com/uds/gadgets/inthenews/inthenews.js"></script>
<script src="http://www.google.com/jsapi/" type="text/javascript"></script>

<!--[if IE]>
  <script type="text/javascript" 
    src="http://www.google.com/uds/gadgets/inthenews/excanvas.js"></script>
<![endif]-->

<script type="text/javascript">
  google.load("search", "1");
  google.setOnLoadCallback(initialize, true);

  function initialize() {
    var options = {
      format : "513x500",
      useNav : true
    };
    new InTheNews("itnId-513x500", options);
  }
</script>
</head>

<body>
  <div id="itnId-513x500"></div>
</body>