It’s a relatively simple process to add some flair to your blog comments these days. I want to look at 6 of the best free tools and give you a quick overview of the benefits of each.

Let’s start with one you’ve likely heard of before…

Disqus

Disqus uses JavaScript to replace your WordPress comments with their own system. You lose the total design flexibility that vanilla WordPress comments offer, but you gain a large feature set, including:

• Real-time Comments – New comments appear on the page without needing to refresh. Not a major benefit for smaller sites, but very good if your posts tend to get a flurry of comments in the first few hours of publishing.
• Social Media Integration – Users can comment via Facebook or Twitter, and share to those sites as well if they choose.
• Global Profiles – A user’s Disqus profile shows their comments across all Disqus sites. The idea is that a Disqus user will be more likely to comment on a Disqus blog because of this, and it makes for a fast way to find out more about a commenter.
• Plenty of other features, like inline comment replies or “subscribe to updates.”

Another good thing to bear in mind with Disqus is that they are very active. Disqus has been around for several years now, and it still innovates and updates regularly. They even have a mystery Disqus 2012 project to be released soon.

And incase you’re wondering, your comments can all be imported to Disqus, and exported back to WordPress if you choose to leave Disqus. You won’t be hostage to their system.

WordPress Install Instructions for Disqus

Livefyre

Livefyre is very similar to Disqus, and as far as I can tell, they offer almost exactly the same feature set. Real-time comments, social media, user profiles, subscription etc. are all included as standard.

Livefyre is a newer contender in this market though, but personally I think they have an edge over Disqus in 2 ways:

• Simpler Installation – Disqus isn’t hard to install, but it does have JavaScript issues often enough (For anyone who has ever used it, hands up if your comment counts vanished?). I haven’t used Livefyre on as many sites yet, but it hasn’t given me any hassle.
• Sleeker Design – This is just a matter of taste, but I like the softer design of Livefyre’s comments more. It’s not a big difference, but every little helps, and even their website has a better design.

WordPress Install Instructions for Livefyre

IntenseDebate

IntenseDebate is similar again to the 2 above (The last tool in this style, I promise!). The reason I mention it is because it has one very big draw for WordPress users; it’s owned by Automattic, the creators of WordPress.

The feature-set is generally quite similar to the others (Though real-time commenting is noticeably absent), and their design is very similar as well.

Whilst there is nothing that I can say is “wrong” with IntenseDebate, it’s hard to recommend them overly either. Their site and script don’t feel as sleek as Livefyre, and their community no longer seems as vibrant as Disqus’.

Oh, and the bright green “180p” badges look awful… (Look down the sidebar of their blog to see what I mean).

Begin IntenseDebate Install Process

Facebook Comments

The Facebook Comments script is exactly what you would expect; it replaces your own comments with a Facebook wall. Users must be signed in to their Facebook accounts, and then what they see is identical to Facebook.com.

There are two big advantages to this approach:

• Publicity – Users are commenting with their Facebook profiles, so with a little luck, their friends will see the comment and look at your article as well.
• Anti-spam – Every commenter must use their Facebook account, so spammers have a much harder time bulk-spamming blogs.

The strongest feature is also the strongest drawback. Some people (like me) keep their accounts completely separate to their work or online profiles, and so, you will miss out on those people’s contributions.

There is a plugin for adding these comments to WordPress, but it seems to be broken with WordPress 3.3. For a developer though, the installation is similar to any other Facebook script. You can get the code here.

(If you have trouble with the install or can’t find a reliable guide online, let me know and I’ll put together a walkthrough).

Jetpack

Jetpack is essentially a set of WordPress plugins, which is a topic I’m about to cover in the final section. What sets Jetpack apart is its ease of use. You install one package, and cherry pick the features for you want.

In the case of commenting, that means 3 things:

• Subscriptions – Users can be emailed when follow-up comments are left after their reply. This is a great way to keep conversations going.
• Gravatar Hovercards – When you mouse over a commenter’s name, this will pull up a little bubble with their image and a quick bio with a link to their full profile on Gravatar.
• Sharing – Jetpack makes it easy to add social media sharing links anywhere on your page, including around the comments area.

Install Guide for WordPress Jetpack

Other WordPress Plugins

There are hundreds out there, but I want to focus on just 4 of them:

