How to build your own Social Bookmark widget

Discussion in 'Social Networks' started by BurgerKing, Apr 22, 2007.

  1. #1
    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:
    [​IMG]

    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
     
    BurgerKing, Apr 22, 2007 IP