Socialist is an incredible new jQiuery plugin that aggregates your updates on various social networks and displays them beautifully in a grid similar to Pinterest. Check out the screenshot below for an idea of just how gorgeous this is, and read on for how to implement this in WordPress.

Note: Socialist is a jQuery plugin. I’ll be giving full instructions on how to implement this in WordPress, but a working knowledge of jQuery would be helpful to identify typos or errors in your code. Also, this should probably be considered a beta version; some things are broken, formatting isn’t perfect, but it’s still quite useable and impressive

Introduction

Various plugins exist for pulling updates from specific networks or the latest posts from an RSS feed, but none do them all and none are as attractive as this. Here’s what you can expect from around 10 lines of code:

jquery socialist

The plugin is able to access a variety of soical networks as well as just plain RSS, grabbing images as well as content - including:

  • Facebook
  • Twitter
  • LinkedIn
  • Flickr
  • YouTube
  • Pinterest
  • RSS
  • Craigslist
  • Google+

Tumblr support is also listed, but there’s a bug in the code currently preventing it from working; hopefully it’ll be fixed by the time this tutorial is published.

Integrating to WordPress

  1. Load any page on your site, and view the source. Search for the string jQuery; if you have it already, continue to step 2. If not, add jQuery by including the following line in your functions.php: wp_enqueue_script(‘jquery’);
  2. Download the zip file of socialist from github [No Longer Available]. Unzip, and upload the folder to your working theme directory via FTP.
  3. Rename the folder to “socialist”
  4. In header.php , add the following two lines somewhere below the wp_head function but before the end tag: 

<script type="text/javascript" src="<?php echo get_template_directory_uri().'/socialist/jquery.socialist.js';?>">

  1. Create a new page where you want the socialist block to appear; I’m assuming you want this on a separate page, but you could equally add the code to your index template somewhere. If you’re going for a separate page, duplicate your existing page template and call it “page-slug.php” where slug is the permalink that WordPress gave your new page (that is, the title, with dashes for spaces and common words removed).
  2. Edit the page to strip out WordPress loop content; we want a basic layout with meta info and such.

Adding Socialist Code

Open the special page template you created earlier and paste in the following code to the main content area. Change the style of the socialist DIV to suit your theme; I found not specifying width broke the layout, but that may have been particular to my theme. The code below is preprogrammed to some of my own social update sources; of course, you'll want to change the various IDs to your own. For the exact format or any additional parameters, see the readme file. In general, all you need is the id parameter. Start with one and work up, as an incorrect ID will cause the plugin to break.

Summary

It could do with some more customization in terms of box size or layout, and being more robust; but it's still early days and what we have already is really impressive I think. In fact, this would be a perfect to put on the front page of your personal domain which we discussed last week.

If you're having problems or need a hand putting this into WordPress, feel free to ask in the comments below, but do include a test URL I can look at and examine any code errors. For bugs in the actual plugin itself, please post a new issue over at GitHub. Think someone else could MakeUseOf this awesome jQuery socialize plugin? Then share using the buttons below to tell the world.