Dynamic del.icio.us links plugin for WordPress

Animated demonstration of what the plugin does - loading link data when a visitor clicks the link

wpDynamicDelicious is a plugin for WordPress that allows you to implement del.icio.us links into any blog post in an unobtrusive manner. Once activated you can use the following syntax to add del.icio.us links to the blog post.

[delicious:Link Text,user name,amount,tag]

The plugin then turns this into a real link and applies a JavaScript that shows the links and accompanying tags when you click the generated link.

You have full control of the displaying style (via CSS hooks) and you don't slow down your site with server side includes. Users without JavaScript will still get a link to your bookmarks on del.icio.us.

You can see a demo of how the outcome might look like on this page. Please comment and praise on the blog.

Get the Code!

WP Dynamic Delicious (ZIP)

Installation

Unpack the zip file and upload both the files wpDynamicDelicious.php and wpDynamicDelicious.js to your wordpress plugin directory at {blog root}/wp-content/plugins/.
Activate the plugin in the "Plugins" section of your WordPress admin. The plugin name is "Dynamic del.icio.us integration".

Using the plugin

Once activated, you can use the following syntax to embed bookmark goodness into your pages.

[delicious:link text,user name,amount,tag]

link text: The text displayed in the link, f.e. "My JavaScript links".
user name: the del.icio.us user name, f.e. "codepo8" (mine).
amount: the amount of displayed links, f.e. 20.
tag (optional): only returns links tagged with this tag, f.e. "JavaScript".

The plugin turns this into an HTML link and applies the JavaScript to load the links on demand instead of sending the user to the del.icio.us homepage.

Styling the output

The plugin converts the syntax into the following HTML link style:

<a href="http://del.icio.us/codepo8/javascript" 
class="deliciouslink amt5 tagged">My JavaScript Links</a>

Every link will have the deliciouslink class and those that only display tagged links will also have a class called tagged.

When the visitor clicked the link and the information was loaded, you'll end up with the following construct:

<a href="http://del.icio.us/codepo8/javascript" 
class="deliciouslink amt5 tagged loaded">My JavaScript Links</a>
<ul class="deliciouslinks">
  <li><a href="http://url">Linktext</a></li>
  [...]
  <li><span class="delicioustags">Tags:</span>
    <ul>
      <li>
        <a href="http://del.icio.us/codepo8/javascript">javascript</a>
        <p>[...  Notes ...]</p>
      </li>
      [...]
  </li>
</ul>

This means you can use the loaded class to indicate when the information was loaded and the link is pointing to the del.icio.us homepage again. You can use deliciouslinks to style the overall list and .deliciouslinks ul to style the tags list. You can also change .deliciouslinks span.delicioustags to style (or hide) the "Tags:" list item. If the bookmark has notes, these are displayed in a paragraph, which can be styled with .deliciouslinks li p.

Licencing and Use

The script is released under a Creative Commons Attribution-Share Alike 3.0 License which means you can use and modify it as long as you attribute the original script to me, flag up the changes you have done to it (I don't want to have to answer bug-reports caused by your modifcations) and share the final product under the same license. If you want to use the script commercially and you don't want to attribute me, please email me and we can talk shop about terms, conditions and pricing.