Pinterest Stumbleupon Whatsapp

firefox bookmark toolbar buttonEver since Pinterest came around, I started re-discovering the power of bookmarklets. Recently, Erez told you all about Stop Installing Browser Add-ons - For a Faster, Leaner Browser Use Bookmarklets Instead Stop Installing Browser Add-ons - For a Faster, Leaner Browser Use Bookmarklets Instead Read More 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.

firefox bookmark toolbar button

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 [NO LONGER WORKS] 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…

bookmark toolbar icons

Since we’re using a bookmarklet, we’ll have to use the Code tab to enter the bookmarklet’s JavaScript. After you get the code, you’ll need to wrap it up in this:


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”.

bookmark toolbar icons

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:

bookmark toolbar icons

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.

bookmarklet button

Drag the button to where you want it to be, and voila! You’re done.

bookmarklet button

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.

firefox bookmark toolbar button

Bottom Line

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.

Check Mark Image via Shutterstock

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Terafall
    November 6, 2012 at 4:18 am

    I never knew I can do that with Firefox