How To Create Your Own Social Bookmarking Script

Social bookmarking is a great way to bring traffic to your website. Each social bookmarking network often has its own scripts for users to insert into their website to share articles on it. This may increase the number of included javascript files if you use many social bookmarking networks, thus increase page loading time. So I decided to create my own social bookmarking script that works with major networks and can be expanded more.

This post will explain in detail how I created the script, how it works and how to expand it.

Step 1. Define Image Path And Social Bookmarking Networks

First, we wrap all our script to an anonymous function to prevent it from conflicting with other scripts. This also can help us to declare and use javascript variables without caring about name duplication.

(function(){

// our code goes here

})();

We'll use images in our social bookmarking script, so we need to define the image path:

var imgPath = 'sb-images/';

Then we define which social bookmarking networks will be used:

var sites = [
    ['feed', 'Subscribe to RSS Feed', 'http://feeds.feedburner.com/deluxeblogtips'],
    ['delicious', 'Bookmark this post at Delicious', 'http://del.icio.us/post?url={url}&title={title}'],
    ['digg', 'Submit this post to Digg', 'http://digg.com/submit?phase=2&url={url}&title={title}'],
    ['stumbleupon', 'Share this post at StumbleUpon', 'http://www.stumbleupon.com/submit?url={url}&title={title}'],
    ['twitter', 'Share this article with your Twitter followers', 'http://twitter.com/home?status={title}%20{url}'],
    ['technorati', 'Add to your Technorati favorites', 'http://technorati.com/faves?add={url}'],
    ['facebook', 'Share this post on Facebook', 'http://www.facebook.com/sharer.php?u={url}&t={title}'],
    ['reddit', 'Share this post on Reddit', 'http://reddit.com/submit?url={url}&title={title}'],
    ['mixx', 'Share this post on Mixx', 'http://www.mixx.com/submit?page_url={url}&title={title}'],
    ['newsvine', 'Share this post on NewsVine', 'http://www.newsvine.com/_tools/seed&save?u={url}&h={title}'],
    ['email', 'Send this post to your friend', 'mailto:?subject={title}&body={url}']
];

This is defined as an array, each element of the array describes a social bookmarking network with 3 fields:

• name of the network: this must be the same as image's name
• title: when we move mouse over the image, this title will be shown. It's also used in image's alt attribute
• link: the submit link to social bookmarking network. In this link, we use {url}, {title} to present url and title of current page.

Note: to make the submit link valid, all HTML special chars like (&) and space have to be escaped to & and %20.

As you see, I've added the Feed link and Email link to the declaration. It would be nice if your readers can subscribe to feed or send the web page to friends.

Step 2. Get URL And Title Of Current Page

When it's done, we'll get the url and title of current page as in the following code:

var url = encodeURIComponent(location.href),
    title = encodeURIComponent(document.title);

The url and title are escaped using encodeURIComponent function to make sure that the submit link is valid.

Step 3. Generate HTML Code

Then, we loop through the sites and generate corresponding HTML code:

var html = '<ul class="social-bookmarks">';

for (var i = 0, len = sites.length; i < len; i++) {
    var site = sites[i],
        link = site[2].replace('{url}', url).replace('{title}', title),
        imgSrc = imgPath + site[0] + '.png';

    html += '<li><a href="' + link + '" title="' + site[1] + '"><img src="' + imgSrc + '" alt="' + site[1] + '" /></a></li>';
}

html += '</ul>';

document.write(html);

The code is simple: for each social bookmarking site, we replace {url} and {title} in submit link with real value of url and title of current page, then generate HTML code. After all, we write the code to the document.

Step 4. Wrap In Separate Files

Save all your script as an javascript file (for example: sb.js) and include it in the place where you want to show social bookmarks.

<script src="sb.js" type="text/javascript"></script>

This code will be shown as an unordered list. To make it beautiful, we use some small CSS rules:

.social-bookmarks {
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-bookmarks li {
    display: inline;
    float: left;
    margin-right: 10px;
}
.social-bookmarks a:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.social-bookmarks img {
    border: none;
}

Save this code as a CSS file (for example: sb.css) and include it in the header section of page:

<link href="sb.css" rel="stylesheet" />

That's all. You can enjoy the script now.

How to expand the social bookmarking script

Expanding the social bookmarking script is easy. All you need is just add more networks into the network array with the following template:

sites = [
    // all existing declaration

    // add more networks
    ['name', 'title', 'submit link']
];

Note that the submit link uses {url} and {title} to present the url and title of current page.

You can see the code in action in the footer of each post in this blog. I've created a download package with all needed images, script and styles that you can use immediately:

Download Source Code Of Social Bookmarking Script