1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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