• AJAX Edit Comments - This allows users to edit their comments for up to 15 minutes after submitting them. It is a good way to enable users to fix typos, and avoid “double-posting” if they want to add another line. It is particularly popular on coding blogs, where awesome commenters might contribute code snippets of their own but find they get messed up when displayed.
• CommentLuv – CommentLuv gets the latest blog post from a commenter’s RSS feed, and automatically adds a link to it after their comment. This is a great way to thank visitors for taking the time to post a comment.
• GD Star Rating – Not the simplest of plugins to configure, but GD Star Rating has a wealth of options that can enable star ratings (Or thumbs) on WordPress comments (And posts).
• WordPress reCAPTCHA - Spam can be a nightmare on WordPress blogs, but this plugin makes it simple to add Google’s captcha (“Type the letters…”) tool to your blog.

Which Do You Use?

I’ve always used regular WordPress comments with some plugins here on Pro Blog Design, because I like the flexibility of creating your own comments design. The topic of this blog is another reason; it’s good for us to show something unique.

More and more though, I’m working with clients who are choosing the scripts above (Particularly Disqus and Livefyre). These scripts are very impressive, and can even be a good way to speed up the development time of a new site.

I think the Facebook widget is only a great bet if you specifically try to encourage users to interact with you via Facebook (e.g. your site takes signups via Facebook Connect, or you need as much social sharing of your app as possible etc.).

I’d love to hear what approach you’ve taken on your site, and why you went down that road!

Around this time last year, I showed you how to embed tweets in WordPress using the Twitter API.

Today, I want to improve on that script by adding a backup to it. Twitter is often down or unresponsive, and when it is, the previous script fails and displays nothing.

With a backup, we store an extra copy of each set of tweets that we find. When Twitter is down, we can then use this backup to display tweets as normal.

WordPress “Transients” vs “Options”

We will use both of these, so it’s best to explain quickly what they are. An “option” is a value that is stored permanently in your database. There is an option for your site title, the slogan etc.

A transient is very similar to an option, but it also has an expiry time. After this time, the transient is deleted. For more information, read using the Transients API.

The transient is perfect for caching tweets. We can store the results from Twitter, and when the transient expires, fetch new ones.

The option however is perfect for the backup, because we never want it to expire (We will just write over it each time we update it).

The Code

The majority of this code is from the previous article. For that reason, I will only explain the new additions. To understand how we process each tweet and display it, check out the original post.

And if you’d rather just skip on, you can grab the fully completed code here.

Find where in your theme you would like the tweets to appear (e.g. sidebar.php), and paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
/*
 * JSON list of tweets using:
 *         http://dev.twitter.com/doc/get/statuses/user_timeline
 * Cached using WP transient API.
 *        http://www.problogdesign.com/wordpress/add-a-backup-to-embedded-tweets-in-wordpress/
 */
 
// Configuration.
$numTweets = 3;
$name = 'problogdesign';
$cacheTime = 5; // Time in minutes between updates.
$exclude_replies = false; // Leave out @replies?
 
$transName = 'list-tweets'; // Name of value in database.
$backupName = $transName . '-backup'; // Name of backup value in database.

These are your configuration options. How many tweets do you want to display? From which user? And how often should we fetch new updates? (It’s fine to go to 1 minute even, but it means one of your users will have a slow page load every minute, rather than one every 5 minutes).

The only change from before is that I’ve added the option to exclude @replies from your results, and we now have 2 names for values in the database. Let’s carry on.

The next section of code is the bulk of the script. Essentially, it fetches the data from Twitter’s API, picks out the parts we want, formats them, and saves them as an array called $tweets. The original post explains it all one step at a time.

