AJAX Search API Powered Video Bar

This morning we put together a pretty cool new solution called the Video Bar Solution. This thing is designed to let you place a Bar of videos anywhere you like on a page. Its similar to the Video Search Control solution in that it gets its videos through search and supports on screen playback. Its different in that the site designer is responsible for determining which search terms can drive the bar, and how these terms are exposed on the page.

You can easily have multiple Video Bar solutions on a page and you can choose to have the Video Bars share a player with another Video Bar, or with a nearby Video Search Control.

Take a look at the instruction page, or just download this blogger template and make it your own.

Try changing the bar using the javascript url based links:

1. Beer
   
2. Spoof
3. Bud Light
   
4. Reset
   

Google AJAX Search API in Blogger

The Google AJAX Search API has a number of well documented samples and solutions including the Video Search Solution and the Map Search Control Solution. Both of these solutions are great additions to a blog.

This morning, I modified a blogger template to include both of these solutions, as well as a core search solution. Fell free to take what I have done here and apply it to your blog, modifiy to meet your needs, etc. Just follow these instructions:

1. Sign up for a Google Ajax Search API Key and capture the key. For my blog, I used a url of http://ajaxsearch.blogspot.com
2. Download my modified template.
3. Edit the &key= values in the template where the Google Maps API and Ajax Search API are loaded and replace with your API Key (your key will work for both APIs).
4. Edit your blogger template, and replace or merge yours with mine. Note, mine is based on minima black.

Once you have got this going in your blog, you can do a few cool things:

1. Its very easy to include a hyper link in a blog post that results in a search on the map. Just create a the hyperlink as a javascript url that calls doMapSearch('search-term');. e.g., if you look at the resulting <a> element, in "Edit HTML" mode, it will look something like this: <a href="javascript:doMapSearch'sakana');">Sakana</a>. Here is an example: Sakana
2. Embedding core center column search is just like map searching only the function is doCoreSearch(); Here is an example: Google
3. Embedding video search links is just like map searching only the function is doVideoSearch(); Here is an example: Jimi Hendrix

Play around with this and let me know what you think.

p.s. - If you are a TypePad user, check out http://ajaxsearch.typepad.com