How to Create a jQuery Bookmarklet

I suspect many of my readers have written at least one jQuery Plugin / Script. In this post, I’d like to show you how to get the most out of that script by also releasing it as a jQuery Bookmarklet. Below, you’ll find two examples of utilities that are ripe for bookmarkleting, as well as a prepared jQuery Bookmarklet file that you can easily modify for the purpose.

Note: Even if you haven’t written a jQuery plugin before, you’ll find bookmarkleting someone else’s plugin as easy as using it on a site.

Before I get to the code though – take a look at the payload. You can add the following links as bookmarklets by right-clicking and selecting “Add to bookmarks / favorites” (in Chrome, you press “ctrl+shift+b” to open the bookmark manager, and drag them over). You can try them before you bookmark them by simply clicking the links on this page too.

Example One:


Clicking the above link will add the table sorter jquery plugin to the page, including its stylesheet, and it will apply the script to all tables on the page. Once it’s loaded, you can click on any of the table column headers to sort the rows by column values.

Example Two:

The visualizer bookmarklet will add graphical representations of the data in the table. As with the table sorter, this bookmarklet was adapted from a pre-existing plugin, Filament’s jQuery Visualize.

2009 Employee Sales by Department
food auto household furniture kitchen bath
Mary 190 160 40 120 30 70
Tom 3 40 30 45 35 49
Brad 10 180 10 85 25 79
Kate 40 80 90 25 15 119

(Continue This Article…)

Automated Link Building – White Hat Style

Yaknow, most of the time, black hat SEOs have all the fun. When you don’t have to follow the rules, the world of SEO opens up to mathematically generated content, canned-ham links, and any number of script based processes. Well, today is the day of the white hat, because I’ve just written a killer link building script that will amplify your honest successes.

Link Building Pro, based at seox.org, will automatically add a citation to the footer of any text copied from your website. Unlike other similar solutions, though, it specifically uses the meta keywords from the page as the anchor text – ensuring that the links use the precise keywords you’re optimizing for. And, here’s the best part, any text within the selection that matches the text of another link on the page will automatically be converted into that link. As a consequence, if this selection is then copied into the user’s site, you’ve not only gained one link of citation, but also as many links as logically apply to the text itself.

Of course, what makes this white hat is that it’s allĀ voluntary. The user could easily remove the links if he chooses. But the default switches from being no citation or link to several, and as the default action is the easiest, it is also the one most often taken.

PS: Unfortunately, my previous script “Search and Share” interferes this script (doh!). For now, you’ll have to pick one or the other, but I’ve got big integration plans for the future!

The Best Viral Marketing Text Citation (jQuery / WordPress) Plugin

Everyone’s seen social bookmarks, and yeah, they’re great. But even with them, your visitor has to specifically seek out promoting you. On the other hand, when you highlight and copy text from politico.com, it will automatically embed the URL.

Holy crap that’s cool!

Naturally, I wanted to do it too. But soon after beginning, I realized that there was still so much more to do. What is it that people wanted to do with the copied text? If the selection is long, perhaps it’s email or twitter. If it’s short (like a name or place), I’d bet it’s a search. My plugin takes Politico’s brilliant idea and gives it what Barry Bonds got.

To see the script in action, try highlighting any text on this page. For email or copy/paste credit, select 40+ characters of text. For specific search-worthy examples, try:

  • Wiki: Machiavelli
  • Google: World Trade Center, NY
  • Facts (Wolfram): Hamburgers
  • Amazon: 1984 by George Orwell
  • Ebay: XBOX 360

For more information about this plugin, visit the official Search and Share page. If you like it, I’d really appreciate you bumping me up on the social network of your choice. Thanks for the love!

PS: In case you missed the links the first time around, you can download the standalone jQuery version here, and you can download the wordpress version here.