You can also read about this specific Twitter API call here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// Do we already have saved tweet data? If not, lets get it.
if(false === ($tweets = get_transient($transName) ) ) :    
 
    // Get the tweets from Twitter.
    $response = wp_remote_get("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=$name&count=$numTweets&exclude_replies=$exclude_replies");
 
    // If we didn't find tweets, use the previously stored values.
    if( !is_wp_error($response) && $response['response']['code'] == 200) :
        // Get tweets into an array.
        $tweets_json = json_decode($response['body'], true);
 
        // Now update the array to store just what we need.
        // (Done here instead of PHP doing this for every page load)
        foreach ($tweets_json as $tweet) :
            // Core info.
            $name = $tweet['user']['name'];
            $permalink = 'http://twitter.com/#!/'. $name .'/status/'. $tweet['id_str'];
 
            /* Alternative image sizes method: http://dev.twitter.com/doc/get/users/profile_image/:screen_name */
            $image = $tweet['user']['profile_image_url'];
 
            // Message. Convert links to real links.
            $pattern = '/http:(\S)+/';
            $replace = '<a href="${0}" target="_blank" rel="nofollow">${0}</a>';
            $text = preg_replace($pattern, $replace, $tweet['text']);
 
            // Need to get time in Unix format.
            $time = $tweet['created_at'];
            $time = date_parse($time);
            $uTime = mktime($time['hour'], $time['minute'], $time['second'], $time['month'], $time['day'], $time['year']);
 
            // Now make the new array.
            $tweets[] = array(
                            'text' => $text,
                            'name' => $name,
                            'permalink' => $permalink,
                            'image' => $image,
                            'time' => $uTime
                            );
        endforeach;
 
        // Save our new transient, and update the backup.
        set_transient($transName, $tweets, 60 * $cacheTime);
        update_option($backupName, $tweets);

The change to notice comes on line 8. Here, we check if an error occurred or Twitter failed to give us back our tweets. We check the latter by looking at the HTTP status code returned. You can read more about how Twitter uses status codes here, but the short of it is that anything other than 200 means something went wrong.

We only process the page returned if it passes these two checks.

The other change is on the very last line, where we save the transient as normal, but also save the permanent “option”. This updates our backup with the most recent set of results.

Moving on, all we need to do if the fetch fails is populate the $tweets array with the value from our permanent backup.

1
2
3

    else : // i.e. Fetching new tweets failed.
    	$tweets = get_option($backupName); // False if there has never been data saved.
	endif;

Now we can display the tweets as before. To check that we do have tweets to display, we check if $tweets is false (If a backup has never been made, get_option() will have returned false to it).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Now display the tweets, if we can.
if($tweets) : ?>
    <ul id="tweets">
    <?php foreach($tweets as $t) : ?>
        <li>
            <img src="<?php echo $t['image']; ?>" width="48" height="48" alt="" />                
            <div class="tweet-inner">
                <p>
                     <?php echo $t['name'] . ': '. $t['text']; ?>
                     <span class="tweet-time"><?php echo human_time_diff($t['time'], current_time('timestamp')); ?> ago</span>
                </p>
            </div><!-- /tweet-inner -->
        </li>
    <?php endforeach; ?>
	</ul>
	<p><a href="http://twitter.com/#!/<?php echo $name; ?>">[ Follow us on Twitter ]</a></p>
 
<?php else : ?>
	<p>No tweets found.</p>
<?php endif; ?>

At the end, I’ve added a simple error message, rather than displaying nothing. This will only appear if fetching tweets fails, and a backup has never been made.

And that’s it done. If you used the previous script, this can be slotted in over it and all you need to do is update your details in the configuration section at the top. Now your tweet list should be that bit more reliable.

The full code can be found here.

As 2012 begins, I want to look back over the past year to see what can be learnt from it. Learning from your mistakes is less glamorous than a list of grand New Year’s Resolutions (Though I do like those too), but often more effective at ensuring the next year is even better than the last.

With that in mind, what follows are some of the lessons I have picked out from my own 2011. I would love to hear if these resonate with you.

When looking back at your own year, I’d encourage you not to look for when things went “wrong” as such, but simply to think of how things may have gone differently. That’s what I’ve done. If I were to go back, I may well do some of these things the same, but considering the alternatives is a great way to learn.

Plan For the Follow-Through

When working on a large project, launch day is the natural target. All of your work is dedicated to releasing the product.

That is obviously crucial, but equally important is planning in advance to build on the momentum from your big release. That could mean anything from analyzing its success, planning the next release, or simply capitalizing on the good PR.

I learned this lesson from the relaunch of this site in May. We had been working on it on and off for almost a year, so it had been a huge project, but in the push to launch, we built up a backlog of other work.

I worked on this and wrote a number of articles following the launch, but not enough. The backlog took priority because as far as schedules were concerned, the relaunch project was complete. The follow-through should have been a clearly defined of the project.

Short-Term is More Tempting than Long-Term

How many times have you heard a freelancer say they can’t find the time to work on their site or a personal project? Even though they really enjoy it?

All freelancers hit this issue, and I was no different. I think the reason for this is extremely simple; short term benefits have a clearer and more obvious benefit than long term ones. In my case, PliablePress has been hurt by this. Improving the framework brings me incremental benefits over time, but taking on a large client project pays off right away.

