Pinterest Stumbleupon Whatsapp
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

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:

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:
  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 Considering A Personal Domain? Here Are Some Cool Uses For It Considering A Personal Domain? Here Are Some Cool Uses For It Even if you’re not a fan of blogging and don’t have an amazing new website to launch, a personal domain can be an awesome tool to own for fun or self promotion: from a customized... Read More 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.

  1. Pavel Kucherbaev
    January 2, 2015 at 1:38 am

    You might also find useful SocialFeed.js http://pavelk2.github.io/social-feed/

  2. Jeff
    January 16, 2013 at 7:55 pm

    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
      January 17, 2013 at 2:59 pm

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

  3. Jeff
    January 12, 2013 at 1:09 pm

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

  4. Jeff
    January 11, 2013 at 5:37 pm

    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
      January 12, 2013 at 9:31 am

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

  5. Jeff
    January 11, 2013 at 4:55 pm

    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
      January 11, 2013 at 5:29 pm

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

  6. L. Pritchard
    December 10, 2012 at 8:14 pm

    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/

  7. Nikki
    December 10, 2012 at 3:23 pm

    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.

  8. Chris Lacefield
    October 13, 2012 at 3:05 am

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

    • Muo TechGuy
      October 13, 2012 at 7:46 am

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

  9. bonioloff
    September 24, 2012 at 6:35 am

    Great plugin, will implement it to my blog..

  10. Guest
    September 22, 2012 at 5:45 am

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

  11. Sebastian Hadinata
    September 22, 2012 at 2:19 am

    nice plugin there.. Ima bookmark this for future use

Leave a Reply

Your email address will not be published. Required fields are marked *