Sep 06 2012

jQuery Socialist: One-Stop Shop for Social Media Stream Aggregation

Advertisement

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:

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Unaiz, 07 September 2012

    Nice post…. like it

  • Nahid, 07 September 2012

    I had been thinking about this yesterday when i looked into pinterest and thought what could be made better than this.. Nice idea!

  • Arnold, 07 September 2012

    Thanks for sharing!
    By the way, this is a good idea!

  • Skelly, 07 September 2012

    Thanks for sharing my plugin and the great write-up. I’ll soon be adding Vimeo and integration with the in1 API.

  • graphicmas, 16 September 2012

    Hi, really good plugin
    but when i try to use it, do not work.!!
    i’m try to set in a different mode but i can’t..
    help me i need for my next work!!
    Thanks..

    • Dev, 26 September 2012

      I am having the same issue as graphicmas, cannot get it to work. No errors, but a blank page with all examples. I made sure all dependencies are included.

  • Nilesh, 17 September 2013

    Wow. Thanks for sharing this. I was looking for a facebook and twitter stream jquery script and found this. Now I can use this to show all streams.

search form
 
image description image description