shapeshifter.se

I previously used the service from addthis but never really liked it so I created my own, you’re free to use it if you like. It’s a simple script that is quite easy (guess it depends on who you ask…) to use and that generates bookmark/share buttons for popular services such as delicious, digg, facebook, twitter and more.

Supports Delicious, Digg, StumbleUpon, Twitter, Technorati Favorites, Google Bookmarks, Facebook, Reddit, Diigo, Blogmarks, Blinklist and Magnolia

This is a sample of how the bookmark bar could look, it’s possible to re-arrange and remove individual services if wanted. The icons are courtesy of http://fasticon.com/freeware/index.php/web-2-icons/

Follow this guide to get your own bookmark bar, you need some knowledge of how to edit HTML.

Step 1

• Download shareit.js
• Download the icon pack from here or here

Step 2

Extract the folder Icons from Web2Icons_PNG.zip, copy the Icons directory and the shareit.js file to your webhost.

Step 3

Integrate a piece of JavaScript code where you would like the bookmark bar to appear, the script will automatically get the current page title and page link and use that as the base for the submission.

There are three variables that affect the look.

• share_show – Selects which services to display
• share_icon_path – Absolute path to icon directory
• share_domain – Optional, if you want your domain to be replaced with something else.

Make sure to adjust the path to the Icons and shareit.js so that they point to the correct position on your webhost.

This will give you a bookmark bar like the one above.

<script type="text/javascript">
var share_show = ['delicious', 'digg', 'stumbleupon',
   'twitter', 'technorati', 'google', 'facebook', 'reddit',
   'diigo', 'blogmarks', 'blinklist', 'magnolia'];
var share_icon_path = '/Icons/';
</script>
<script type="text/javascript" src="/shareit.js"></script>

You can tweak share_show to select and order which services you would like to display, for example to only display FaceBook, Digg, Delicious and Twitter set it like this

<script type="text/javascript">
var share_show = ['facebook', 'digg', 'delicious', 'twitter'];
var share_icon_path = '/Icons/';
</script>
<script type="text/javascript" src="/shareit.js"></script>

If you have an IDN domain you need to use the share_domain setting, set it to your puny-encoded domain. Like this

<script type="text/javascript">
var share_show = ['delicious', 'digg', 'stumbleupon',
   'twitter', 'technorati', 'google', 'facebook', 'reddit',
   'diigo', 'blogmarks', 'blinklist', 'magnolia'];
var share_icon_path = '/Icons/';
var share_domain = 'www.xn--bcher-kva.ch';
</script>
<script type="text/javascript" src="/shareit.js"></script>

There you have, you should now have your very own bookmark bar!

If you use this on your blog/website consider putting a link back to here, thanks.

This entry was posted on Tuesday, August 5th, 2008 at 11:31 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.