Social Relevance is a bookmarking app that shows social bookmarking sites relevant to the current user of your site. This allows users to easily share your content socially the way they choose.

This app works by using an information leak exposed by CSS and initially introduced for use in this manner by Aza Raskin. It uses the visited link option to identify links your users have visited, then shows them options based on those links. If your users visit Digg, it gives them the option to Digg your page.

This app is based on the concept and code initially introduced in Aza’s post How to Detect the Social Sites Your Visitors Use. Without his work and base code this could have never been completed.

What does it look like?

The plugin by default displays 6 social bookmarking sites. It displays all sites found in the users history (even if there are more than 6) and fills the remainder with defaults. If the user does not have any social bookmarking sites in their history it will display 6 popular defaults. You can change the default settings by editing the variables in the javascript file.

what sites are checked?

New in 1.01

Moo this!

Originals from 1.0

Share on Facebook

Twitter

Digg this

Del.icio.us

Share on MySpace!

Reddit

Stumble it!

Buzz Up!

Technorati

Newsvine

Slashdot

Ma.gnolia

Add Blink

Furl

Blogmarks

Fave it!

Simpy

Kirtsy

Fark

Mixx

Google Bookmarks

Subbmitt

Blog This

Windows Live

Prop It

Diigo

Netvouz

Folkd

FriendFeed

LinkedIn

Current

Mister Wong

Menéame

Oknotizie

Fresqui

FunP

Care2

Sphinn

N4G

Plus It!

How do I use it?

Using the plugin is easy. Just insert the supplied javascript into the footer of your page:

<script type="text/javascript" src="/js/socialRelevance-1.01.min.js"></script>

Then add the an element with the Social Relevance ID value wherever you would like the bookmarklets to show up. (it does not have to be a div, it could be a paragraph tag or a span tag, whatever you like)

<div id="srSocialRelevance"></div>

Finally style it the way you like. Here is some example styling that is included with the download to get you started.

.srLink {
	float:left;
	width:150px;
	height:16px;
	padding:10px 10px 0 0;
}

.srLink a {
	display:block;
}

.srLink img {
	float:left;
	padding: 0 5px 2px 2px;
}

Download

Social Relevance 1.01 (64kb) (added functionality for Design Moo)
Social Relevance 1.0 (64kb)

Tags: Bookmarking, Content, Javascript, Share, Social, Widget

Share this page

About the author: Cole Thorsen

Cole is a web/multimedia/graphic designer, photographer, working across a broad spectrum of media. You can follow him on Twitter or read more of his articles