A bookmarklet is a neat little piece of code that you can drop into the bookmark toolbar in your browser that gives you one click access to all kinds of interesting information. I want to show you a quick tutorial for building your own bookmarklet to check the number of backlinks coming into any website that you are current viewing.
First, pick your data source
My absolute favourite thing about being a hacker/coder is that I really don’t have to do any of the hard graft – someone somewhere has already done the difficult stuff, they’ve created the data source and trust me, there is pretty much an API for anything you want on the web. So with these bookmarklets we aren’t really creating new data we are simply shortcutting our way to the information that we want.
Paul Madden is a great person to talk to about the process of taking something manual and automating it. It all starts with a simple objective that ANY human can complete, knit simple objectives together and you have a process. ‘Shake the process’ i.e. make sure that the process works with real people and then when you are confident you can start automating.
Bookmarklets require the same structured way of working – you need to be able to manually access the data and it needs to be quite simple otherwise your bookmarklet will fall down. The other point to mention with bookmarklets is that they need to be one click, one action. If you try to throw too many steps into the bookmarklet it will fall down and you won’t use it.
Our objective for this tutorial is to get a list of the top websites linking to any website that we are currently on. So we need three things:
- The data for the top websites
- The address of the current website
- The criteria for measuring the top websites
Doing it manually
SEOmoz has a website called Opensiteexplorer and they (for free) give you information about the links coming to your website. They also give you information about any website that you add to the search box. Pick a website, for this example I’ll use Seer Interactive. Search for that in Opensiteexplorer and you will see this:
Ace, a list of the top inbound links. But wait, these links are individual links and we would like to just get root domains. Opensiteexplorer gives you an option to show ‘linking domains’. If you click on the middle tab you will see:
Now, like I said, you need to be able to do that manually and in a single step because your bookmarklet is not going to be able to click on a tab.
Testing the URL
Grad the URL that is in the address bar when you see the above linking domain data, open up a different browser and paste the address. If you see the exact same information you know that you can get to the data from a single step.
Obviously for this test we knew that we could get that data from OSE, but the principle is the same: navigate yourself to the data, grab the URL and try is somewhere else to make sure that you can access it.
This is always going to be the case, sometimes the URL you paste into another browser gives you an empty screen, sometimes you get the search box rather than the results. This is the difference between GET data and POST data. GET data is the stuff you want because there will always be a specific URL that you can get back to the same information wherever and whenever you want.
Making up the URL
If you take the above example you will see that the URL is this:
The first part of the URL is the domain www.opensiteexplorer.org. The last part of the URL is the ?site=www.seerinteractive.com. The middle part of the URL /domains is the operator that specifies that you want to see top domains. Click one of the other tabs and that will change:
- links will show all links
- anchors will show top links text
- pages will show top pages
You will see an alert window pop up saying “Hello” and then you can click OK to close it.
Try this one:
Now things start to get interesting – you should see the root domain of the website you can currently on, so if your on Google an alert box will pop up saying “www.google.com”. Now try this again but do it on this blog post and change the code slightly:
You will see this:
Turning the URL into something automated
We now have a way of grabbing the address of the current page you are on so with a bit of automation and code we can make the bookmarklet grab that address and place into the end of the URL we know gives the data we want from Opensiteexplorer.
The code to do that is:
Try that in the console for this page and you will this:
That’s great – that exactly the same as the URL you would paste into a browser window to get to the data!
Making the bookmarklet
Now that you’ve done that stuff above it’s super easy to create the bookmarklet. What you need is to take the URL that is being displayed in the alert box but instead of just displaying it you want the browser to action it i.e. actually take you to the URL.
Simply, you are saying “location.href” (the browser’s URL) needs to equal “www.opensiteexplorer.org” (the Opensiteexplorer website) with the “domains operator” (the top websites tab) “+” the current “location.href” (the browser’s URL).
Done! Now whenever you click on the bookmarklet you will be redirected to Opensiteexplorer and it will show you a list the top websites linking to the URL you were browsing.