jQuery Bookmark

Default Settings

The bookmark sharing functionality can easily be added to a div or span with appropriate default settings. The resulting links allow the user to easily post your current page to any number of bookmarking sites.

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

Bookmark with everyone: Remove

$('#defaultBookmark').bookmark();

$('#removeBookmark').toggle(function() {
		$(this).text('Re-attach');
		$('#defaultBookmark').bookmark('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultBookmark').bookmark();
	}
);

Note that the jquery.bookmark.ext.js module has been included here to provide the complete list of bookmarking sites.

You can override the defaults globally as shown below:

$.bookmark.setDefaults({icons: 'img/bookmarks.png'});

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

Format Appearance

Control the appearance of the widget.

A select few:

$('#selectBookmark').bookmark({sites:
	['delicious', 'digg', 'linkedin', 'stumbleupon']});

A select few plus show all:

$('#showAllBookmark').bookmark({sites:
	['delicious', 'digg', 'linkedin', 'stumbleupon'], addShowAll: true});

By language:

$('#languageBookmark').bookmark({sites: ['lang:pl', 'lang:sk']});

By category:

$('#categoryBookmark').bookmark({sites: ['category:shopping']});

Use an expanded format:

$('#expandedBookmark').bookmark({compact: false,
	sites: ['facebook', 'google', 'hotmail', 'mixx']});

Popup on demand:

$('#popupBookmark').bookmark({popup: true});

Popup from image:

$('#popupImageBookmark').bookmark({popup: true,
	popupText: '<img src="img/bookmarkthis.png" alt="Bookmark this..."/>'});

Popup some, then show all:

$('#popupAllBookmark').bookmark({popup: true, addShowAll: true,
	sites: $.bookmark.commonSites});

Add to favourites:

$('#favouriteBookmark').bookmark({sites: ['blogger'], addFavorite: true});

E-mail a friend:

$('#emailBookmark').bookmark({sites: ['newsvine'], addEmail: true});

Alternate icons:

$('#iconsBookmark').bookmark({iconsStyle: 'bookmark_largeIcons', iconSize: 22,
	sites: ['digg', 'dzone', 'stumbleupon', 'technorati',
	'reddit', 'delicious', 'newsvine', 'blinklist']});

.bookmark_list span.bookmark_largeIcons {
	background: url(img/bookmarks-big.png) no-repeat center; }

Add a description:

$('#descrBookmark').bookmark({
	description: 'A longer description of the page',
	sites: ['designmoo', 'diglog']});

Add a source tag:

$('#sourceBookmark').bookmark({
	sourceTag: 'from', sites: ['care2', 'mindbody']});

Bookmark another page:

$('#otherBookmark').bookmark({
	url: 'http://keith-wood.name/bookmarkRef.html',
	title: 'jQuery Bookmark Reference',
	sites: ['technorati', 'reddit']});

Change on the fly: Change

$('#changeBookmark').bookmark({sites: ['google', 'linkedin']});

$('#changeButton').toggle(function() {
		$('#changeBookmark').bookmark('change',
			{sites: ['stumbleupon', 'digg']});
	},
	function() {
		$('#changeBookmark').bookmark('change',
			{sites: ['google', 'linkedin']});
});

Selection Callback

If you want more control over the presentation of the bookmarking site you can add a callback to be notified of selection.

Bookmark callback:

$('#callbackBookmark').bookmark({onSelect: customBookmark});

function customBookmark(id, display, url) {
	window.open(url, '_blank',
		'width=600,height=400,menubar=no,toolbar=no,scrollbars=yes');
}

Additional Sites

You can add new sites to the list as shown below. Note: this example is not a real bookmarking site.

The parameters are the id, display name, icon URL, language and site URL. Within the site URL use '{u}' to mark the insertion point for the current page's URL, '{t}' for the current page's title, and '{d}' for the page's description.

Add your own:

 

$.bookmark.addSite('example', 'Example', 'img/example.png',
	'en', 'other', 'http://www.example.net/?url={u}&title={t}');
$('#addBookmark').bookmark({sites: ['google', 'example']});
$('#add2Bookmark').bookmark({
	sites: ['google', 'example'], compact: false});

The following list shows the current sites with their IDs, optionally filtered by language and/or category.

Language: To be set

Category: To be set

• To be generated

var langs = [];
var categories = [];
$.each($.bookmark.getSites(), function(id, site) {
	if ($.inArray(site.lang, langs) == -1) {
		langs.push(site.lang);
	}
	if ($.inArray(site.category, categories) == -1) {
		categories.push(site.category);
	}
});

langs.sort();
var options = '<option>All</option>';
$.each(langs, function(i, lang) {
	options += '<option>' + lang + '</option>';
});
$('#lang').html(options);
categories.sort();
options = '<option>All</option>';
$.each(categories, function(i, category) {
	options += '<option>' + category + '</option>';
});
$('#category').html(options);

$('#lang,#category').change(function() {
	filterSites();
});
filterSites();

