skip to main | skip to sidebar

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.

14 comments

  1. Firdaus Ariefatosa // June 28, 2009 at 7:50:00 PM GMT+10  

    I'll try to apply this to my blog.
    Thanks

  2. Mike // July 24, 2009 at 11:12:00 PM GMT+10  

    @firdaus.a,
    You welcome, I hope applying it was smooth :)

  3. SEO Services // July 28, 2009 at 4:23:00 PM GMT+10  

    Thanks for this nice blog.

  4. Swashata // August 3, 2009 at 10:19:00 PM GMT+10  

    I also hate the size of the default blogbar! I will use this on some of my sites :)

  5. Mike // August 4, 2009 at 8:26:00 AM GMT+10  

    @Swashata,
    Great.. let me know of if you face any issues.

  6. Unknown // October 31, 2009 at 6:11:00 AM GMT+11  

    I don't know why my whole set of IFrames get flickered when transition in Blogbar happens !

    here http://Webiyo.com

    BTW Thanks for such a wonderful blogbar !

  7. Mike // October 31, 2009 at 6:26:00 AM GMT+11  

    @Rakesh,
    you welcome..
    1- having a div tag with a class "my-blog-bar" should be auto-loaded into Google Blogbar as in ex:1 and then using a JS Call as in ex:2 might get 2 bars running!
    So, since you are loading the blogbar code as in ex:2 It would be better if you remove that class name from div and select it with ID
    $('#div-id').myBlogBar(....
    2- try giving the outer container div a fixed height in CSS so it won't flicker.

  8. Unknown // November 4, 2009 at 2:51:00 AM GMT+11  

    Fixing a height does the job :)
    Thanks Mike !
    BTW, FYI :- The the problem was only with Firefox and that too latest update version :)
    On all other browsers it used to function normal :)

  9. Mike // November 4, 2009 at 6:00:00 AM GMT+11  

    @Rakesh,
    great, thanks for the info :)

  10. valentines day presents // January 13, 2010 at 10:22:00 PM GMT+11  

    Thanks for sharing the technical information on the blog.

  11. Anonymous // March 19, 2010 at 8:00:00 AM GMT+11  

    Hi,Mike
    It was working 100% on blogspot old url but when i switched to new custom domain it stopped working dunno what's happened !!!
    i signed up again for an AJAX API for my new domain italib.net (dunno if there's a difference without using www anyway i used both (with-without) ) but negative result!
    what do you think?

  12. Mike // March 19, 2010 at 8:51:00 AM GMT+11  

    @الـطـالـب,
    try getting a new API key or use italib.blogspot.com as the domain..

  13. Wesley Soccer // April 4, 2010 at 12:36:00 PM GMT+10  

    Can I use this for wordpress.org? Just confused on where to add all the code...any help would be awesome

  14. Mike // April 6, 2010 at 1:29:00 AM GMT+10  

    @Wesley,
    sure you can.. at any of where you like in theme PHP files. something like \wp-content\themes\[theme folder]\..

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS