How to Construct Your Own Bookmarklets

How to Construct Your Own Bookmarklets

Here's a sample code snippet for the bookmarklet above that shows links from OpenSiteExplorer.org:

javascript:location.href='http://www.opensiteexplorer.org/'+location.host+'/a!links'

To reproduce the effect with a bookmarklet that calls data from any site, you'll need to

1. Find a web-based tool that stores the webpage it's calling data for in the URL. For example, Google Trends for Websites uses a format like "http://trends.google.com/websites?q=site:seomoz.org"
2. Include the initial piece - javascript:location.href=' at the start of the bookmarklet link
3. Follow that code snippet with the desired webpage that contains data. For example, if I wanted to get Google Trends for Websites, I'd use http://trends.google.com/websites?q=site%3A - note that for special characters in the URL like the colon : you'll need to use the hex character codes (a good list is here)
4. Next you'll need to call the current URL. The most common way to do this is with window.location.href or location.host which pulls the URL string from the address bar.
5. You may need to strip out portions of the URL to get just the sub or root domain. In my example with Google Trends, I'd use document.domain.replace('www.','') rather than the full URL string from #4 above. This removes the www from a domain name if it exists and extracts only the domain portion instead of the complete URL.
6. To combine the javascript code snippet, you'll need to use proper syntax - following phrases with +, wrapping in single quotes and ending with a semicolon ;
7. The finished code snippet looks like this -  javascript:location.href='http://trends.google.com/websites?q=site%3A'+document.domain.replace('www.','');
8. You can use a wide variety of Javascript commands to build all sorts of bookmarklets, not just those that call URLs or append data. However, you'll need a more advanced tutorial to show you that process - sorry!

via seomoz.org