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.

  1. Place your set of links on the page at load or dynamically using the DOM access methods.
  2. Attach a special color to each visited link in your test set using finely scoped CSS.
  3. Walk the evaluated DOM for each link in your test set, comparing the link's color style against your previously defined value.
  4. Record each link that matches the expected value.
  5. 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.

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


 

Thursday, February 7, 2008 4:43:37 AM (GMT Standard Time, UTC+00:00)
I provided four examples in the blog post with real world implementations: online aggregators, social bookmarking sites, mapping APIs, and OpenID providers. Check out the "Live Demos and Examples" part of the post for more detailed implementations and a link to working code.

Example:
http://www.niallkennedy.com/code/linktest/bookmarks/
Thursday, February 7, 2008 4:45:33 AM (GMT Standard Time, UTC+00:00)
The downside being of course that people are never going to visit services if they're never publicised, and sometimes finding out a favorite blogger uses the quick links, etc, sometimes drives you to check it out, or reminds you to.

Plus some people put no history in their browsers to avoid getting it spammed up, so if they haven't visited that service that day, you've reduced their chances of hitting that icon, even though they do use that service.

To be honest I sometimes look at the icons and things that are on my favorite bloggers just to see what they've included and take that as a sort of recommendation of the service - so again, you lose that recommendation of something you might use, just because I currently don't.

All for a bit of horizontal screen real estate, when the vertical is probably already taken by at least one icon for a service I presumably do use.
Thursday, February 7, 2008 5:30:38 AM (GMT Standard Time, UTC+00:00)
But what if I just cleared my history? Maybe you should just reorder the flair, or hide the others in some way that doesn't prevent reaching them!
Thursday, February 7, 2008 3:22:08 PM (GMT Standard Time, UTC+00:00)
Hmm... So this is basically a way for a website to check what other sites (or pages) exist in your history.

Isn't this something which normally would get labeled as a security vulnerability / private information leak?
I expect any minute now browser developers will hit their heads, and start scrambling for a way to block this. No?
Yaron
Comments are closed.