How to 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);

Code (markup):

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=”http://www.google.com/bookmarks/mark?op=add&bkmk=’ + TheURL + ‘&title=’ + TheTitle + ‘” title=”Bookmark to Google”><img src=”http://img2.imagepile.net/images/ycc2106/35814433.png” alt=”Google” height=”16″ width=”16″ border=”0″ /> Google</a>’);

Code (markup):

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("<style>a.sbm{padding-left:7px}</style>");
document.write("<div>Bookmark with:");
document.write('<a class="sbm" href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url='+TheURL+'&Title='+TheTitle+'")title="Add To BlinkList"><img src="http://img2.imagepile.net/images/ycc2106/89442389.png" alt="BlinkList"  height="16" width="16" border="0" /> BlinkList</a>');
document.write('<a class="sbm" href="http://www.furl.net/storeIt.jsp?u='+TheURL+'&t='+TheTitle+'" title="Bookmark To Furl"><img src=http://www.furl.net/i/favicon.gif alt="Furl button"  height="16" width="16" border="0" /> Furl</a>');
document.write('<a class="sbm" href="http://www.google.com/bookmarks/mark?op=add&bkmk='+TheURL+'&title='+TheTitle+'" title="Bookmark to Google"><img src="http://img2.imagepile.net/images/ycc2106/35814433.png" alt="Google"  height="16" width="16" border="0" /> Google</a>');
document.write('<a class="sbm" href="http://del.icio.us/post?url='+TheURL+'&title='+TheTitle+'" title="See who bookmarked at del.icio.us" ><img src="http://img2.imagepile.net/images/ycc2106/65682475.png" alt="del.icio.us"  height="16" width="16" border="0" /> Del.icio.us</a>');
document.write("</div>");

Code (markup):

Save it as 'socialwidget.js' and to use it on your site or blog, just add the code:

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

Code (markup):

The final effect is:


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 which talked about which were the important social network sites for bookmarking.

This post has been reprinted in full from my blog - http://gathadams.com