How to add ShareIt! – Social Media Bookmark Bar
Posted: Wed Feb 24, 2010 11:24 am
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.
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
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.
This will give you a bookmark bar like the one above.
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
If you have an IDN domain you need to use the share_domain setting, set it to your puny-encoded domain. Like this
There you have, you should now have your very own bookmark bar!
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 3226 times
Step 1
Download shareit.js and icon pack
Share.zip- (2.25 MiB) Downloaded 421 times
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
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>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>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>