A Quick Tutorial on JavaScript Bookmarklets

Bookmarklets are very handy pieces of JavaScript code that you can bookmark. In HTML, if you want a link to open in a new window, you’d write it like this:

<a href=”https://www.mattcutts.com/blog/” target=”_blank”>Matt Cutts</a>

Go on, try it on this link: Matt Cutts

If you wanted to create a bookmarklet to open a new window or tab, you’d do it like this:

javascript:(function(){ window.open(‘http://www.cnn.com/’); })();

so the actual bookmarklet link that would appear in your HTML as

<a href=”javascript:(function(){ window.open(‘http://www.cnn.com/’); })();”>CNN</a>

and if you want to play with it, here’s the trivial CNN example bookmarklet. On Firefox, you can drag the bookmarklet to your bookmarks bar. On Internet Explorer, you can right-click and select “Add to Favorites…”.

The reason I mention this is that bit.ly is a url shortening service that I like, and they have a bookmarklet, but it replaces the page that you’re shortening. Their bookmarklet looks like this:

javascript:location.href=’http://bit.ly/?url=’+encodeURIComponent(location.href)

So suppose you find a new page that you want to twitter about or shorten the url for some reason. You want a bookmarklet that opens the bit.ly url in a new window or tab instead of replacing the current page. Combining the two bookmarkets, you’d get

javascript:(function(){ window.open(‘http://bit.ly/?url=’+encodeURIComponent(location.href)); })();

and here is a bookmarklet for bit.ly that opens your bit.ly url in a new window or tab. You can just drag the bookmarklet to your bookmarks folder.

That’s enough to get you started with bookmarklets, but you can find more info about bookmarklets by searching or by looking at example bookmarklets around the web. For example, industrial-strength bookmarklets often load JavaScript dynamically from a webserver. That way if you want to upgrade or improve the functionality of the bookmarklet, you can change the code on the webserver instead of asking every user to update their bookmark. On the other end of the spectrum, some quick-and-dirty bookmarklets don’t even bother escaping the url.

I want to open a new tab, not a new window!

Some webmasters want to choose between a link opening a new tab vs. a new window. I believe that you don’t get that choice — it’s up to the user and their web browser. For example, in Firefox a user can select their desired behavior under Tools → Options → Tabs → “New pages should be opened in:” and choose “a new tab”. Or to tweak the setting directly, the user can type “about:config” into the location bar/address bar and then modify the “browser.link.open_newwindow” option to be one of the following values:

1 = open new windows in the existing window
2 = open new windows in a new window
3 = open new windows in a new tab (this is the default in Firefox 2 and Firefox 3)

See this about:config page for more info.

Likewise in Internet Explorer, the user can go into Tools → Internet Options → “Settings” button in the Tabs section and then under “When a pop-up is encountered:” choose “Always open pop-ups in a new tab”.

30 Responses to A Quick Tutorial on JavaScript Bookmarklets (Leave a comment)

  1. Hi Matt,

    and now the big question … do those Bookmarklets you described also transfer Linkpopularity to the target page? Maybe you can give us a posting about Java Script Links and the Google Crawler. But I think with your example you wanted to show us which Links are value to Google.

    Thanks, Michael

  2. I never knew it was possible to drag jscript bookmarklets into the toolbar like that. I do it all the time for regular links, but never thought of this. That bit.ly one will be good.

    Interesting you want to leave the choice of opening up a tab or a window in the users hands, yet you do choose to overwrite the user by forcing the new window/tab in the bookmarklet? I used to always code links to open in a new window but got an earful about it years ago from a developer friend so have moved away from it. Same reason; don’t override your user’s choice. Now it annoys me no end when a link opens in a separate window as it takes an extra move+click to ‘fix’ (the focus has moved to a new window/tab although the user expects it in the same window or else they would have ctrl clicked). Anyway, just struck me as odd considering “I believe that you don’t get that choice — it’s up to the user and their web browser” but you’re certainly not alone in doing that!

  3. Hi Matt
    Nice article. One question. Will google be able to follow links such as CNN?

    / Niklas

  4. Am I being dense here. I see no difference between the HTML and bookmarklet links. Both open in a new tab and I can drag both to my bookmarks (using FF).

    I’m also a bit miffed that the function hijacks my browser, right click no longer offers the ‘open in new tab/window’ option.

    But I do like the way I can use bookmarklets to change the appearance of a webpage on the hoof. If you haven’t already then read the tutorial that Matt recommends, it’s given me something to play with (instead of doing some work).

    Ta very much Matt.

  5. Matt, this is one of the most important elements of good web design – nothing frustrates users (me in particular) more than hijacking the expected behavior of the most commonly used interface tools (in this case, link clickage!).

    Google is NOTORIOUS for disabling my ability to middle-click a link and have it open in a new tab – or it opens the wrong page when I middle click. See the current beta test iGoogle for examples – middle click “Inbox” – the destination is just “#”! Instead, middle click “Gmail”, and you get the expected behavior.

    Why? Because developers often use “#” to remove any behavior on the link without JavaScript. This is bad, in both the user’s and Google’s eyes (correct me if I’m wrong, Matt!): instead, you should be using this technique:
    <a href="http://www.destination.com/url" onclick="your_function(); return false;">link text where the “return false;” cancels the behavior of the href element when JavaScript is available.

    To summarize, “#” is not an anchor reference, stop sending users there!

  6. I just have one minor caveat as far as this post is concerned: target=”_blank” is an invalid attribute withing certain doctypes (XHTML 1.0 Strict, for example).

    http://www.456bereastreet.com/archive/200603/the_target_attribute_and_opening_new_windows/

  7. Thanks again Matt. I am going to start integrating this into my http://www.ehlinelaw.com/ site.

  8. Hey panzermike: if that’s you in the video on your site, has anyone ever told you that you look a little like Michael Douglas, especially his character in the movie Falling Down?

    For those who haven’t seen the movie, I can’t sit through movies for the most part because they’re usually ad nauseam boring predictable crap and I recommend you watch it. The ending is somewhat predictable, but the journey to it sure isn’t. Awesome flick.

  9. @ Multi Worded:

    Yes that is me and yes I have been told I look like the guy in American Psycho, Michael Douglas, and even Sean Spicoli Penn.

    I like to think I am just a good looking all American guy.

    I will check out the flick though.

  10. Hey Matt, nice tutorial. Just wanted to ask, as some people have already, if these links will pass “link juice” and indeed be followed, as I thought that Google still couldn’t read javascript? Secondly Matt, is this not considered some form of ‘cheating’ by Google, as it can’t read the links, so would Google see us as hiding this link from it? I hope you can clear this up for me. Thanks.

  11. Matt, I find those javascripts interesting. But I have a problem with them, just like I have a problem with ‘onclick’ events in links.

    The user doesn’t necessarily know what will happen and which URL they will be taken to when they click on the link.

  12. This is nice. At least we can give our readers a way of making a bookmark shortcut for your website despite it will not be crawled by spiders.

  13. Matt,

    Tell us more about this very useful helpful great productGoogle Insights for Search 🙂

    If/when you can read Danish, here is something about Google Insights for Search published yesterday on this great magnificent informative ethically SEOed Business.dk Danish news site 🙂

  14. the bit.ly will help me, I never thought of that. Can google read javascript now? Can Glyphius be used in this same manner too?

  15. Great tips Matt – I always enjoy shorter URLs but I’m always a little hesitant in using them. It’s probably just me but I’ll usually look at a URL before visiting it – found that a lot of spammers, and scammers, use them for fraudulent things…figures 🙂 leave it to those guys/gals to ruin a good thing! Oh well, there’s a reason for everything and I’m sure you’ll agree that spammers teach us all a lot – I’ve grown to appreciate them.

  16. NICE!! I just checked it out and it looks like you could use a few descriptive words in the URL – definitely a plus if you want to give users a clue before they click.

  17. I don’t like unnecessary javascript links because they obscure the action the user is deciding whether to take, and also because they’re not compatible with the Google Search Appliance!

  18. @Brian: How so?

  19. That’s really very nice and I will implement it soon on my one site to test it.

  20. The whole tab/window arguement always amazes me – personally I really don’t mind but in my office it’s a source oh heated debate and frustration.

    No, really it is!

  21. This is great information, I plan on testing this out for sure…thanks again!

  22. I always find bookmarklets handier for most used sites then just plain bookmarking them. On firefox i just rick click on toolbar, select customize and drag the toolbar to the top. After that i just drag important urls from the url bar to my bookmarks bar. I decided it best to do that with google analytics seeing as i’m always logged into google.

    BTW, you might want to mention a nice firefox add-on called GMarks, it allows people to use Google bookmarks then allowing you to export them to firefox bookmarks. It’s the best replacement for Google Browser Sync so far.

    Anyways love how Google is doing things. I sure hope Microsoft loses out on Yahoo. Ironic Microsoft calls Google a monopoly when Microsoft owns as much of the OS market as Google does the search engine market. I think its Microsoft thrown a temper tantrum for not getting their way with Yahoo. =P

  23. Matt, can you clarify if using a Javascript code in the link will have an impact in terms of “link juice”?

    Also, I have always wondered if there was a best practice in terms of pages opening in another window from the same site.

    I appreciate it is very much something that is judged on a site by site basis, but does the Big G prefer one, the other, or does it simply not care?

  24. Nice article, Matt. I’ve got a question similar to Simon’s. Some webmasters claim that if you place a link it is better that the site opens in the new window. Why so? Is it not to lose visitors? thank you.

  25. Hi Matt,
    your functionality is great but your JavaScript is obtrusive.
    Users will be frustrated if they don’t have the possibility to interpret it .
    When will a Google Team Member produce a relevant client source code ?

  26. Althoug there are plenty of services like this, bit.ly is one of the best, I use this since 2007. Can recommend it.

    @Web development
    There is no difference to use target=”_blank,
    at least, not for search engines.

  27. I love the tips Matt, but I am curious about google passing link juice. Will google give me the credit for the linking in javascript?

  28. Matt,
    Nice blog, but IMO you missed an important class of bookmarklets as this:

    javascript:(function(){q=document.getSelection();if(!q)q=prompt(‘Dictionary.com%20Search:’);if(q)location.href=’http://dictionary.reference.com/search?q=’+escape(q);})()

    that search the selected world in dictionary.

  29. Thanks matt for the wonderful post. This is very interesting.

  30. Thank you so much for this tutorial! It’s awesome!

css.php