How to add ShareIt! – Social Media Bookmark Bar

[Neo]

Want a “web 2.0? styled bookmark bar for your blog that automatically creates submission links (bookmark and share) to social media sites? if you answered yes, then continue reading.

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.

bookmarks.png (10.13 KiB) Viewed 2827 times

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

Step 1
Download shareit.js and icon pack

Share.zip

(2.25 MiB) Downloaded 359 times

Step 2
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.

Code: Select all

<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

Code: Select all

<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

Code: Select all

<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!