Add a Bookmark button

I was recently asked for a simple way to add a "Bookmark this site button". Nice little feature, but a little annoying to implement across a wide range of browsers. With some HTML / Script additions, you can have this feature, although different browsers will handle it differently.

Firefox and all other mozilla / gecko based browsers will pop up the add bookmark dialog. IE 6 and below will do the same. IE7 will work for some people, however increased security measures stop it from working in most cases. Safari has no automated method, so will pop up a message telling the uer to press CTRL+D to bookmark it.

The first thing you need is the following lines in your base HTML:


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript"> </script>
<script src="http://www.australele.com/usw/js/bookmark.js" type="text/javascript"> </script>
<script type="text/javascript"> 
var title = "Ukulele Shirt World"; 
var url = "http://www.printfection.com/ukulele"; 
</script>

If you have used any of my previous toys, you will not need the first line. Change the two var lines to reflect your store correctly.

Then you need to add the button. Add the following HTML to the spot where you want the button to appear:


<div class="BookMarkMe">Bookmark this Store</div>

The inner contents of the div could be an image or text or whatever you like.

Finally, you will want to style the button with something like this CSS:


.BookMarkMe {cursor: pointer; border: 1px solid #333; display: block; height: 20px; text-align: center; line-height: 22px}

23.11.2007. 14:57

Eric on 25.03.2008. 12:33

I cannot figure out what to do with the .BookMarkMe bit. I put it in the head, it does not work. What do I need to do with it?

Gavin Smith on 25.03.2008. 14:28

That section is CSS code and therefore needs to be put into your stores Custom CSS tab.

David on 13.08.2009. 16:15

Does anybody know a widget for blogger that does the same function?