Previous     Next

Build your own Social Bookmark widget

It’s important to make it as easy as possible for your visitors to bookmark your site - both so they can find it again, and also so they can share it with their friends. I have a bunch of sites, and I wanted to create a simple way to add bookmarking to all of them.

Basically, the bookmark links provided by the social networks accept 2 parameters:

  • The URL of the site/post
  • The title of the page

It is easy enough to get both those values using javascript:

var TheTitle = encodeURIComponent(document.title);
var TheURL = encodeURIComponent(document.location);

It is important to encode the values, so that they can safely be placed in a bookmark URL.

You then just need the code to output the bookmark link. Here it is for Google Bookmarks

document.write(’<a href=”’ + TheURL + ‘&title=’ + TheTitle + ‘” title=”Bookmark to Google”><img src=”” alt=”Google” height=”16″ width=”16″ border=”0″ /> Google</a>’);

Add a few other Networks (BlinkList, Furl, Delicious) and the full code is:

var TheTitle = encodeURIComponent(document.title);
var TheURL = encodeURIComponent(document.location);
document.write("<div>Bookmark with:");
document.write('<a class="sbm" href="'+TheURL+'&Title='+TheTitle+'")title="Add To BlinkList"><img src="" alt="BlinkList"  height="16" width="16" border="0" /> BlinkList</a>');
document.write('<a class="sbm" href="'+TheURL+'&t='+TheTitle+'" title="Bookmark To Furl"><img src= alt="Furl button"  height="16" width="16" border="0" /> Furl</a>');
document.write('<a class="sbm" href="'+TheURL+'&title='+TheTitle+'" title="Bookmark to Google"><img src="" alt="Google"  height="16" width="16" border="0" /> Google</a>');
document.write('<a class="sbm" href="'+TheURL+'&title='+TheTitle+'" title="See who bookmarked at" ><img src="" alt=""  height="16" width="16" border="0" /></a>');

Or you can Download it here

To use it on your site or blog, just add the code:

<script src=”socialwidget.js” type=”text/javascript”></script>

The final effect is exactly what you see at the bottom of this blog post.

If you want to add more Social Networks, just find out their particular submission format and add them right in. I chose these four because they were recommended on a recent episode of Rush hour (doesn’t everyone listen to this?) which talked about which were the important social network sites for bookmarking.

If you liked this, then subscribe to my RSS feed


  1. nikki Jul 8

    Probably the best tutorial so far….but just a suggestion
    Would it be possible to show the code and highlight in colour where we are supposed to enter our site URL and title etc.

    I did this as I believed it was supposed to be but it just ended up as a mess of text when I pasted into Dreamweaver

  2. jame Aug 12

    you can try this out

  3. corelcao Oct 30


  4. stockpix Oct 31

    I’m also having trouble with getting this to work in a straight html page. Are these variables from wordpress or should it work on any old page. It does not look like the variables need to be declared in your page, but I clearly seem to be missing something here since nothing at all is showing up.

  5. bocmonvar Nov 20


  6. Discount Coupons Jan 29


    I have tried adding a different code from but that disturbs my design. I would like to add this code to but I guess but it does not have all the social bookmarks.

  1. Idea: One social bookmarking network to rule them all? |
  2. Social Networking Articles Blog » Blog Archive » Tips for Increasing Your Traffic on Social Networking & Bookmarking Sites
  3. » You SHOULD Submit Manually to Social Bookmarking Sites or Should You Social Networking Articles Blog
  4. » List of Social Bookmarking Buttons & Widgets for Your Web Sites & Blogs Social Networking Articles Blog
  5. Social Bookmarking Widget
  6. Bookmarks for Pingomatic and Pingoat