One of the features of the new RA Project re-design is to have a place where I share relevant links on reader appreciation. After debating the appropriate technique for link sharing, I finally went with del.icio.us to start a link blog for WordPress.

Within this article I will share a step-by-step tutorial on integrating your del.icio.us links with your WordPress (2.2 and up) installation.

Step 1: Get an Account

While it should be obvious, you can’t share your del.icio.us links without an account.

If you don’t have an account, registering is easy enough.

Step 2: Post Some Links With Appropriate Tags

You’re going to want to start posting some links so that they’ll show up on your blog.

One important thing to note here is your use of tags. Use a unique tag for every link you want to show up on your blog. For our blog I choose “raproject”. So basically anything tagged “raproject” will show up on this blog.

Step 3: Modify Your Theme

Open up one of your WordPress theme files (I decided to place the links in my “footer.php” file) and insert the following code:

<div id="linkblog">
    <a href='http://del.icio.us/ronalfy/raproject'>del.icio.us Links</a>
</div>

The above code is a place-holder for the real del.icio.us links to show and is a nice fall-back for users who don’t have JavaScript enabled. Just be sure to modify the above link to point to your own del.icio.us links.

Step 4: Add the LinkBlog JavaScript File to Your Theme Directory

Please download the LinkBlog JavaScript file and place it in your themes directory after unzipping it.

If you’d like to customize the output, please modify line 12 in the file. There’s three outputs that del.icio.us provides:

• post.u - The link URL
• post.d - The link Title (Description)
• post.n - The link notes (Long Description)

Feel free to customize to your heart’s content if you’re comfortable with JavaScript.

Step 5: Modify Your “functions.php” File

You’ll need to tell WordPress to load the JavaScript files. The best way is to add the appropriate code to your “functions.php” file. Every WordPress theme should come with one, and if not, it’s pretty easy to create an empty one using a text editor. I’ll also provide a downloadable sample “functions.php” file if you need one.

To load the appropriate JavaScript (I’m assuming you placed the JavaScript file in your theme directory), please add this code to your “functions.php” file:

add_action('wp_print_scripts', 'addScript');
function addScript() {
		wp_enqueue_script('delicious', 'http://del.icio.us/feeds/json/ronalfy/raproject?count=5');
		wp_enqueue_script('delicious_footer', get_bloginfo('template_url') . '/link-blog.js', array('jquery','delicious'), '1.0');
}

The above code adds the appropriate JavaScript files to your WordPress theme so the links can show up.

You’ll want to modify the path to the first file, which in this example is: http://del.icio.us/feeds/json/ronalfy/raproject?count=5

Say for example your username is “rachel” and you want to only show links with a tag of “blog“. Your link would be: http://del.icio.us/feeds/json/rachel/blog?count=5

For more pointers on modifying your link, please check out the JSON Post Feeds over at del.icio.us.

Step 6: You’re Done!

After you’ve followed the above steps, you should now be able to see your del.icio.us links in your blog footer (or wherever you chose to put them).

I personally find del.icio.us links a lot more flexible when showing a link blog because I can specify which tags to display. Using the custom JavaScript I provided can also lead to some nice customization possibilities.

Conclusion

Thank you for reading my short tutorial on adding del.icio.us links to your WordPress blog.

All the code mentioned in this post can be downloaded here.

Here is a link summary of the places I mentioned in this post:

• Register for del.icio.us
• Post to del.icio.us
• JSON Post Feeds

This article is a part of the del.icio.us social media mega group project.

If you liked this post, please consider subscribing or Stumbling this post. If not, please let us know how we can better serve you.