Rebuilding The Google Blog Bar; jQuery-ed Version

My first jQuery Plugin.. A 4KB jQuery plugin instead of a 118KB Google Blog Bar!!

I have shown before how to use Google Blog Bar as related posts widget, But when I actually tried to use it on my site, I didn't like all these JavaScript/CSS files that I've to include.
And since I already use jQuery -and who doesn't- I decided to rebuild the Blog Bar from scratch.

Of course, I'll be using the RESTful interface of the AJAX Search API that returns JSON encoded results. So I didn't scratch too much :)

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

AJAX Search API is the easiest way to incorporate a Google search box on your site. You can incorporate results from Web Search, News Search, and Blog Search into your blog or web site with just a few lines of JavaScript.

Advantages Of My jQuery-ed Google Blog Bar:

1. Much lighter: Using Google Blog Bar, you will have to include 3 Javascript files (2 files Actually , but fist one dynamically loads the third ):
   - Google AJAX API Loader file which is 15KB 
   - And AJAX Search API file which is 72KB
   - Google Blog Bar file which is 31KB
   -  Plus 2 CSS files that you can go without them and weighs 26KB total
   So, Total of Javascript files is 118KB vs. My 4KB Blog Bar!
   Of course, I will not count jQuery 55KB, cause -as I said- it is an essential include.
2. More Control: Google Blog Bar will do repeated JSON queries to get more results that I didn't need and can't be disabled.
3. It is jQuery-ed, Which is the most important :) One can add extra pretty jQuery effects..
4. Works as related posts widget: When no query expression was set , By Default plugin use current page tags to create search expression by ORing those tags.

Implementation Steps

1. First, download minified JavaScript of latest plugin version from project page http://code.google.com/p/jquery-ed-google-blog-bar.
2. Sign-up for an AJAX Search API Key for your website You must have a Google Account to obtain a Google API key, and your API key is tied directly to your Google Account. You can generate multiple API keys for your account if you have multiple web sites.
3. Set your key in the default options list where it says key:'YOUR-KEY'
4. Upload plugin Javascript file to your site. If you are on Blogger try a free file hosting that provides direct linking like FileDen. replace the link "jquery.googleblogbar-1.0.min.js" with the full direct URL you got.
   *Direct Linking: No redirection to another URL happens when you open link in a browser.
   *No need to host jQuery Javascript on your own.. Google hosts jQuery for you!
5. Include the following CSS Code somewhere in your page usually inside Head element.
6. Insert Code as described in the following Typical usage
7. And the most technically important :)  Give me some Digg/Dzone love or a link back attribution.

CSS Code
The following CSS code will show a typical Blog Bar as seen in the footer below.
<style type="text/css">
/* container */
div.my-blog-bar{
   position:relative;
}
/* inner div */
div.mbb-inner{
   border:silver 1px solid;
   padding:4px 12px 8px;
   margin:0 78px 0 0;
   position:relative;
   overflow:hidden;
}
/* bar title */
div.mbb-inner h2{
   float:left;
   font-size:12px;
   margin:0 4px 0 0;
   line-height:1.4em;
}
/* ul list */
div.mbb-inner ul{
   float:left;
   padding:0 0 0 0;
   margin:0 0 0 0;
}
div.mbb-inner li{
   margin:0 0 0 0;
   line-height:1.4em;
   list-style-type:none;
}
/** post link **/
div.mbb-inner li a{
   color:navy;
}
/** author name and date **/
span.mbb-by{
color:gray;
}
/** excerpt and blog url **/
.mbb-content{ }
.mbb-url{
   color:green;
}
/** powered by google **/
div.mbb-branding{
   margin-top:0;
   position:absolute;
   right:0;
   top:0;
   width:75px;
}
div.mbb-branding-text{
   color:gray;
   font-size:10px;
}
a.mbb-branding-link img{
   border-width:0;
}
</style>

Typical Usage
To show a horizontal blog bar.. place this div where you like, set options attribute and they get auto. loaded!
You will only need to include the 2 JavaScript's (jQuery and my plugin) once; even if you have more than one div.
You can defer Javascript downloading in the browser by placing the JavaScript's by the end of your page. 
Options must be separated by a comma, but a trailing comma is fatal.
<!--Inlcude once in your page-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>   
<script src="jquery.googleblogbar-1.0.min.js" type="text/javascript"></script>

<!-- Add as many as you need... div with class="my-blog-bar" -->

<!-- Show Results Restricted to "moretechtips.net" -->
<div class="my-blog-bar" options="{title:'More Tech Tips!' , blogURL:'moretechtips.net'}">loading..</div>
<div style="clear:both"></div>

<!-- or leave it to Default options -->
<div class="my-blog-bar">loading..</div>
<div style="clear:both"></div>

 

Custom Usage
Load plugin content by javascript call.. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>   
<script src="jquery.googleblogbar-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">   
$(document).ready(function(){
   $('div.some-other-class').myBlogBar({
      key:'YOUR-KEY'
      ,title:'Blogsphere'
      ,q:'Google'
      ,hl:'en'
   });
});
</script>

<div class="some-other-class">loading...</div>  

Check Project page for detailed documentation; Follow project changes, request features or submit bugs :(

If you liked the plugin, Would you please vote for it on plugin page at jQuery site.

Tags: AJAX , Google AJAX APIs , hot , javascript , jQuery , jQuery Plugin , JSON , RESTful