jQuery Google Search Blogbar

Introduction

The Google Search Blogbar functionality can easily be added to a division. It displays a set of blog links based on provided search terms. The default search term is 'jquery'.

Google places some restrictions on your use of this service, including obtaining a key specific to a target URL providing the service, making the Web site freely accessible, and showing included Google branding. See the link above for more details.

You can also remove the GSBlogbar widget if it is no longer required.

Default blogbar: Remove

 

$('#defaultBlogbar').gsblogbar();

$('#removeBlogbar').toggle(
	function() {
		$(this).text('Re-attach');
		$('#defaultBlogbar').gsblogbar('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultBlogbar').gsblogbar();
	}
);

You can override the defaults globally as shown below:

$.gsblogbar.setDefaults({horizontal: true});

Processed fields are marked with a class of hasGSBlogbar and are not re-processed if targetted a second time.

Formatting Options

You have some control over the appearance of the blogbar. The settings marked with an asterisk (*) only apply to the vertical layout.

Formatting: Title* Orientation Horizontal Vertical

  Compression* Compressed Expanded Results Few Many

  Link target Self BlankTop Parent Order* Relevance Date

 

$('#formatBlogbar').gsblogbar();
		
var targets = [$.gsblogbar.targetSelf, $.gsblogbar.targetBlank,
	$.gsblogbar.targetTop, $.gsblogbar.targetParent];
var orders = [$.gsblogbar.orderRelevance, $.gsblogbar.orderDate];
		
$('#format input,#format select').change(function() {
	$('#formatBlogbar').gsblogbar('change',
		{title: $('#title').val(),
		horizontal: $('#orientation').val() == 'true',
		verticalCompressed: $('#compressed').val() == 'true',
		manyResults: $('#results').val() == 'true',
		linkTarget: targets[$('#target').val()],
		order: orders[$('#order').val()]});
});

Miscellaneous

You can restrict the search to a single blog Web site.

Restricted search: Web site   Go

 

$('#restrictBlogbar').gsblogbar(
	{siteRestriction: 'http://googleajaxsearchapi.blogspot.com/'});
		
$('#restrict').click(function() {
	$('#restrictBlogbar').gsblogbar('change',
		{siteRestriction: $('#site').val()});
});

You can show more detail about a blog entry when in horizontal mode by providing the jQuery selector for a container.

Extra info:

 

$('#extraBlogbar').gsblogbar({currentResult: '#extraInfo'});

Cycling Searches

You can set the blogbar up to cycle automatically through a set of search terms, with control over the interval between cycles and the order. Just pass an array of search terms when attaching the blogbar.

For horizontal blogbars, the cycle time is the interval between showing individual blog entries, whereas for vertical ones it is the interval between showing blog entries for one of the search terms.

For both orientations, the mode dictates the order of the search terms, not the individual blog entries.

Cycling: Time Very short Short Medium Long Manual Mode Random Linear

  Orientation Horizontal Vertical

 

$('#cycleBlogbar').gsblogbar(
	{search: ['jquery', 'australia', 'cats', 'tennis']});
	
var times = [$.gsblogbar.cycleVShort,
	$.gsblogbar.cycleShort, $.gsblogbar.cycleMedium,
	$.gsblogbar.cycleLong, $.gsblogbar.cycleManual];
var modes = [$.gsblogbar.cycleRandom, $.gsblogbar.cycleLinear];
		
$('#cycle select').change(function() {
	$('#cycleBlogbar').gsblogbar('change',
		{cycleTime: times[$('#cycleTime').val()],
		cycleMode: modes[$('#cycleMode').val()],
		horizontal: $('#orientation2').val() == 'true'});
});

Custom Search

You can provide preset links or free text entry to generate new blog searches by using the 'search' command. If there are no matching search results, the bar defaults to results for 'Google'.

Searchable blogbar: Preset jQuery Australia Cats Tennis OR

  Freeform Search

 

$('#searchBlogbar').gsblogbar();
		
$('#presetTerm').change(function() {
	$('#searchBlogbar').gsblogbar('search', $(this).val());
});
		
$('#doSearch').click(function() {
	$('#searchBlogbar').gsblogbar('search', $('#searchTerm').val());
});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).gsblogbar({
	horizontal: true, // True for horizontal display, false for vertical
	verticalCompressed: false, // True for compressed layout when vertical,
		// false for expanded
	title: '', // Title for the bar
	search: 'jquery', // Single or list of search terms
	siteRestriction: '', // Specify a site to restrict searches to
	order: this.orderRelevance, // Control the order of the results
	manyResults: false, // True for many results, false for only a few
	cycleTime: this.cycleManual, // Time between cycles of the search terms
	cycleMode: this.cycleLinear, // Mode of cycling through the search terms
	linkTarget: this.targetSelf, // Control where the blog links open
	currentResult: '' // jQuery selector, jQuery object, or element for 
		// additional info for current entry when horizontal
});