How Add “Bookmark to del.icio.us” Links to Your Pages

del.icio.us is a popular social bookmarking website were people can save, tag and organize their favorite web pages and websites. Often times, you will find hyperlinks on blog posts and web pages that provide linking functionality for readers to bookmark the information right to their del.icio.us account. This posts highlights two ways to add del.icio.us links in WordPress as well as additional resources for TypePad, WordPress Plugins and more in-depth information and functionality.

Here is a simple piece of JavaScript that I use for my individual posts and pages:

  • <a href="javascript:location.href=’http://del.icio.us/post?v=2&url=’
    +encodeURIComponent(document.location.href)+’&title=’
    +encodeURIComponent(document.title)+’ ‘">

encodeURIComponent(document.location.href)” references the browser web address and “encodeURIComponent(document.title)” references the title of the page.

Because the references are from the actual web browser (client-side), I needed to use different functionality for the home page bookmarks, otherwise, all of my links to specific posts would solely access the home page information.

For the home page, my del.icio.us code looks like this:

  • <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title();?>">Save to del.icio.us</a>

For this example, placing this snippet of code into the actual post references, enables the del.icio.us hyperlink to pick up each specific post’s information. If that does not make sense, here is a screenshot of where I actually placed the information:

Screenshot of index.php

One final note: I like to add the del.icio.us icon to my hyperlinks as well, just to catch the eye. The URL to the icon I use is here: http://www.capecodseo.com/cc_images/delicious.png (please copy and upload to your own location if you would like to create similar functionality).

For TypePad and Movable Type Blogs Specifically

This piece of code will work specifically with blog authors using TypePad or Movable Type blog functionality:

  • <a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=
    <$MTEntryTitle$>" target="blank">post to del.icio.us</a>

In this code, “<$MTEntryPermalink$>” references the web address (permalink) of the blog entry and “<$MTEntryTitle$>” references the blog title. JoeSchmidt.com has a more comprehensive post recommending exactly where you should actually place this code in your template, as well as additional links and resources.

More Resources for Bookmarks to Del.icio.us

WordPress Social Bookmarking Plugins


Comments

Comments are closed.