The trick here I believe is a balancing act. If you spend all of your time on short-term goals, you’ll never get past where you are right now. But similarly, if you only work on long-term plans, you may not survive that long. Don’t let one overcrowd the other.

Focus Beats Multitasking

This is a common enough productivity tip that you have likely heard before. Only work on one thing at a time. It makes sense, and it will come as no surprise to you that closing down Twitter and Skype etc. will help you work better.

The bigger lesson is to organize yourself each day so you know which projects you will be working on. You don’t need a step-by-step breakdown of the tasks (Though some people swear by that), a simple list of the top x projects that need your attention today will do.

This is something I see in my work again and again. The days in which I have a clear list of projects to work on, and I tackle them one by one, are my most productive days. Sometimes you can even spend a whole day on just one project, which is fantastic. Focus only on the next task, not all of the tasks.

Sidenote – When making your list, try to avoid adding any murky tasks that don’t have clear completion objectives, e.g. research can go on indefinitely so before you start, make sure you’re aware of how you will know when you’re done.

New Does Not Necessarily Equal Worthwhile

In the tech world, we all love the speed at which things change. The impulse is to try as many new products and services as we can, because who knows what the next game changer will be?

And therein lies the problem. It could be anything, and there are new things coming at you every day. You can’t try them all, and the attempt is a waste of your time. I think a better approach is to let the community try them out for you, and join in when a winner seems to be emerging.

A good example of this is social networks. There are a million different variations out there and new ones all the time. Most won’t catch on, and the time put into them is lost to you. I joined Quora after consistently reading good responses on it for months, but I’m not on Pinterest, Path or any of the other current “hot” networks yet. I’ll check back again in a few months.

The exception is tools that really add value to your business (Webapps you use, development software etc.). Again, I wouldn’t try every single one as it comes out, but every few months, take a look around. It’s fun too, playing with new toys is hard to count as work!

Join The Communities You Value

The web is full of little communities, and you could take part in them from morning to night. On a productivity note, you might try to cut down on this when you have deadlines to meet.

It’s possible to go too far with this though. Once you’ve read a lot on a particular site, and especially after you’ve started enjoying the comment discussions, you can get a lot more out of taking part as well.

I used to post thousands of comments in forums when I was younger, and then again on blogs as I started Pro Blog Design. That’s been somewhat lessened in 2011, so I’m looking forward to starting again. In particular, I’ve massively enjoyed reading Hacker News and Stack Overflow, so it’s about time I joined up.

Planning is Both Impossible and Essential

A slight paradox, but it’s true. It’s impossible to plan for everything that may happen, even over just a short period of time. But with no plan, things inevitably fall into chaos.

I like to think I’m quite organized, and I always have a good idea of how the next 3-4 weeks will flow. I don’t think any of my “ideas” have ever gone 100% to plan though.

Things change. Something will crash, a client will take longer with their feedback, an awesome new project will come up etc.

You need to plan enough to help things run smoothly, but be flexible enough to cope with the inevitable curve balls that come at you. I’m still not sure of the exact formula for this, but it seems that the more experience you have of it, the better your plans and estimates become.

Fight to Work On What You Love

When you run a small business, you’re responsible for everything. I have the pleasure of working with a number of other people throughout the year here, but no matter what, the final responsibility is still mine.

In practice, what this means is that the tasks you can’t easily find someone else to take care of, you do yourself.

That’s fine in the short term, and often even beneficial (Knowing you have to submit your accounts yourself keeps your finances very organized throughout the year!), but it isn’t a long term solution.

You didn’t start a business to work on things you don’t enjoy. There will always be some jobs you just have to do, but when the ones you don’t enjoy are the majority, you need to fix it.

I’m quite happy with where I am in regards to this now; the trick for me was angling towards certain types of projects. Great clients with interesting projects means that more or less everything is fun!

The Truest Test of a Business is When You Leave It

Again, this is something you’ve likely read before, and it’s spot on. In September, I was away for around 3 weeks, and it likely affected every part of the business.

I planned in advance as much as I could, but every change has a knock-on effect. By prioritizing the projects that could most likely be finished before I left, I was leaving others to be done largely after I returned. I was also lining up new projects to be worked on while I was away, but I was still needed at various points to give my thoughts.

In other words, the month before and the month after the trip were crazy. There is no easy fix to this, but removing the dependency on you is definitely a big area to work on if you want your business to grow.

