Adding a DotNetKicks image via Javascript - Jon Galloway

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.

Published Thursday, March 8, 2007 2:35 PM by Jon Galloway

Comments

# re: Adding a DotNetKicks image via Javascript

Very nice, thanks for creating this Jon.

Friday, March 9, 2007 10:48 AM by Gavin Joyce

# re: Adding a DotNetKicks image via Javascript

Many thanks was very usefull.

Friday, March 9, 2007 1:19 PM by Adel

# re: Adding a DotNetKicks image via Javascript

You're a star and I get to kick you!

Wednesday, March 14, 2007 5:23 AM by Haacked

# re: Adding a DotNetKicks image via Javascript

Du musst ein Fachmann sein - wirklich guter Aufstellungsort, den du hast!

Wednesday, March 14, 2007 9:33 PM by ...

# re: Adding a DotNetKicks image via Javascript

Very useful stuff!

Wednesday, August 1, 2007 6:12 AM by dotnetUncle - .NET Interview Questions

# re: Adding a DotNetKicks image via Javascript

Thanks. That's useful. Gonna use it on my blog.

Sunday, September 19, 2010 8:00 AM by Jaroslaw Dobrzanski

# re: Adding a DotNetKicks image via Javascript

wkwfq retractable awnings bgagjl

Monday, April 18, 2011 7:07 AM by awning crank

# re: Adding a DotNetKicks image via Javascript

gvhci<a href=> reggie wayne jersey </a>

aromd<a href=> ray lewis jersey </a>

otaur<a href=> haloti ngata jersey </a>

lfrzk<a href=> andrew luck jersey </a>

fxoon<a href=> jeff saturday jersey </a>

Tuesday, October 23, 2012 1:02 PM by Jimmyak1vr

# re: Adding a DotNetKicks image via Javascript

HxicOCSJ  watgUTCqi  eqneuzaije  NOXuTtazb erifar  TclTBEAFsxw EpmzUSZE  wmpzEJBxx QgpsTOID  pazwFLKri

Wednesday, November 7, 2012 12:19 PM by NamiInsicemen