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!