Ever since Pinterest came around, I started re-discovering the power of bookmarklets. Recently, Erez told you all about why you should use more bookmarklets and less browser extensions, and while I definitely still use several extensions, there are some websites that work better with bookmarklets.
After using Chrome as my default browser for quite some time, I’ve recently gone back to my roots and am now using Firefox 12. For some reason which I have yet to research sufficiently, I can’t seem to drag bookmarklets to the bookmark bar and have them appear there, easy to reach. Even with that aside, though, I really dislike the bookmark bar, which takes up too much of my valuable window space. So should I give up bookmarklets completely?
This was when I found this really cool tip on ReadWriteWeb, about an add-on which allows you to turn simple bookmarklets into nice Firefox toolbar buttons. The process requires some tweaking, but is overall very simple. So without further ado, here is how you can turn any bookmarklet into an easy-to-use toolbar button.
Get Custom Buttons
The first step is to download an add-on called Custom Buttons and add it to Firefox. This little add-on lets you create any toolbar button you want, which is a nice feature regardless of bookmarklets. I will, however, focus on bookmarklets on this post.
After the compulsory Firefox restart, you’ll be ready for the next step.
Get A Favicon For Your Button
Custom Buttons lets you create any button you want, but it only comes with star icons in five different colors. While it’s not the end of the world for your Pinterest button to be a red star, it would be much clearer and cooler to have the actual favicon. There are two easy ways to get a favicon from any website.
1. Point your browser at:
You can change the domain at the end to any website you wish to grab the favicon off of. This will open a webpage with only the favicon on it. Simply right-click and select “save image as” to grab it.
2. Use GetFavicon. Enter the website in the search box and get the favicon. This doesn’t work with every domain, so just give it a try and see what happens.
Now that you have a favicon, you can create the actual button.
Create The Button
It’s showtime! To add a new button, go to View –> Add new button…
So go ahead and paste that into the editor in the Code tab of the Add new button window.
To get the code you need, find the bookmarklet you want to add, and instead of dragging it to the bookmark bar, right click on it and choose “Copy Link Location”.
Now go ahead and paste that inside the quotation marks of the button code you prepared, and add the favicon you saved earlier to the Image field. When you’re done, it should look something like this:
You can also give your button a name if the favicon is not enough. When you click OK, a message will pop up telling you your button was successfully created.
Adding Your Button To The Toolbar
Now all that’s left is to get that button onto your toolbar. Right click anywhere on the toolbar and choose “Customize…”. Scroll down and find the button you’ve just created.
Drag the button to where you want it to be, and voila! You’re done.
Clicking on this button will perform the exact same action as clicking on the bookmarklet. In this same way you can add any bookmarklet you use regularly. You can look here for some great bookmarklet suggestions.
After the button is ready, you can edit it, delete it, clone it and more, by right clicking on it. So if, like me, you’ve forgotten to give your button a name, you can always add it later on.
Custom buttons can be used to add bookmark buttons as well as bookmarklets. If you hate the unnecessary clutter of the bookmarks toolbar, this is an excellent way to get rid of it.
Do you use bookmarklets? Do you know of other cool things you can do with them? Share in the comments below.
More articles about: