Feed your blog with the Blog Bar

A great tool offered by Google is the Blog Bar, a Google Blog Search object you are free to customize and embed in your own web pages. Let's have a look at how to actually embed it in your web pages and how to adapt and refine its searches for your own purposes.

About the Blog Bar

To explain what the Google Blog Bar is there's nothing better than directly quote Google relevant page:

The Blog Bar is a Google AJAX Search API application that lets you easily add application and page-controled blog search results to your web pages or blog.

The home page for this Google application might be found at the following URL. The Blog Bar comes in two flavours, the Horizontal Blog Bar and the Vertical Blog Bar. You can chose to Start with the Wizard or Google Account, unless obviously you already have one, and request a free API Key. I'll skip the Google Account registration process, since it's really a fill-the-form-with-your-name procedure, and just spend a couple of words on the API key request.

Request a free API key

To use any Google AJAX Search API enabled application you need a free key form Google, think of this as the authorization/registration code needed to run an application. The Google AJAX Search API key is free, the only thin you need to do is request for it and submit the URL of the site it will used with. Since the Google application you're thinking of use will talk with a Google machine, that is it will use the Google Search Engine, what the API does is to authenticate your site face to Google. To do this you just have to insert you web site URL, consider that A single AJAX Search API key is valid within a single directory on your web server, including any subdirectories. In my case, to embed to embed a Google Search driven application in my blog (http://exploded.awcr.org) I'll submit my site root URL: http://awcr.org, the generated key for my site is:

ABQIAAAAdd9vnmJmJ2nEg20HVOB9RhRY >>>
zksCz2YKv2qedjniHIMmz86OeBQ5UiWBJs-_9Rgcit-kw >>>
3zv2RThNA
(the one line key has been here split for layout purposes)

Consider that the API key is linked to the URL it was generated for, if you try to put my own API key into your pages it doesn't work. The same thing applies if you have more than one web site, you'll need to generate an API key for each site you are planning to use a Google Search driven application.

Create your custom Blog Bar

Now that you successfully generated your own API key, you can start creating your custom Blog Bar. The first approach we'll consider is the Wizard offered by Google.

Blog Bar: the wizard

The wizard page gives you a simple while powerful interface to create a fully working Blog Bar. I'll keep the consistency with the Google wizard terminology to keep things easy. The first choice you are offered is Customization. Options are to choe between the vertical orientation, the so called Blog Strip, and the horizzontal orientation, called Blog Reel.

Blog Bar orientation, differences

Apart from the actual orientation, the main difference between the two Blog Bar orientations is the amount of content resulting in being displayed. The horizzontal orientation only shows the resulting title linked to the originating site. The vertical orientation displays the linked title, as for the horizzontal orientation, and a small excerpt of the relevant post, and the linked URL to the originating site. The one you'll select is then not only a matter of layout but also of how much content you'll like to present to your readers.

Remember that everytime you modify your Blog Bar settings while creating it via the wizard, you have to regenerate it's code before using it.

What to search for

The second option you are given to customize your Blog Bar is the search expression, this is the search string Google Search will fetch for and then feed back to your Blog Bar. Here you are allowed to insert as few words as a single one, or an apparently unlimited number of words, each one separeted by a comma.

Name the Blog Bar

Last custome option offered is the title for your Blog Bar. Here is your choice to name it, with your blog name, with the topics the Blog Bar is looking for, or whatever name you'd like to have along it.

Preview the Blog Bar

As the name suggests, the Preview Blog Bar button makes you preview the final result of your custom settings.

Generate the code

Before being able to generate the actual code for your Blog Bar, you have to indicate where it will be used, that is you have to enter your web site URL (again, this is the URL of the web site you'll intend to embed the Blog Bar in. Your API key request should already have been done). If everything is ok, generating the code its just a matter of clicking the button with the relevant label.

I have the code, now what?

You have the code, now it's just a matter of putting it in your web pages. You have to options here, the first one is to put all the generated code in one place, that is where in your web page you actually want your Blog Bar to appear. This is the approach I suggest if you do not want to play more with custom settings and the simpe wizard resulting Blog Bar is what you are happy with. In this case, copy the code and insert it in your page, or template page and leave the Google do the rest.

The second option is to split the code, the most of it to be put between the <head> while the </head> of your page(s) and the <div id="blogBar-bar"></div> part should be put where you like the Blog Bar to appear. This approach is the one I'd suggest to have more control on the whole thing, like if you have to display more than one Blog Bar, or if you have to deal with a complex layout scenario. More on this on the second part of this how to.

Et voilà

The following is an example of a vertical Blog Bar, searching for Google Search API through the Blogosphere