I've been working with Eric lately on Jobs.CodeBetter.Com, our Job ad publishing network. Eric's been the brains behind the web application, the concept and everything else. I've been doing the menial tasks such as skinning and creating our ad syndication application. I had a lot of fun writing the code that actually renders our ads onto our affiliate sites like DonXml, Hanselman.Com, Larkware, Devlicio.us, DevAuthority and others. I think I have developed a fairly good pattern for doing this syndication stuff
Minimal Deployed Code
I didn't want to have to ever re-deploy code to any affiliate, and the best way to do this is to minimize any code that they have to copy/paste onto their sites. I solved this by simply having them paste a single javascript line, like so:
<script src="http://jobs.codebetter.com/feeds/js.ashx?referrer=codebetter&format=leaderboard"
type="text/javascript"></script>
The file, js.ashx renders out javascript that finds the script's place on the page, and renders div elements and associated style information into the page.
Wanna know how I found where on the page to drop the ad? I used the following JavaScript code:
var m = document.getElementsByTagName('script')
var adscript;
for (var i=0; i<m.length; i++) {
if(m[ i].src.match('js.ashx')){
adscript = m[ i]
break
}
}
var addiv = document.createElement('div')
addiv.setAttribute('id', 'addiv')
addiv.className = 'cb_" + format + @"'
adscript.parentNode.appendChild(addiv)
CSS Styled
I wanted to make the ad using divs and CSS so that the affiliate site could override the styles if necessary.. To that end, the javascript adds div elements to the browser's DOM, and writes out the CSS styles inline.
I found this resulted in the fastest, cleanest rendering. I tried linking in stylesheets by adding style elements to the DOM, but that seemed to create a strange flash as the browser applied the styles. When I wrote out the CSS directly using some document.write() calls, it seemed to work fine.
Provide Customization via an Editor
I also wanted to give the affiliate sites an editor to allow them to choose the format of their ads. I was able to do this easily, since the script generated div elements styled using CSS. I simply plopped 6 color chooser controls onto the page, and on postback passed this new color in to the script renderer via the query string. These I place in a separate <style> section allowing the styles to cascade properly.
You can take a look at the tool live here. I used the awesomely easy to use color chooser from Andrew Gretton ASP.NET / C# Color Picker Control
Put this all together and I think we provide a pretty good ad publishing experience for publishers, if I do say so myself.
-Brendan