Create A Social Updates Wall In Your WordPress Blog With Socialist jQuery Plugin

Ads by Google

jquery socialize plugin

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


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:

Ads by Google
  • 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. 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:
  6. 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).
  7. 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.


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; and get points in the process.

Ads by Google
Comments (15)
  • Pavel Kucherbaev

    You might also find useful SocialFeed.js

  • Jeff

    So, I really hate to bug you again, but for some reason I am having a similar problem like I did originally with it not filling the whole screen. I didn’t change anything so I’m not sure what happened after it was working. All my content is now in 1 column :(

    Any thoughts?

    • Muo TechGuy

      HEh, different problem now, not the CSS. The console is reporting javascript error in the isotope plugin – thats the one that arranges the tiles all neat in lines, which is why theyre appearing unformatted. Unfortunately, I have no idea what the error means. My suspicions would be that one of your included feeds has perhaps failed to load, and its trying to arrnage boxes that dont exist… try stripping it down to single feed then slowly add more in. If it doesnt work with one you know is fine, then theres something more fundamentally wrong, and the github dev page is probably your best place to get help ;)

  • Jeff

    Awesome that fixed it. No idea why that margin was in my css. Thanks again!

  • Jeff

    Here is a link showing my 2 column issue:

    On a separate note, when I use my actual art feeds, I also have a separate issue of “some” feeds showing as undefined, as Chris previously mentioned. What happens there is the feed tries to link internally, rather than route out to the actual external link. Still trying to figure that out.

    These are the art feeds I am trying to use, and I think only Yahoo shows correct without undefined:

    • Muo TechGuy

      Hi Jeff, you’ve got a 280px margin on your content area, which is restricting the plugin. I’m not sure why it’s there, but look for this line in your style.css: 0 280px 0 20px andmake the 280px into something more sensible (or 0) .

  • Jeff

    I got this working on my wordpress site, but as of now it only shows 2 column, whereas I’d like it to show the full page as it does with the regular non-wordpress install. Any ideas?

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
New comment

Please login to avoid entering captcha

Log In