Conclusion

Those were the biggest new “lessons” I would take from my 2011. I’ve deliberately chosen from when things could have gone better, not from when they went great. I’d be happy to share those as well if you like, but learning from mistakes is often the more revealing analysis so they weren’t included here.

In return, I’d love to hear about your year. What have you learnt from it and what will you do differently this year?

Before I finish, I want to apologize for how quiet the past months have been. They’ve been some of the busiest months I’ve ever had, but I’ve missed blogging greatly. January will be a quiet month as well, sorry, but after the 29th, I will be back with a vengeance. I’ve learnt a lot, so there’s a lot I want to share!

If you reached this far in the post, thank you for still being a reader after all this time.

Happy New Year everyone!

Main photo by razvan.caliman.

Recently, one of our clients needed to let visitors create WordPress posts (Or custom post types of course) from the website itself.

In this post, I’m going to walk through some of the WordPress functions I used to achieve this. We’ll go over creating the post itself, adding categories/tags, and adding metadata.

(We’ll skip the stage where you build a form, validate what users enter etc. and just focus on the WordPress functions instead)

Create the Post

The method to create the core post is simple. Essentially, you build a $post object, and then insert it with wp_insert_post().

You can use our $post reference to speed this up. Let’s take a look at some examples:

1
2
3
4
5
6

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.'
);
 
$post_id = wp_insert_post($new_post);

That would create a new post, with the title “Our New Post”, and the filler text we’ve entered.

If wp_insert_post() is successful, it returns the ID of the new post it has created (Which we assign to $post_id here). If it fails, it will return 0.

By default, the status is set to “Draft”, so let’s tweak it to publish the post instantly:

1
2
3
4
5
6
7

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish'
);
 
$post_id = wp_insert_post($new_post);

You can set just about any value from the $post variable, e.g.

1
2
3
4
5
6
7
8
9
10

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'post_type' => 'page',
	'post_author' => 2,
	'post_date' => '2011-09-01 15:10:30'
);
 
$post_id = wp_insert_post($new_post);

Our post is now a page, written by user #2, and scheduled to be published on the 1st of September.

Categories, Tags and Custom Taxonomies

Let’s move on to categories and tags. You can either set these as you make the rest of the post, or add them separately later. Let’s start by seeing how it is done in wp_insert_post().

For categories, you pass in an array containing the IDs of the categories you want to add, e.g. for categories 9 and 29:

1
2
3
4
5
6
7
8

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'post_category' => array(9, 29)
);
 
$post_id = wp_insert_post($new_post);

Tags are a little easier. Instead of passing in the IDs, you can use the names of the tags themselves, e.g.

1
2
3
4
5
6
7
8

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'tags_input' => array('tag1', 'Filler Tag')	
);
 
$post_id = wp_insert_post($new_post);

You can even set the terms of a custom taxonomy. This uses the “tax_input” parameter and expect you to give it an array where each key is a custom taxonomy, and each value is an array of tags in that taxonomy.

Update (8 Aug 2011): Rarst has left a comment saying that “tax_input” will only work if initiated by a logged in user with the permission to edit that taxonomy. If this affects you, read on below for a different solution that will work anywhere!

For example, let’s say we have a taxonomy called “custom_tax”, and the two tags we want to add to the post are “Dolor” and “Ipsum”.

1
2
3
4
5
6
7
8
9
10

$new_post = array(
	'post_title' => 'Our New Post',
	'post_content' => 'Our filler text for the post.',
	'post_status' => 'publish',
	'tax_input' => array(
		'custom_tax' => array('Dolor', 'Ipsum')
	)	
);
 
$post_id = wp_insert_post($new_post);

I mentioned that you could also add your tags later on. To do that, use the wp_set_object_terms() function (There are similar functions to this one, specifically for tags etc. but this covers it all for you).

The format is: wp_set_object_terms( post ID , array of tag IDs , taxonomy , append true/false ).

The last value is important. If you set true, then your new tags will be added to any existing ones. If you set false, then any existing tags will be replaced with your new ones.

Here are some examples of adding categories, tags, and a custom taxonomy this way:

1
2
3

wp_set_object_terms( $post_id, array(27, 28, 29), 'category', true);
wp_set_object_terms( $post_id, array('Example', 'Lorem Ipsum'), 'post_tag', true);
wp_set_object_terms( $post_id, array('Lorem', 'Sit'), 'custom_tax', true);

