In Post Video Bar

This afternoon, one of our customers asked how to place a Video Bar in the middle of his post content... Turns out that this is not as simple as it sounds since blogging platforms tend to block script tags sitting withing a post body. There are other ways to solve this problem though. I choose a pretty lazy approach and will probably do something a bit more element later... I just created an anchor tag with a javascript URL that calls a new function that ends up dynamicly extending the post with a video bar. The downside of this approach is that you have to click something to make the video bar show up.

Check out my Videos

The code to do this is pretty trivial... I just add this to a template that already has a video bar and then create a javascript url to call it.

The Code:

function inPostVideoBar(barDivName, searchExpression) {
  // video bar
  var vbOptions = {
   largeResultSet : false,
   master : videoSearch,
   horizontal : true
  }
  var vb = new GSvideoBar(document.getElementById(barDivName), 
                          null, vbOptions);
  vb.execute(searchExpression);
}

The Call:

<div id="vb1">
  <a href="javascript:inPostVideoBar('vb1', 'vw gti');">
    Check out my Videos
  </a>
</div>

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