Adding a DotNetKicks image via Javascript

Update: This post is pretty old. While it still works, I'd recommend doing this with jQuery now. Chris Pietschmann wrote a followup with a jQuery implementation, so go check that out.

About DotNetKicks

DotNetKicks is a nice social bookmarking system (like Digg, Reddit, etc.) that's specific to .NET development issues. Users submit cool links, other users vote on it, popular links show up the front page and in an RSS feed. It lets you know what's going on in the .NET world right away without having to spend every second of the day scanning thousands of blogs.

Kick It!

One of the cool features is an image which shows the number of "kicks" a page has received. The image links back to the vote page, so you can just click the "kick it" button to vote. Neat. Here's a button from a recent post I did about connection string protocols:

Adding a Kick It button via Javascript

Some blog engines support the "kick it" button. The system I'm using - weblogs.asp.net - has a "kick it" link on every post, but doesn't show the images. It's a hosted system, so the only real way to tweak things is via CSS and Javascript. I hacked together some Javascript to add the kick count button. This is pretty generic, with the exception of the 'postToolbar' ID. You'll want to replace that with DIV (or some other container element) on your page.

Since the Kick counts are based on specific posts, this only displays the image when you're viewing an individual post.

UPDATE: Changed from Submit to Kick url, and changed the submitted url so it doesn't include the querystring.

addLoadEvent(AddDotNetKicks);

function addLoadEvent(fn)
{
    if (window.addEventListener)
        window.addEventListener('load', fn, false)
    else if (window.attachEvent)
        window.attachEvent('onload', fn);
}

function AddDotNetKicks()
{
    var insertLocation = document.getElementById('postToolbar');
    if(insertLocation)
    {
        var currentPageUrl = document.location.protocol + "//" + document.location.host + document.location.pathname;
        var dotnetkicksLink = document.createElement('a');
        dotnetkicksLink.href = 'http://www.dotnetkicks.com/kick/?url=' + currentPageUrl;
        var dotnetkicksImg = document.createElement('IMG');
        dotnetkicksImg.src = 'http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=' + currentPageUrl;
        dotnetkicksImg.border = 0;
        dotnetkicksLink.appendChild(dotnetkicksImg);
        insertLocation.appendChild(dotnetkicksLink);
    }
}

To do and notice

The DotNetKicks services are based on a page URL, so the Javascript pulls that in using document.location properties.

The script works by appending HTML elements to an existing DIV with an ID of 'postToolbar'. That element won't exist when the page is being loaded, so we need to wait on running the Javascript until loading is complete. I'm using the addLoadEvent to attach a load handler. I wrote more about that in a previous post about adding a logo to SQL Server Reporting Services reports.