Metadata

If you’ve ever added custom meta data to a post before, you know what to do already.

Let’s say we want to add a custom field with the name “summary” and the value “Quick Summary!”:

1

add_post_meta( $post_id, 'summary', 'Quick summary!', true);

That’s quite self-explanatory. The ‘true’ at the end refers to whether this field is unique or not. If we set this to false, and a summary already exists, then another custom field also titled ‘summary’ would be added to the post.

By setting it to true, this won’t happen. WordPress checks for the ‘summary’ field first, and if it exists, it does nothing (You would then need to use update_post_meta() instead).

One special note to make is that if you want to set a page template, you do this with the meta functions as well. WordPress stores the name of the template file to use in a custom field titled ‘_wp_page_template’

1

update_post_meta( $post_id, '_wp_page_template',  'onecolumn-page.php');

Between those functions, you should be able to set up any post data you need. Feel free to post in the comments if you have any questions, or I’d love to hear how you’ve allowed users to add content to a WordPress site!

This is one of the most common questions I get asked; how do you make a floating box with share links?

Today, we’re going to see just how simple it can be. We will:

• Set up the current trinity of search (Facebook, Twitter, +1).
• See how to make sure they share the right URL.
• Align the box to the bottom left of the user’s browser.
• Hide the box if the user’s browser is too small (So it never overlaps our content).

You can see the demo site here (Try resizing your browser smaller).

1 – The URL and Text to Share

The first step involves a little WordPress code. In footer.php in your theme, scroll down to the tag, and just before it, paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
// URL to share
if( is_singular() ) {
	$url = get_permalink();
	$text = the_title('', '', false);
} else if ( is_category() || is_tag() ) {
	if(is_category() ) {
		$cat = get_query_var('cat');
		$url = get_category_link($cat);
	} else {
		$tag = get_query_var('tag_id');
		$url = get_tag_link($tag);
	}
	$text = single_cat_title('', false) . ' on ' . get_bloginfo('name');
} else {
	$url = get_bloginfo('url');
	$text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}	
?>

The point of this code is to work out the right URL and title text to share, and save them in 2 PHP variables ($url and $text).

The way it works is to run through a “what page are we on?” check:

• Single Post/Page – Then use the post’s URL and title.
• Category/Tag – Then use the category/tag’s URL, and “Category on Site Name” as the text.
• Default – Share the homepage URL, site title and description on any other page.

The reason we go to the trouble of making sure we have the right URL and text here is to ensure that the right details are shared, e.g. we don’t need any utm_source= etc. tracking tags after the address.

Get the Share Codes

The next step is to get the share code for each button, and put it in HTML that we can style.

You can either follow through the steps manually as I show you, or skip to the next block of code after this one, and copy it (But read the paragraph before it too).

Manual way:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="social-float">
	<div class="sf-twitter">
		<!-- Twitter Code Goes Here -->
	</div>
 
	<div class="sf-facebook">
		<!-- Facebook Code Goes Here -->
	</div>
 
	<div class="sf-plusone">
		<!-- Google +1 Code Goes Here -->
	</div>
</div><!-- /social-float -->

You can see HTML comments for where each share code will go. Now, let’s get those codes (And tweak them as needed)

• Twitter
  • Click here.
  • Choose “Vertical Count”, and enter your Twitter handle below.
  • Copy and paste the code.
  • Find the part that looks like: data-count=”vertical” data-via=”problogdesign”. Take a space after that and paste: data-url=”<?php echo $url; ?>” data-text=”<?php echo $text; ?>”
• Facebook
  • Click here.
  • Enter http://google.com for “Address to Share”.
  • Deselect the “Send Button” option, choose “box_count” for layout, and set the width to 50.
  • Hit “Get Code” and copy and paste the iframe code (Or XFBML if you already use the FB JavaScript SDK. If you aren’t sure, just take the iframe code).
  • In the iframe code, search for http%3A%2F%2Fgoogle.com, and replace it with: <?php echo urlencode($url); ?>
  • Search for 80 in the code, and replace it with 62 (There are 2 places to change it, both to do with the height).
• Google +1
  • Click here.
  • Select the “Tall” button, and then copy and paste the code.
  • Find where it says size=”tall” in the code, then take a space and paste: href=”<?php echo $url; ?>”

And that’s you done! Your code should look similar to what’s below.