function filterSites() {
	var html = '';
	var lang = $('#lang').val();
	var category = $('#category').val();
	var sites = $.bookmark.getSites();
	var ids = [];
	$.each(sites, function(id, site) {
		ids.push(id);
	});
	ids.sort();
	$.each(ids, function(i, id) {
		var site = sites[id];
		if (id != 'example' && (lang == 'All' || lang == site.lang) &&
				(category == 'All' || category == site.category)) {
			html += '<li><span class="bmkIcon" ' +
				'style="background-position: -' + ((site.icon % 16) * 16) +
				'px -' + (Math.floor(site.icon / 16) * 16) + 'px;"></span>' +
				id + ' - ' + site.display + '</li>';
		}
	});
	$('#siteList').html(html);
}

Styling

You can format the links with a bit of CSS.

Discrete styling: Add to

$('#discreteBookmark').bookmark({
	sites: ['delicious', 'digg', 'stumbleupon', 'technorati']});

#discreteBookmark { float: left; }
#discreteBookmark ul { background: transparent; border: none; }
#discreteBookmark li { padding: 0px 5px; }

Alternate styling:

$('#styleBookmark').bookmark();

#styleBookmark { float: left; width: 388px; }
#styleBookmark ul { float: left;
	background: #81c7fb url(bookmark-bg.jpg) center; border: 1px solid #247; }
#styleBookmark li { margin: 2px; background: transparent; border: none; }

Scrolling columns:

$('#columnsBookmark').bookmark({
	addEmail: true, addFavorite: true, compact: false});

#columnsBookmark ul { width: 340px; height: 210px;
	overflow: auto; padding: 0px 5px; border: 2px solid #888;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
#columnsBookmark li { width: 155px; background: transparent; border: none; }

The structure of the links is shown below, where the outermost div is the container you specify in your page:

<div id="defaultBookmark" class="hasBookmark">
	<ul class="bookmark_list"> <!-- May also be bookmark_compact -->
		<li><a href="{Submission URL}">
			<span class="{settings.iconsStyle}"></span> {Display Name}</a></li>
		<!-- or -->
		<li><a href="{Submission URL}">
			<span class="background-image: url({settings.icons});"></span> {Display Name}</a></li>
		<!-- or -->
		<li><a href="{Submission URL}"><img src="{site.icon}"> {Display Name}</a></li>
		:
	</ul>
</div>

If the list is in the compact format then the ul also has the bookmark_compact class assigned to it.

If the bookmark is set to popup then it has the additional structure shown below.

<div id="popupBookmark" class="hasBookmark">
	<a class="bookmark_popup_text" href="#">{Popup text}</a>
	<div class="bookmark_popup">
		<ul class="bookmark_list"> <!-- May also be bookmark_compact -->
			:
		</ul>
	</div>
</div>

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).bookmark({
	url: '',  // The URL to bookmark, leave blank for the current page
	sourceTag: '', // Extra tag to add to URL to indicate source when it returns
	title: '',  // The title to bookmark, leave blank for the current one
	description: '',  // A longer description of the site
	sites: [],  // List of site IDs or language selectors (lang:xx) or
		// category selectors (category:xx) to use, empty for all
	iconsStyle: 'bookmark_icons', // CSS class for site icons
	icons: 'bookmarks.png', // Horizontal amalgamation of all site icons
	iconSize: 16,  // The size of the individual icons
	iconCols: 16,  // The number of icons across the combined image
	target: '_blank',  // The name of the target window for the bookmarking links
	compact: true,  // True if a compact presentation should be used, false for full
	hint: 'Send to {s}',  // Popup hint for links, {s} is replaced by display name
	popup: false, // True to have it popup on demand, false to show always
	popupText: 'Bookmark this site...', // Text for the popup trigger
	addFavorite: false,  // True to add a 'add to favourites' link, false for none
	favoriteText: 'Favorite',  // Display name for the favourites link
	favoriteIcon: 0,  // Icon for the favourites link
	addEmail: false,  // True to add a 'e-mail a friend' link, false for none
	emailText: 'E-mail',  // Display name for the e-mail link
	emailIcon: 1,  // Icon for the e-mail link
	emailSubject: 'Interesting page',  // The subject for the e-mail
	emailBody: 'I thought you might find this page interesting:\n{t} ({u})', // The body of the e-mail,
		// use '{t}' for the position of the page title, '{u}' for the page URL,
		// '{d}' for the description, and '\n' for new lines
	manualBookmark: 'Please close this dialog and\npress Ctrl-D to bookmark this page.',
		// Instructions for manually bookmarking the page
	addShowAll: false, // True to show listed sites first, then all on demand
	showAllText: 'Show all ({n})', // Display name for show all link, use '{n}' for the number of sites
	showAllIcon: 2, // Icon for show all link
	showAllTitle: 'All bookmarking sites', // Title for show all popup
	onSelect: null, // Callback on selection
	addAnalytics: false, // True to include Google Analytics for links
	analyticsName: '/share/{r}/{s}' // The "URL" that is passed to the Google Analytics,
		// use '{s}' for the site code, '{n}' for the site name,
		// '{u}' for the current full URL, '{r}' for the current relative URL,
		// or '{t}' for the current title
});

$.bookmark.setDefaults(settings);  // Change default settings

$.bookmark.commonSites // IDs of the common sites in the basic module

$.bookmark.addSite(id, display, icon, lang, category, url);  // Add a new bookmarking site

$.bookmark.getSites();  // Retrieve all the site details

$(selector).bookmark('change', settings);  // Update the bookmark settings
$(selector).bookmark('change', name, value);  // Update a single bookmark setting

$(selector).bookmark('destroy');  // Remove the bookmarks