Social Everywhere

Joseph Russo  November 4 2010 10:45:10 PM

Social Everywhere

One of the key design points of social software revolves around this design “anchor”...and that is, social, in general is itself NOT a destination. It's in the very fabric of the things we do, the destinations we go, the tools we use.

A concrete, if “old fashioned” example of this (and I know you'll cringe with the technology choice here, but bear with me) is the simple web site action “Email this”. You go to your favorite news website, read a story and it's there, “Email this” or “Email this to a friend”...you go to a cooking website, read a recipe and there it is...and so on. Simple. You are in some destination and with one simple gesture, you have this touch point into your social world. The web site you're on doesn't need to know one damn thing about you, and it can give you this simple gesture which ties their content into your social network.

Of course, there are more “state of the art” things on these websites too, like “Digg this”, “Tweet”, not to mention letting you Recommend on Facebook and more...really useful, really easy.

Of course, there are lots of other patterns too, but rather than turn this blog into an inventory of the various adopted social software patterns out there, I want to bring our focus to Connections and it's Social Everywhere patterns.

The Business Card.

If you've used Connections you've seen it. On every page wherever a person's name appears in Connections, you can mouse over that name, and you'll see a tool tip - “Click here to view business card”. You click it and voila, you see a business card for that person, like this;

               

Contact information, photo (ain't he handsome?), and then the social threads for this person...

And here's the cool thing you may or may not know about this nifty little card...if you have connections you can very easily incorporate the business card into any html page you've got.

How so?

Pretty easy as it turns out...first, in your html page, you add a javascript include,






this includes a piece of connections intelligence, and of course, you should point your version of this tag to your own connections server domain. Now, this javascript will, when your page loads, process the DOM (javascript geeks can you help you out here) and it looks for a “microformat” called “vcard”. Here's an example;



Here we have a div of class vcard, the microformat the semanticTagService.js  is looking for, and when it finds it, it looks for the identifier, in this example, we are using the email address, called out by the span of class “email”. This is what ties the name to the unique information so that the business card for this person is invoked from the Connections Profiles server.

That's it. Two simple things that you add to people's names on any web page and you have added the Connections Business card to your web page. Social Everywhere now touching your web page from your Connections deployment. Cool, huh?

So two things here – first, I want to hear ideas about other ways we should start thinking about this, out of the box kinds of things...and second, no worries, I plan on writing a series of blog entries to show you more and yes, there are a bunch more ways Connections provides Social Everywhere functionality.

And remember, this is really how social software works best, not as a place you go so much as the glue or fabric of the universe you live in. Stay tuned, I will follow on with more examples like this in upcoming blog entries AND I'll also start talking about new ideas we'll bring to this core concept of social software.
 

• Comments [0]