Automatic Way:

Copy and paste the following, but on line 3, make sure you change the data-via=”problogdesign” part to use your Twitter username instead.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="social-float">
	<div class="sf-twitter">
		<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="problogdesign" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>
 
	<div class="sf-facebook">
		<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
	</div>
 
	<div class="sf-plusone">
		<!-- Place this tag in your head or just before your close body tag -->
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 
		<!-- Place this tag where you want the +1 button to render -->
		<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
	</div>
</div><!-- /social-float -->

CSS Time

The majority of our effect is done with just a simple piece of CSS. By using fixed positioning, we can anchor our box to the corner of the screen (It won’t work in IE6, but that’s okay).

The following will put the box 10px from the bottom and left edges of their browser (Don’t copy this just yet).

1
2
3
4
5

#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
}

If you try that, it works, but of course, we want to style it too. One of the annoyances of these share buttons is that each vendor has decided to vary their button’s size by 1 or 2 pixels.

The following CSS makes a good template to work from. I’ve measured the sizes so each button is 10px from the next, with a 10px padding around the whole thing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/**
 * Floating Social Buttons
 */
 
#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
 
	width: 55px;
	padding: 10px 5px;
	text-align: center;
 
	background-color: #fff;
 
	border: 5px solid rgba(180, 180, 180, .7);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 
	display: none;
}
 
.sf-twitter {
	height: 62px;
	margin-bottom: 10px;
}
 
.sf-facebook {
	height: 60px;
	margin-bottom: 10px;
}
 
.sf-plusone {
	height: 60px;
}

To tweak the style, change the background-color and border parts of #social-float (Right now, I’ve just used some CSS3 to quickly make a rounded, semi-transparent border).

Important: Don’t worry that it’s not showing up for you. The display: none; in there is hiding it. Read on!

Hide on Smaller Browsers

We don’t want to show the box on smaller browsers because it will obstruct the post content. To solve that, let’s use jQuery to check the browser size, and show the box only if it is wide enough.

First up, make sure you’ve loaded jQuery by adding the following to your functions.php file, or to header.php (Before the wp_head(); tag).

1

<?php wp_enqueue_script('jquery'); ?>

Now, go back to footer.php and after our button HTML, paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
	jQuery(document).ready(function($) {
		// Show social voter only if the browser is wide enough.
		if( $(window).width() >= 1030 )
			$('#social-float').show();
 
		// Update when user resizes browser.
		$(window).resize(function() {
			if( $(window).width() < 1030 ) {
				$('#social-float').hide();
			} else {
				$('#social-float').show();
			}
		});
	});
</script>

Lines 4 and 5 run when the page is first loaded. They check the width, and show the box if it is wide enough.

Lines 8 is an event handler that runs when the user resizes their browser. When they do, we run the exact same check as above, and either hide/show the box as appropriate.

I’ve set the width to 1030px, which is 980px (A common page width), plus 150px (The width of our box) times 2 (The page is centered, so 150px on either side). Feel free to change this however you like, but make sure you update it in both locations.

Now save your code and check it out on site. With everything in place now, feel free to tweak the style and you’re good to go.

If you hit any issues, let me know in the comments! Good luck!

This article will teach you how to add validation to your WordPress comment forms, using jQuery.

With validation, users can submit their comment and instantly see if they’ve hit an issue. There is no need to submit the page and get WordPress’ default “There is a problem…” page. Instead, errors are displayed inline instantly.

In our example, we will build a plugin which you can drop into any theme and will work instantly.

Just like last week, you can see the finished product in action on the demo site. And you can download the completed files here.

Organize Your Files

Download the bassistance.de form validation plugin for jQuery.

This plugin contains the file jquery.validate.min.js, which will be taking care of all our validation worries for us. All we have to do is tell it how and when to work.

I’ve called the plugin “pbd-validate-comments”, though you’re welcome to name it however you like. You should have a .php file with the same name, and then a “css” and “js” folder. Create a style.css file in the css folder, and place the jquery.validate.min.js file from above in the js folder.

The end result is like this:

With your files in place, open up the pbd-validate-comments.php file and start with the essential plugin info:

1
2
3
4
5
6
7
8
9
10

<?php
/**
 * Plugin Name: PBD Validate Comments
 * Plugin URI: http://www.problogdesign.com/
 * Description: Validate comments instantly with jQuery. Uses <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Form Validation</a> plugin by Jörn Zaefferer.
 * Version: 0.1
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 * License: GPLv2
 */

