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:

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:

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

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.

<div id="socialist" style="width:600px;clear:both;"></div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $('#socialist').socialist({
        networks: [
            {name:'pinterest',id:'makeuseof/tech-gadgets'},
            {name:'twitter',id:'thetechnophilia'},
            {name:'youtube',id:'jamesandhui'},
            {name:'rss',id:'http://www.makeuseof.com/tag/author/jbruce/rss'}
           ],
        isotope:true,
        random:true,
        fields:['source','heading','text','date','image','followers','likes']
    });
});
</script>

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.

Continue Reading »

3 Cool Ways To Get Visitors To Interact On Your WordPress Site

User engagement should be a top priority for anyone running a website, blog or any kind of online business. While there is a lot that should be done in terms of encouraging users to share your content on social networks, as well as encouraging them to leave comments, there are a few more unique ideas that can help visitors interact with your site, and in some cases keep them there for a bit longer.

The following options, all compatible with WordPress sites, are easy to install and won’t require any heavy lifting on your part. They are user-friendly and could help jazz up your WordPress website a little bit.

Get Voicemails with SpeakPipe

Rather than just leave you a comment, with SpeakPipe, your visitors can leave you a voicemail which allows for a much more personalized touch. The service couldn’t be easier to use, and is compatible with WordPress, Blogger, Tumblr, Joomla and more.

After signing up for a free account, click on settings to configure how the button will appear on your site. You can decide what comment will greet readers, choose the tab colour and more.

The next step is to click on help to find out how to install the widget on your site, depending on your choice of platform. In the case of WordPress for example, you simply copy and paste the generated code into a regular text widget and it will appear on your site, as a subtle button at the bottom of the page encouraging users to leave you voicemails.

 



Once visitors begin to leave you voicemails, you can check them by logging into your Speakpipe account. You can hold on to messages you don’t want to delete, or you can download them to your computer for safekeeping.

Create A CrowdSourced Flickr Gallery

You can easily place your own Flickr photos on your WordPress site by installing a plugin. You can get creative with the way you use a plugin that allows you to choose a specific tag that will be displayed on your site. Come up with a unique tag and encourage your visitors to tag their photos using that phrase, and they’ll be displayed on your site.

If you already have an active Flickr Group you can display the images using the WordPress plugin Slickr Flickr, but if you want something that’s unique to your site only, you can opt forFlickr Photos. The plugin comes with several different options to suit your needs. You can display photos by tag, by group, decide how many photos to display, what type of photos to display (popular, latest or random) and more.



The settings for Flickr Photo can be found under Appearance > Widgets. Drag the ‘Simple Flickr Photos’ to your sidebar or footer where you want the photos to appear and configure it, and you’re set.

Offer Interactive Games

Another way to keep visitors on your site is to offer them interactive computer games. There are a variety of online games that can be embedded into posts or your website, giving you an easy way to keep users on your site for a longer time.

A good example of this is the WordPress plugin, MyPuzzle Sudoku, which allows you to post several Sudoku games in just one post. After installing and activating the plugin, you can configure it by going to Settings > My Puzzle Sudoku. You can choose the background colour, size, default level, whether or not to show the history or not, and more.



Once you’ve got the game looking exactly the way you want, simply insert the code “[sudoku-mp]” (without quotation marks) into a page or post to display it to your visitors.



Can you think of any cool ways to get visitors to interact with your site? Let us know in the comments.

Continue Reading »

7 Cool Twitter Mashups You Can’t Afford To Miss

 

In a span of one year, I turned from a person who never used Twitter before into a heavy Twitter user and manager. The transition has been enlightening, and I’ve learned to appreciate Twitter more and more in the process. Despite understanding Twitter better than ever before, I must admit that I still find my own personal Twitter account boring sometimes. It’s not so much that the content is boring, but the settings in which I have to read my feed and what I can actually do with Twitter.

As with everything else in the world, I’m apparently not the only one to feel this way, and the Web is overflowing with cool Twitter mashups and apps which make Twitter more interesting and useful, and even nicer to look at. Are you looking for new ways to use Twitter? Better ways to read your stream? Continue reading to find some of the best Twitter mashups out there. I promise you won’t be bored after using these!

