With so many social media sites in circulation today, badge soup can become a real problem for web sites trying to squeeze the most out of their traffic. Everyone has a different set of core social media sites that they use -- from del.icio.us and Ma.gnolia, to Digg, Reddit, and Diigo, we all have our favorites. But appealing to your users' varied tastes often means an overwhelming sea of site badges that is both unattractive and ineffective. Web developer Aza Raskin has a solution based on a browser history leak introduced due to CSS.]]>
"Not everyone uses Digg. You have to decide on which bookmarking site, if any, to dedicate your precious screen real-estate. It's a hard choice. If you choose poorly your reader won't vote," writes Raskin. "On the other hand, if you take the bird-shot approach, it overloads your reader with branded badge after branded badge. It turns your page into the village bicycle. Not pretty."
As a solution, Raskin devised SocialHistory.js, a handy bit of JavaScript code that detects which social media sites your users frequent. Armed with that information, you can display only the relevant badges to each user.
SocialHistory.js works by exploiting the feature in modern web browsers that automatically uses a different link color for visited links. The JavaScript loads up a bunch of links from a list of top social media sites in an iFrame and looks at which have been visited based on the change in link color. From there, it can assume which you are most likely to use (or in my case, which I may have visited recently while doing research for a story).
Raskin notes that the same browser leak can be exploited using his bit of JavaScript to check out what other sites your users are visiting. You could ask SocialHistory.js to load up a list of competitor's web sites, for example, to see how much of your web site audience overlaps.
There are some drawbacks to the approach. For example, your users need to have JavaScript enabled (95% of people according to W3Schools), and the detection only works for sites that the user has visited recently (dependent on his or her history settings). Nonetheless, it is a clever way to clean up the badge overload on your site and find out a little bit about your visitors' surfing habits.
]]>