Archives

Archives / 2007 / March
  • 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.

    Read more...

  • Conditionally showing Google Ads

    Google Ads!

    Summary

    Consider hiding ads on your site depending on how the user got there.

    Why?

    A friend of mine recently experienced an unexpected surge in traffic to his site. He's been subject to a rampage of Digg-ers ever since then, scrambling to cut his image and RSS bandwidth.

    He's got some philosophical issues with showing ads on his site. I understand, but I think it makes sense to segment your users into two groups:

    • Preferred users - These folks came directly to your site and will see no or minimal ads. Visitors who arrived via a bookmark or RSS feed link are unlikely to click on ads anyway.
    • Walk-in users - these folks came to your site via search results or social recommendation sites like Digg, and can deal with a few ads. Visitors who found your site via search are looking for something and, heck, it just might come up in a contextual ad. Visitors who came via social bookmarking sites (on average) are a different class of user - they chew up bandwidth, spend a few seconds (3.6 seconds on average, to be precise) on your page, post an inane comment, and move on. They can deal with some ads to offset the trouble they're causing. Sure, Digg users aren't going to click on ads, but at least they'll contribute to the CPM ad count.

    How to do it

    I first read about this idea when David Brunelle added conditional advertising on his blog. It's a simple enough concept - check the referrer, and if they're in a list of domains, they get the ads. Our friends and co-workers and Moms who bookmark our pages don't get the ads. His sample is in PHP.

    The simplest solution seems to be the way Juan Julián Merelo came up with - just modify the Google AdSense Javascript so it only shows the ads for domains in a list. I modified his script a bit and came up with the following:

    <script type="text/javascript"><!-- google_ad_client = "pub-4855992354458847"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; //--></script> <script type='text/javascript'> if ( (document.referrer.indexOf( 'digg' ) > 1) || (document.referrer.indexOf( 'slashdot' ) > 1) || (document.referrer.indexOf( 'reddit' ) > 1) || (document.referrer.indexOf( 'google' ) > 1) || (document.referrer.indexOf( 'msn' ) > 1) || (document.referrer.indexOf( 'yahoo' ) > 1)) { document.write("<sc"+"ript type='text/javascript' src='http://pagead2.googlesyndication.com/pagead/show_ads.js'></scr"+"ipt>"); } </script>

    My friend - the one who got all the Digg traffic and got me thinking about all this stuff - has a bizarre condition that makes him overcomplicate nearly everything, so his blog is running his blog on MovableType. You may think it's a lame blogging platform, but you'll you may change your mind when you hear that it can run scripts in a state of the art language known as PERL. I didn't bother translating it to different server side languages because the Javascript sample is universal, but here's a sample PERL script in case you're a total backwards goofball with a popular MoveableType blog and you decide to conditionally show ads:

    if (($ENV{'HTTP_REFERER'}) && ($ENV{'HTTP_REFERER'} =~ /^http:\/\/(www\.)*(digg\.com|reddit\.com|slashdot\.org|del\.icio\.us)/)) { # referrer came from the domain list that gets ads <script type="text/javascript"><!-- google_ad_client = "pub-4855992354458847"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> }

    Google Ads!

    Do as I say, not as I do

    I'm not doing this on my blog. Since my is hosted at weblogs.asp.net, I don't have the control to put ads in with the content, just down in sidebar. See? No, down there. Yeah. Not worth the trouble to hide them. The ads in this post are fakes, in case your highly trained eyes just filtered them out. Out of curiosity, Did anyone not notice?

    Google Ads!

    Read more...