How I Put My Del.icio.us Links In My WordPress Sidebar

I wasn’t really satisfied with the linkroll Del.icio.us provides, especially since it allows no control over the markup and use of CSS classes. I wanted my Del.icio.us links to use the stylesheet native to the theme I am using.

Luckily, Del.icio.us provides JSON feeds for their different types of content. So, I took the example provided and customized the JSON feed for posts to my liking.

Here’s the example I started out with:

<div id="container">
<h2>my bookmarks</h2>
</div>

<script type="text/javascript"
src="http://del.icio.us/feeds/json/geppe?count=20"></script>

<script type="text/javascript">
function showImage(img){ return (function(){ img.style.display='inline'; }) }

var ul = document.createElement('ul')
for (var i=0, post; post = Delicious.posts[i]; i++) {
var li = document.createElement('li')
var a = document.createElement('a')
a.style.marginLeft = '20px'
var img = document.createElement('img')
img.style.position = 'absolute'
img.style.display = 'none'
img.height = img.width = 16
img.src = post.u.split('/').splice(0,3).join('/')+'/favicon.ico'
img.onload = showImage(img);
a.setAttribute('href', post.u)
a.appendChild(document.createTextNode(post.d))
li.appendChild(img)
li.appendChild(a)
ul.appendChild(li)
}
document.getElementById('container').appendChild(ul)
</script>

And here’s what I did:

  • Provided the <div> called container with a new id. I wanted something less likely to cause confusion. I went with deliciouscontainer.
  • Modified the header text and made it a <h3> instead of a <h2>.
  • Changed the number of posts from 20 to 5.
  • Stripped out the favicons and everything related to them.
  • Added a new element to each list item: The item’s description (defined as post.n in the JSON feed).
  • Made sure the description only shows if it’s not empty, using a simple JavaScript if statement.

The final result is what you see in the sidebar on the homepage. Here’s the code I added to sidebar.php:

<div id="deliciouscontainer">
<h3>Recently bookmarked through Del.icio.us:</h3>
</div>

<script type="text/javascript"
src="http://del.icio.us/feeds/json/geppe?count=5"></script>

<script type="text/javascript">
var ul = document.createElement('ul')
for (var i=0, post; post = Delicious.posts[i]; i++) {
var li = document.createElement('li')
var a = document.createElement('a')
var p = document.createElement('p')
a.setAttribute('href', post.u)
a.appendChild(document.createTextNode(post.d))
p.appendChild(document.createTextNode(post.n))
li.appendChild(a)
if (post.n)
{
li.appendChild(p)
}
ul.appendChild(li)
}
document.getElementById('deliciouscontainer').appendChild(ul)
</script>

I haven’t yet seen a WordPress plugin that does this, but maybe I haven’t been looking hard enough?

Edit: I realized that not all my Del.icio.us bookmarks are that interesting, so I added a tag to the URL. Now only bookmarks tagged with geppedk in del.icio.us will show up here.

Not commented yet.

LEAVE A COMMENT