Add a "Video Bar" to your blog

Many of you saw last week's post on using the AJAX Search API in TypePad and Blogger and have already taken these ideas and enhanced your own blogs. An early adopter of the API known as "CyberCoder" had a cool idea... He envisioned a "Video Bar" that could sit in a narrow side bar vertically, or across the top or bottom of a page horizontally.



Last night we launched a Video Bar solution. This makes a great addition to your blogs and pages and composes nicely with an existing Video Search solution. To show you an example, we added the video bar to our AJAX Search API Playground blog.



Check out more of our solutions and samples:

• Map Search solution


• Video Search solution


• List of all our samples
  

AJAX Search in TypePad and Blogger

Many of you have already integrated the Google AJAX Search API into your blogs. Yesterday, I built some sample integrations on both TypePad and on Blogger. I went a little overboard, but I did this to demonstrate a few ideas that you might want to clone into your own blogs.



Take a look at both our TypePad based sample and our Blogger based sample.



Both samples offer the following features:

• Google Search Form in the sidebar with tabbed search results displayed in the center column. A mix of web search, blog search, and site restricted search happens in parallel. Clicking the clear button next to the search form removes the search results.


• Video Search Solution hosted in the sidebar. You can search for new videos, or playback collections of videos coded into the template. Using this solution its trivial to expose your users to 100+ videos.


• Map Search Control Solution hosted in the sidebar. Your template controls the center point of the map. Its very easy to augment the map with a collection of hotspots or favorite places. In addition to these pre-defined searches, the solution contains a regular search bar. Each search result offers a direct link to a details page as well as driving directions.


• Source code to blog templates used to build the blogs.

All of this is great stuff, but with all of this power sitting there on standby in the sidebar, I added a little bit more... By using javascript: url's, I demonstrate the ability to create hyperlinks in your blog posts that can drive any of the sidebar search based solutions. This means for instance that you can write something like:

Last night a few of us celebrated Bob's promotion by taking him to his favorite restaurant, Sakana, we all had a great time. If you have never been, you have to give this place a try. Definitely order the T&T!

When your users click on "Sakana", instead of the harsh transition to Google Maps, the sidebar map control simply pans to the right location and opens an info window with the address, phone number, and driving directions.



Hope you enjoy these blog based solutions.



Update: looks like our TypePad hacking even made it's way to the Everything TypePad blog!

New Search Form, Updated Documentation

As mentioned in the developer forum, we recently rolled out a new user interface for the search form that's an integral part of the basic search control. Part of this change is better support for decoupling the search form from the result set and building custom search forms when you are coding to the raw GSearch() layer. The system now supports two new modes of operation which are covered in our online documentation:

1. Using the GdrawOptions() object, you can now set the location of your search form in a way that decouples it from the rest of the search results. This is useful, for example, when you want a search form in the sidebar of a page, with results stacked in the center. A new sample, searchformroot.html demonstrates this.
    


2. For those of you not using the search control, and instead coding to the raw GSearch layer, a new GSearchForm() object has been created. This object is designed to build a search form for you that is identical to the one used in the search control, but in this object, you control the various submit and click events, and you have direct access to the input element. Several of our sample applets and solutions have been converted to use this new object including places.html, the video search solution, and the map search solution.
   

When you have a chance, please take a look at these new features, and if applicable, please migrate your applications to this new model.



On a separate topic, we've also added some documentation for the Map Search solution. It now includes step-by-step instructions for how to add it to your page and configure it. This has become a popular solution and we wanted to ensure that more people could easily take advantage of it.

Video gadget

There's now a Google Video gadget that people can add to their Google homepage. The gadget is based on the Video Search solution, which you can use to add videos to your blog or website. Check out the gadget and let us know what you think.