Adding a DotNetKicks Image/Badge via jQuery

A while ago Jon Galloway posted a short article titled “Adding a DotNetKicks image via JavaScript” which contains the small amount of JavaScript code necessary to add a DotNetKicks.com Image / Badge to your web pages. The DotNetKicks Badge is essentially a link that allows users to go to DotNetKicks.com to vote for you web page, and the badge also displays the total number of “kicks” that your page has received. Since jQuery has become insanely popular since Jon originally posted his JavaScript code, I thought I would post a jQuery version of his code.

Here’s a simple demonstration of the DotNetKicks.com Badge that the below jQuery/JavaScript code will generate:

To use the below code you just need to follow the following steps:

• Create a <DIV> element where you want the badge to be displayed.
• Set the <DIV>’s ID to postToolbar.
• Make sure that the jQuery Library is included within the page.
• Include the below jQuery / JavaScript code within the page.</li>

Here’s the jQuery / JavaScript code:

$(function() {
    var currentPageUrl = document.location.protocol + "//" + document.location.host + document.location.pathname;
    $('#postToolbar').append(
            $('<a/>').
                    attr('href', 'http://www.dotnetkicks.com/kick/?url=' + currentPageUrl).
                    css({ border: 'none' }).
                append(
                    $('<img/>').
                        attr('src', 'http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=' + currentPageUrl).
                        css({ border: 'none' })
                )
        );
});