Life can be easy. With the brand-new jQuery plugin Socialist you’re able to aggregate a plethora of streams stemming from different social networks into one, modern and elegant grid-based layout. If you haven’t been living under a stone lately, you’ll have a strong deja vu looking at Socialist’s default output. Yes, you’re right. It does look like Pinterest. If you’re not into Pinterest though, you can have Socialist display the various streams in plain old-school list view.

Socialist: Just Add Water Streams to an Array, they’ll automagically be beautified

As of the time of writing Socialist aggregates the streams of Facebook, Twitter, LinkedIn, Flickr, YouTube, Tumblr, Pinterest, Craigslist and Google+. But this is only half the truth as Socialist is able to process each and every RSS feed. This way sky is the limit. With Socialist you can have streams displayed separately or in any combination.

You’ll achieve this simply by defining an array of data, that represents the streams to be aggregated. After definition the array is invoked on any div container your site has to offer. Look at this example:

$(‘#mydiv’).socialist({
networks: [
{name:'facebook',id:'in1dotcom'},
{name:'tumblr',id:'in1blog'},
{name:'twitter',id:'in1_'},
{name:'pinterest',id:'potterybarn/Fall-Weddings-by-Pottery-Barn'},
{name:'youtube',id:'potterybarn'},
{name:'googleplus',id:'105588557807820541973/posts'},
{name:'rss',id:' http://feeds.feedburner.com/good/lbvp'}
],
maxResults:4
});

In this case, we would have the streams of Facebook, Tumblr, Twitter, Pinterest, YouTube and Google+ pulled together, accompanied by an RSS feed provided through Feedburner. The array networks, is responsible for the functionality. I believe the code to be more or less self-explanatory, don’t you?

We see one stream per row. Parameter name contains the source of the stream, e.g. Facebook, while id is equipped with the targeted account. Speaking of Facebook we pass the targeted profile, which of course need not be your own. Google+ still forces us to pass the cryptic number combination, they use to identify your account. If you’re pulling in RSS feeds, the id simply carries the feed url. The parameter maxResults lets you limit the number of to be called content items per stream. The above example contains a limitation to four items per stream. The parameter is completely optional and need not be used if you don’t want to limit the input.

A few more parameters exist. These for instance define which parts of the stream content shall be imported. Thus it is possible to have the grid show photos only and abandon all text or the other way round. You can define the size of the tiles or if don’t want any tiles at all. To guarantee for a consistent look you might want to set maximum lengths for headings or texts.

Socialist needs jQuery version 1.6 and up. It integrates the plugins Isotope and Cross Domain Ajax. Both of them need not be called separately. That way the following call is sufficient to set Socialist into effect:

<link href=”jquery.socialist.css” rel=”stylesheet” />
<script src=”jquery.socialist.js”></script>

Socialist is published under the MIT license, which means, it can be used free of charge in private as well as in commercial projects. As it frequently is, again it’s the Isotope plugin which limits Socialist to private use, as Isotope is free only for private and non-profit use. If you want to utilize Socialist in a commercial environment without paying for an Isotope license, you can still do so, but need to relinquish the grid view, as this is achieved by Isotope. The list view is not affected by this limitation.

Related links: