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

featured socialist   Create A Social Updates Wall In Your WordPress Blog With Socialist jQuery 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

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:

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

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. 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:
  5. 
    
    
  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).slug   Create A Social Updates Wall In Your WordPress Blog With Socialist jQuery Plugin
  7. Edit the page to strip out WordPress loop content; we want a basic layout with meta info and such.

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

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.

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

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

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

14 Comments -

Sebastian Hadinata

nice plugin there.. Ima bookmark this for future use

Guest

Seems like a great plugin, as Pinterest is still pretty popular and seems to get more so each day, even though it may be past the initial rush of curiosity that comes with that “new site smell.”

However, being that I’m a “real American” who doesn’t like redistribution policies and eschews Marxism, I just don’t like the name. Probably not coded in the U.S. of A., that’s my guess. Although I’m thinking maybe a website plugin called Socialist might show up here: barackobama.com ;-)

bonioloff

Great plugin, will implement it to my blog..

Chris Lacefield

Does anyone know why some of the RSS return an undefined link?

Muo TechGuy

Best if you post an issue on the Github page for the developer to see.

Nikki

Say there is only a status update (text only) without an image, will it show up? Or, must there always be an image associated with the post? I have not used the plug-in, so I do not have an example, but of all the examples I have seen, there is not one that shows a text only update in this manner.

L. Pritchard

There is a wordpress plugin, which will create a more advanced social stream wall and covers a lot more networks and feed options:

http://www.designchemical.com/blog/index.php/premium-wordpress-plugins/wordpress-social-stream-plugin/

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?

Muo TechGuy

Share the URL, I’ll see if I can identify the problem.

Jeff

Here is a link showing my 2 column issue: http://artsyfartsypodcast.com/socialist-2/

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:
http://news.yahoo.com/rss/arts
http://feeds.feedburner.com/ArtNews-Theartwolfcomformat=xml
http://www.theartnewspaper.com/rss/rss.xml
http://www.artnews.com/feed/
http://rss.artinfo.com/artinfo-all?format=xml

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

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

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?

http://artsyfartsypodcast.com/art_news_feeds/

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 ;)