Load Your Scripts

Now, let’s begin. The process today is quite simple, and will have 3 steps.

1. Load all of our scripts.
2. Initialize the validation on our form, and tell it the rules to use.
3. Style the error messages.

Let’s start with loading the scripts. Still in pbd-validate-comments.php, paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
 * Add jQuery Validation script on posts.
 */
function pbd_vc_scripts() {
	if(is_single() ) {
		wp_enqueue_script(
			'jquery-validate',
			plugin_dir_url( __FILE__ ) . '/js/jquery.validate.min.js',
			array('jquery'),
			'1.8.1',
			true
		);
 
		wp_enqueue_style(
			'jquery-validate',
			plugin_dir_url( __FILE__ ) . '/css/style.css',
			array(),
			'1.0'
		);
	}
}
add_action('template_redirect', 'pbd_vc_scripts');

The important thing here is the wp_enqueue_script() section. This is what tells WordPress to load in our validation script. Similarly, wp_enqueue_style() is used to load our stylesheet.

We have then wrapped that up in an is_single() condition, so that our script is only loaded on post pages. And in order for that to work, we have put the whole thing in a hook (Attached to ‘template_redirect’).

The end result is that our script is now loaded on every post page, but not on the homepage/categories etc.

Activate the Script

Congrats, you’ve loaded in the scripts now. The next step is to initialize the validator and give it our rules.

One way to give the rules is to use CSS classes, e.g. class=”required” would mean the field is required.

However, with new themes using the comment_form() function, that gets more complicated. So instead, we will pass all of the rules via JavaScript.

Carry on in the PHP file, and paste the following:

1
2
3
4
5
6
7
8
9

/**
 * Initiate the script.
 * Calls the validation options on the comment form.
 */
function pbd_vc_init() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
 
			$('#commentform').validate({

Here, we open a new function (Which we will hook into place on the page in a minute), and start writing some JavaScript.

The ‘#commentform‘ needs to be a jQuery selector for your form. In most cases, you can leave this as it is because 99% of WordPress themes will be using that ID on their comment forms.

We are now going to pass in an array of options. The first will be an array of rules. You can see the full list of validation rules available here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

rules: {
	author: {
		required: true,
		minlength: 2
	},
 
	email: {
		required: true,
		email: true
	},
 
	url: {
		url: true
	},
 
	comment: {
		required: true,
		minlength: 20
	}
},

We have simply taken rules from the available list, and applied them to the various fields (author, email etc. are the “name” values for the comment form fields, and will be in every WordPress theme).

These rules translate to:

• Author Field – Must be filled in, with a minimum of 2 characters.
• Email Field – Must be filled in, with a valid email address.
• URL Field – Not required, but if something is entered, it must be a valid URL.
• Comment Field – Required, and must be at least 20 characters long.

How simple was that?

We could leave it there, but let’s pass in one more option; a custom error message for each field.

1
2
3
4
5
6

messages: {
	author: "Please enter a valid name.",
	email: "Please enter a valid email address.",
	url: "Please use a valid website address.",
	comment: "Message must be at least 20 characters."
}

Again, this is quite self-explanatory. The messages entered will appear when there is an error in the corresponding field.

Now, just close up the JavaScript functions and the script tag, and then hook the PHP function into place.

1
2
3
4
5
6
7

			});
		});
	</script>
<?php }
add_action('wp_footer', 'pbd_vc_init', 999);
 
?>

And that’s the end of our work, so we’ve closed up the PHP file!

Last of All, Some Styles

If you save and activate the plugin now, it all works perfectly well. However, a little CSS for the error messages won’t hurt.

Open the style.css file, and paste the following:

1
2
3
4
5

label.error {
	display: block;
	background: #ffd2d2;
	padding: 0 10px;
}

And that’s it! Save your plugin, activate it in the dashboard and go try posting some phony comments. You should see instant errors pointing out any issues.

The jQuery validation script is hugely powerful and suitable for just about any type of form. Once you know how to use it in WordPress as we have done here, you’ll find you can use it anywhere!

And don’t forget, if you don’t want to put the files together yourself, you can grab the completed download here.

Please let me know if you enjoyed this post! If you’d like to see more jQuery guides on the site, leave a comment!

The idea behind this post was a collaboration between myself, Michael Martin, and Seth Bryant, thanks Seth!