Niall Kennedy has a blog post entitled Sniff browser history for improved user experience where he describes a common-sense technique to test URLs against a Web browser’s visited page history. He writes
I first blogged about this technique almost two years ago but I will now provide even more details and example implementations....A web browser such as Firefox or Internet Explorer will load the current user's browser history into memory and compare each link (anchor) on the page against the user's previous history. Previously visited links receive a special CSS pseudo-class distinction of :visited and may receive special styling....Any website can test a known set of links against the current visitor's browser history using standard JavaScript. Place your set of links on the page at load or dynamically using the DOM access methods. Attach a special color to each visited link in your test set using finely scoped CSS. Walk the evaluated DOM for each link in your test set, comparing the link's color style against your previously defined value. Record each link that matches the expected value. Customize content based on this new information (optional). Each link needs to be explicitly specified and evaluated. The standard rules of URL structure still apply, which means we are evaluating a distinct combination of scheme, host, and path. We do not have access to wildcard or regex definitions of a linked resource.
I first blogged about this technique almost two years ago but I will now provide even more details and example implementations....A web browser such as Firefox or Internet Explorer will load the current user's browser history into memory and compare each link (anchor) on the page against the user's previous history. Previously visited links receive a special CSS pseudo-class distinction of :visited and may receive special styling....Any website can test a known set of links against the current visitor's browser history using standard JavaScript.
anchor
:visited
color
style
Each link needs to be explicitly specified and evaluated. The standard rules of URL structure still apply, which means we are evaluating a distinct combination of scheme, host, and path. We do not have access to wildcard or regex definitions of a linked resource.
scheme
host
path
Niall goes on to describe the common ways one can improve the user experience on a site using this technique. I’ve been considering using this approach to reduce the excess blog flair on my weblog. It doesn’t make much sense to show people a “submit to reddit” button if they don’t use reddit. The approach suggested in Niall’s article makes it possible for me to detect what sites a user visits and then only display relevant flair on my blog posts. Unfortunately neither of Niall’s posts on the topic provide example code which is why I’m posting this follow up to Niall’s post. Below is an HTML page that uses Javascript function to return which social bookmarking sites a viewer of a Web page actually uses based on their browser history.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>What Social Bookmarking Sites Do You Use?</title> <script type="text/javascript"> var bookmarking_sites = new Array("http://programming.reddit.com", "http://www.dzone.com", "http://www.digg.com", "http://del.icio.us", "http://www.stumbleupon.com", "http://ma.gnolia.com", "http://www.dotnetkicks.com/", "http://slashdot.org") function DetectSites() { var testelem = document.getElementById("linktest"); var visited_sites = document.getElementById("visited_sites"); var linkColor; var isVisited = false; for (var i = 0; i < bookmarking_sites.length; i++) { var url2test = document.createElement("a"); url2test.href = bookmarking_sites[i]; url2test.innerHTML = "I'm invisible, you can't click me"; testelem.appendChild(url2test); if(document.defaultView){ //Mozilla linkColor = document.defaultView.getComputedStyle(url2test,null).getPropertyValue("color"); if(linkColor == "rgb(100, 149, 237)"){ isVisited = true; } }else if(url2test.currentStyle){ //IE if(url2test.currentStyle.color == "cornflowerblue"){ isVisited = true; } } if (isVisited) { visited_sites.innerHTML = visited_sites.innerHTML + "<a href='" + url2test.href + "'>" + url2test.href + "</a><br>" } testelem.removeChild(url2test); isVisited = false; } } </script> <style type="text/css"> p#linktest a:visited { color: CornflowerBlue } </style> </head> <body onload="DetectSites()"> <b>Social Bookmarking Sites You've Visited</b> <p id="linktest" style="visibility:hidden" /> <p id="visited_sites" /> </body> </html>
Of course, after writing the aforementioned code it occured to me run a Web search and I found that there are bits of code for doing this all over the Web in places like Jermiah Grossman’s blog (Firefox only) and GNUCITIZEN.
At least now I have it in a handy format; cut, paste and go.
Now all I need is some free time which in which to tweak my weblogt to start using the above function instead of showing people links to services they don’t use.
Now playing: Disturbed - Numb