todoTweet

There are many ways to get things done, but with most of them, you have to manage a standalone to-do list. todoTweet integrates Twitter with your to-do list, so you can automatically add tasks to your list when you Tweet about them. While it might be just a tad spammy to tweet about every little thing you need to do, it’s great when you want to remember things from Twitter conversations, or when you tend to tweet about things you want to buy/do and places you want to go to.

 

After signing in with your Twitter account, just add the #todo tag to every tweet you want to save to the list, which you can access on todotweet.com. You can add more tags to the tweets to make your list even easier to browse through. You can use todoTweet without tweeting as well, by adding tasks straight from the Web interface.

Tori’s Eye

If you’re just bored of the same old Twitter interface, Tori’s Eye will give you a new look on Twitter. Inspired by papercraft and origami, Tori’s Eye mashes up tweets about your favorite subject with the cute paper birds you can see above. Enter a search query in the box at the bottom, and the paper birds will start carrying in tweets about it. Hove over a bird to read the tweet, and click through to Twitter to find out more.

Tori’s Eye doesn’t really do much, but it sure is pretty to look at. A nice way to relax with some virtual scenery for the real Twitter addicts.

Visible Tweets

Another visual mashup, Visible Tweets lets you view your Twitter feed in a whole new way. Enter a search query in the search box on the top, and watch as relevant tweets start to appear on the screen. You can now switch to full-screen, and enjoy a colorful, animated Twitter experience. There are three types of animation to choose from, and you can click on interesting links or Twitter users to view them on Twitter.

The beautiful and minimalistic design turns reading tweets into a joy. Even more than it is usually.

TweetingEarth

An original way for viewing tweets from around the world, TweetingEarth displays a Twitter search of your choosing on a time-zone map. Search for any keyword or hashtag, and TweetingEarth will display the results on the mini Earth, divided by the world’s different time zones. The app shows you where you are in the greater scheme of time by highlighting your time zone, and shows you how many tweets were made about this subject at any given time.

You can click each wedge to read the tweets more comfortably. In the screenshot above, you can see that the subject of chocolate is very popular in the U.S. time zone. Not very surprising!

The Longest Poem In The World

The Longest Poem In The World is not only the world’s (probably) longest poem, it’s also made entirely out of tweets. The Web app gathers tweets from all over the world, and arranges them in an amusingly rhyming poem. Each line of the poem is one single Twitter update, and each two lines rhyme with each other to create the poem. At this point in time, the poem includes over 1 million verses, and as you browse through them, you’re bound to find some amusing mashups and rhymes. Or in the words of the poem itself: “Raining oh raining…. And I still can’t sleep…; Ha ha Reach out baby, read um and weep”.

If this is not 21st century poetry, I don’t know what is.

Picsho

A wise man once said that one image is better than 140 characters. With images slowly taking over social media, Twitter is not getting left behind, and sharing images on Twitter is a pretty popular habit. A cute service called Picsho integrates with Twitter and TwitPic (and other services such as Instagram, Flickr, etc.) to create sharable “Picshos”, or albums, made entirely out of images people shared on Twitter.

All you have to do is choose a hashtag or a keyword, and Picsho will find relevant images for you. You can them tweak your Picsho by deciding which images you’d like to keep, save it, and share it with friends. Aside from sharing, find random images from Twitter is an interesting social experiment in itself.

TwitterAudit

TwitterAudit is a nice way to find out how many fake followers you have, or to check up on any Twitter user out there. Based on number of tweets, date of last tweet and the ratio of followers to friends, TwitterAudit analyzes all your followers, and comes up with a score for each. The more “real points” a follower gets, the more likely he is to be real. Based on these results, TwitterAudit presents you with three graphs, showing you how your followers fared in its tests. Since tou can enter any Twitter user name to check up on its followers, it’s also a good way to find out if a specific Twitter account is worth following or not.

Continue Reading »