Adding a DotNetKicks Image/Badge via jQuery

20. July 2009

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:

kick it on DotNetKicks.com

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

  1. Create a <DIV> element wher you want the badge to be displayed.
  2. Set the <DIV>'s ID to 'postToolbar'.
  3. Make sure that the jQuery Library is included within the page.
  4. Include the below jQuery / JavaScript code within the page.

 

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' })
                )
        );
});

JavaScript, jquery ,



Comments

7/21/2009 6:25:29 AM #
Adding DotNetKicks Badge image using jQuery

You've been kicked (a good thing) - Trackback from DotNetKicks.com
7/21/2009 10:50:56 AM #
Nice way of sharing useful tips and guidelines with application guidelines.
7/21/2009 11:15:53 AM #
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.
puja singh
puja singh
8/21/2009 7:20:30 AM #
In this fast growing world softwaring basically takes a very important place for the entire whole and playing a very important role also....
this site is an informative one and related to sharing of technology approach to software development and use..... Really it's a fantastic way of sharing useful tips and guidelines....

<a href="http://www.ibowtech.com/algeria "> IT Solution</a>
sheela
sheela
8/22/2009 6:47:21 AM #

Nice post.
<a href= " http://www.ibowsolutions.com/algeria " >ItTrends</a>
2/5/2010 4:57:26 PM #
Pingback from weblogs.asp.net

Adding a DotNetKicks image via Javascript - Jon Galloway
Comments are closed