I grabbed the standard WordPress gallery shortcode from line ~758 in wp-includes/media.php and pasted it into my_theme/functions.php for modification. For the more adventurous folks you can override the default WordPress gallery shortcode and then galleries you’ve inserted using the Media Gallery will be lightboxed.

Here’s the code I ended up with in functions.php (shortened for readability, you’ll need to C&P the entire shortcode function from wp-includes/media.php):

add_shortcode('my_gallery_shortcode', 'my_gallery_shortcode_function');
 
function my_gallery_shortcode_function($attr) {
	global $post, $wp_locale;
	...
	foreach ( $attachments as $id => $attachment ) {
		$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
 
		//add rel="prettyPhoto[pp_gal]"
		$link = str_replace('><img','rel="prettyPhoto[pp_gal]" ><img',$link);
 
		$output .= "<{$itemtag} class='gallery-item'>";
		$output .= "
			<{$icontag} class='gallery-icon'>
				$link
			</{$icontag}>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='wp-caption-text gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				</{$captiontag}>";
		}
		$output .= "</{$itemtag}>";
		if ( $columns > 0 && ++$i % $columns == 0 )
			$output .= '<br style="clear: both" />';
	}
 
	$output .= "
			<br style='clear: both;' />
		</div>\n";
 
	return $output;
}

My edit was small, I added $link=str_replace('><img','rel="prettyPhoto[pp_gal]" ><img',$link); to the gallery output so that PrettyPhoto can do it’s thing.

Now that you have that all you need to do is be sure you’re including the necessary files:

<link rel="stylesheet" type="text/css" media="all" href="<?=bloginfo('template_directory');?>/prettyPhoto/css/prettyPhoto.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="<?=bloginfo('template_directory');?>/prettyPhoto/js/jquery.prettyPhoto.js"></script>

And be sure to call PrettyPhoto:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto();
	}); 
</script>

Now all you need to do is upload photos to your gallery and use this shortcode on your page:

[my_gallery_shortcode link="file"]

And that’s it! A quick solution to adding a lightbox to your WordPress gallery.

I started with get_comment_excerpt() from line ~407 of wp-includes/comment-template.php and pasted it into my_name/functions.php to be modified.

Here’s what I ended up with:

function my_get_comment_excerpt($comment_ID = 0, $num_words = 20) {
	$comment = get_comment( $comment_ID );
	$comment_text = strip_tags($comment->comment_content);
	$blah = explode(' ', $comment_text);
	if (count($blah) > $num_words) {
		$k = $num_words;
		$use_dotdotdot = 1;
	} else {
		$k = count($blah);
		$use_dotdotdot = 0;
	}
	$excerpt = '';
	for ($i=0; $i<$k; $i++) {
		$excerpt .= $blah[$i] . ' ';
	}
	$excerpt .= ($use_dotdotdot) ? '...' : '';
	return apply_filters('get_comment_excerpt', $excerpt);
}

And here’s a little code to output a list of comments using this function:

<ul>
<?php 
	$comments = get_comments();
	foreach($comments as $c) :
?>
<li>
	<a href="<?php echo get_permalink($c->comment_post_ID); ?>">
		<?php /* output 10 words of comment */ ?>
		<p><?php echo my_get_comment_excerpt($c->comment_ID, 10); ?></p>		
		<span><?php echo $c->comment_author; ?></span>
		<span><?php echo date("m/j/Y",strtotime($c->comment_date)); ?> </span>
	</a>
</li>
<?php
	endforeach;
?>
</ul>

Feel free to ask questions in the comments.

I cooked up a quick shortcode function using some of their product list code that will query the products by the passed category and output them using the product template.

First, place the following code in my_theme/functions.php:

function my_wpsc_products_shortcode($atts) {
	$number_per_page = get_option('use_pagination') ? get_option('wpsc_products_per_page') : 0;
	$query = shortcode_atts(array(
		'category_id' => isset($atts['cat']) ? $atts['cat'] : 0,
		'limit_of_items' => 0,
		'sort_order' => null,
		'number_per_page' => $number_per_page,
		'page' => 0,
	), $atts);
 
	return wpsc_display_products_page($query);
}
add_shortcode('my_wpsc_category', 'my_wpsc_products_shortcode');

Once that’s done you’ll be able to use [my_wpsc_category cat=6 /], where 6 is the integer ID of the category, on whichever page you want the products displayed on.

This list will be output using the wpsc-single_product.php template or the wpsc-products_page.php template, depending on whether you have multiple products in the category.

Feel free to ask questions in the comments.

1) Pay Twilio and Tropo for the use of their APIs, for roughly a penny per message.

2) Send an email directly to their carrier’s mail-to-SMS gateway – a free service most carriers provide, which will translate your email into an SMS sent to their subscribers’ phone

Twilio and Tropo are about as easy as it gets to integrate (REST-like APIs that return JSON/POX), but you pay for every single message and that can add up quickly. So #2 (mail-to-SMS gateways) starts to look pretty good.

But there’s some problems with mail-to-SMS gateways:

1) Each carrier has their own format. For example, T-Mobile’s gateway is number@tmomail.net (for the US), AT&T’s is number@txt.att.net (for most of their customers), and Verizon is number@vtext.net (unless you used to be with Alltel – then its number@message.alltel.com). A big list of mail-to-SMS-gateways is available on Wikipedia.

Bonus:some carriers want the international code prepended (the 1 in front of the number, for the US), some carriers don’t. (e.g., T-Mobile does, AT&T doesn’t)

2) Some carriers require authentication (Sprint) or don’t have a mail-to-SMS gateway at all (Google Voice).

3) If the user ports their number to a different carrier you’ll have to detect it and react accordingly.

So you’ll have to figure out what carrier they’re using in order to direct the email and meet whatever requirements – which usually means asking the user to choose their carrier from a list.

There is a better way! What if we could detect the carrier automatically?

It turns out you can. The lovely folks at CloudVox made an API that does exactly that – you give it a phone number, and it tells you the carrier and if its a cell-phone or landline. Its 100% free, with no API keys/credentials required.

Its hosted at digits.cloudvox.com, along with example calls/responses (full docs are here). It speaks JSON over HTTP.

This gives us a much better user experience:

1) User inputs their number, no carrier dropdown needed

2) We use CloudVox’s API to determine their carrier

3) Try to send them an SMS, and have them confirm ownership in the normal way (i.e., enter a confirmation code)

This will cover most people, and is free outside of the development time. If there was an error (i.e., we couldn’t find the number with CloudVox’s API, or we did but the carrier doesn’t support mail-to-SMS), we can fall back to Twilio or Tropo. We’re still paying a few cents here and there, but the default case is free.

Here’s some example code in PHP, for querying CloudVox’s API:

<?php
	/* Finds the carrier for the given phone number using CloudVox's API. Returns the carrier name as a string on success, or false if the carrier couldn't be determined */
	function findCarrier($phoneNumber)
	{
		$carrier = false; // will contain the carriers name as a string if we are able to look it up
 
		// attempt to lookup the number with the CloudVox API
		$requestUrl = 'http://digits.cloudvox.com/' . $phoneNumber . '.json';
		$apiResponse = file_get_contents($requestUrl); // Note: needs code to handle the error case of file_get_contents
 
		if ($apiResponse)
		{
			$responseJson = json_decode($apiResponse);
			if (isset($responseJson->allocation) && isset($responseJson->allocation->carrier_name))
			{
				$carrier = $responseJson->allocation->carrier_name;			
			}
		}
		return $carrier; // will be false or the name of the carrier
	}
 
	if (isset($_GET['phoneNumber']))
	{
		// user has submitted a form via GET, containing a field called phoneNumber
 
		// collect the phoneNumber and remove any non-numeric chars
		$phoneNumber = preg_replace('#[^0-9]#','',strip_tags($_GET['phoneNumber'])); 
		$carrier = findCarrier($phoneNumber);
 
		if ($carrier)
		{
			if (stripos($carrier, 'verizon') !== FALSE)
			{
				sendWithVerizon($phoneNumber);
			}
			else if (stripos($carrier, 'at&t') !== FALSE)
			{
				sendWithATT($phoneNumber);
			}
			else
			{
				// other carrier. you'd really want to fall back to Twilio/Tropo here, and/or log the carrier so you can add it later
				echo "Unknown Carrier: {$carrier}";
			}
		}
		else
		{
			// send SMS via Twilio or Tropo instead
		}
	}
	else
	{
		// show the form
		echo '<form>' . 
			 '<label for="phoneNumber">Phone Number</label>' .
			 '<input type="text" name="phoneNumber" />' .
			 '</form>';
	}
?>

Consider the following code:

function fetchUrl($url){
     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     curl_setopt($ch, CURLOPT_TIMEOUT, 20);
 
     $retData = curl_exec($ch);
     curl_close($ch); 
 
     return $retData;
}

$profile_id = "1234567890";
 
$data['feed_data'] = fetchUrl("http://graph.facebook.com/{$profile_id}/feed");

Before the recent changes, this was all you needed to load a Facebook page’s feed. You could load a public page’s feed by simply pulling from graph.facebook.com/{profile_id}/feed. With the recent changes you just have to make a small modification and you’re good to go.

Here is the updated code:

$profile_id = "1234567890";		
 
//App Info, needed for Auth
$app_id = "0001234567890";
$app_secret = "abc123ebf123f3g5g6j";
 
//retrieve auth token
$authToken = fetchUrl("https://graph.facebook.com/oauth/access_token?type=client_cred&client_id={$app_id}&client_secret={$app_secret}");
 
$data['feed_data'] = fetchUrl("https://graph.facebook.com/{$profile_id}/feed?{$authToken}");

Be sure to use https instead of http, needed for OAuth. You’ll also need to create a simple Facebook app to get an App ID and Secret key. Once done, just swap out the variables in the above script for the proper values and you’re off to the races!

We decided to submit the form via AJAX instead, and show the confirmation message directly on the Facebook page. This way the user would not have to leave the Facebook page, resulting in a smoother user experience. We couldn’t find a good explanation of how to do this on Google, so after figuring it out I decided to go ahead and write it up.

The following example will show you how to submit a basic contact form using AJAX from within your Facebook page. All HTML and Javascript that follows should be pasted directly into the “Edit FBML” screen on Facebook.

Here’s the example form HTML we’ll use for the rest of this article. It’s just two text fields (name and email) and a submit button:

<form action="http://mywebsite.com/form_submit.php" method="post">
     <p>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" />
     </p>
     <p>
          <label for="email">Email:</label>
          <input type="text" name="email" id="email" />
     </p>
     <button type="submit" onclick="return submitAjaxForm();">Submit</button>
     <p id="ajaxMessage"></p>
</form>

There’s three things you should take note of:

1. The form’s action attribute is set to a page on mywebsite.com, not facebook.com (replace mywebsite.com with your own domain)
2. The submit button has an onSubmit event that calls a function submitAjaxForm, which we’ll define shortly
3. At the end of the form is an empty paragraph tag. We’ll use this space to display messages to the user.

On our server, form_submit.php is a simple PHP script that logs the submissions, and sends back a message for the user letting them know the submission was successful. It might look something like this:

<?php
     log_submission($_POST['name', $_POST['email']);
     echo "Thank you for your submission!";
?>

Of course, your script will be more sophisticated than this one, and doesn’t have to be written in PHP. Its on your server, so you can handle logging the submission however you like. Just make sure the output is valid FBML.

With the form HTML added to your Facebook page and the logging script in place, the only thing left is adding the Javascript to submit the form via AJAX and show the confirmation message.

Note: Facebook does not allow you to use any Javascript function you like, for security purposes. Instead they’ve created a library of Javascript functions for accessing the DOM, AJAX, and event binding called FBJS. These functions are used in the example below.

We’ll now define the submitAjaxForm() function we referenced earlier in our submit button’s onSubmit event:

<script><!--
function submitAjaxForm() 
{ 
	// declare a new FBJS AJAX object
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML;
 
	// define a callback to handle the response from the server
	ajax.ondone = function(data) 
	{ 
		document.getElementById('ajaxMessage').setInnerFBML(data);
	}
 
	// let the user know we're sending the data	
	document.getElementById('ajaxMessage').setInnerXHTML('Submitting your information, please wait...');
 
	// collect field values
	var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue() };
	ajax.post('http://mywebsite.com/form_submit.php', queryParams);
	return false;
}
//--></script>

Note: The opening and closing HTML comments embedded in the Javascript are important, so leave them intact.

The example is fairly self explanatory, but here’s what’s happening:

1. Declare a new Ajax object, which is one of the FBJS classes. We then set its response type to FBML (Ajax.RAW and Ajax.JSON are also accepted).
2. Define a callback function to handle the response from the server. In this case, our function simply takes the response from the server and displays it in the #ajaxMessage paragraph we defined earlier.
3. Update the user to let them know their data is being submitted using FBJS’s setInnerFBML function.
4. Collect the form field’s values into an array named queryParams, using FBJS’s getElementById and getValue functions. Although getElementById is similar to the standard Javascript function, it accounts for the random slugs Facebook injects into div id’s for security (View Source on a Facebook page and look at the div ID’s to see this in action).
5. Send the AJAX request, using FBJS’ Ajax.post function. The second argument is optional, and should be an array containing the query parameters.
6. “return false;” prevents the form’s normal submit behavior

That’s all there is to it! If you have any questions or if I should clarify a section, let me know in the comments.

The Challenge

Given 2 text files, each containing approximately 1500 anonymous IP addresses, we were to determine how many resolved to each US state. Separate counts were to be maintained for each list. The data was needed for a time sensitive report, and the clock was ticking.

The Tools

There are several freely available SQL databases which correlate IP addresses to their geographic location, such as this one maintained by iplocationtools.com. If we’d been building a web app setting up a local instance would have made sense, but at 4.1 million rows it was going to take too long to get a local instance running.

What we needed was a web service to do the lookups for us. In the past, we’d been unable to find a free web service to fulfill this role, as most will not provide data beyond a country level. But today we were lucky, and Google quickly turned up the perfect solution: a free REST web service running the very same database from iplocationtools.com. Its exactly what it says on the tin: a free IP geolocation webservice. It gave us even more accuracy than we needed (cities and zipcodes!), and even better it was running on Google’s App Engine, so we knew it could handle a heavy load.

With the primary problem solved, the only thing needed was a simple PHP script to read in the input files, query the web service for each IP, parse the JSON results, and maintain a total for each state.

The Solution

Thanks to PHP5′s excellent JSON support, the script to interact with the web service was trivial. I won’t bore you with the file I/O and tallying, but here’s the function which converts the IP address to its state.

<?php
	function getStateFromIp($ip)
	{
		$resp = json_decode(file_get_contents('http://freegeoip.appspot.com/json/' . urlencode($ip)));
		if (!$resp->status)
		{
			// lookup failed
			return false;
		}
		else
		{
			return $resp->regioncode;		
		}
	}      
?>

Take note of the the json_decode function. If you’re not already familiar with it I’d highly recommend taking a few minutes to familiarize yourself with PHP5′s JSON functions. JSON is becoming a de facto standard for web services, so being able to painlessly convert to and from JSON in PHP is critical.

Finally, we simply used print_r to dump the array containing the per state totals, and used Monarch to pull the data into an Excel file which we then delivered to the customer. (Note: under normal circumstances we would have reached a more elegant solution, but given the time constraints brute force was the name of the game.)

Conclusion

On-demand web services are fundamentally changing the way we interact with data. Projects which were formerly large, slow, and expensive can now be completed in a matter of hours or days for a fraction of the cost. Perhaps most importantly, anyone can get involved.

Its an exciting time, and we’re happy to be a part of it all. Thanks for reading!

If your company needs help with a custom dataset contact us today. Even if you’re not sure exactly what to ask for, we can help fill in the blanks.

We’ve identified 10 ways in which normal HTML forms fall short, and dug up the Javascript and CSS code you’ll need to fix them. Although the best enhancements are so intuitive as to be unnoticed, rest assured your visitors would thank you if they knew.

Note: Many of the solutions in this list depend on jQuery, our javascript framework of choice.

Combo Boxes

For those unfamiliar, a Combo Box is a combination of a text box and a list box. It allows the user the option of selecting from a list of predefined items, or entering a new item of their choice. Your browser’s address bar is a perfect example.

Its an elegant solution to a common problem, yet the combo box was somehow left out of HTML’s form elements.

Enter Sexy Combo, a jQuery plugin which provides a seamless solution. Users without javascript will simply encounter a normal select element.

Progress Bars For Uploads

The standard file input frustrates users with its awkwardness and lack of information. Furthermore, not being able to upload asynchronously results in a lot of wasted time.

To be fair, providing information on an ongoing upload is trickier than it might sound. Thankfully, SWFUpload provides a very clean solution that will convert your standard file inputs into a very flexible and asynchronous file uploader complete with a progress bar.

Note: As the name implies, SWFUpload uses an invisible Flash movie to actually perform the upload. As such, your users will need Flash as well as javascript enabled to take advantage.

Date Selection

Using a standard text input for a date leads to all manner of formatting issues, and using 3 select boxes is cumbersome. Desktop apps have a great solution – the date picker, which is to say a pop-up calendar.

jQuery UI’s Datepicker plugin is a perfect solution.

Note: The download page is for the entire jQuery UI library, but will allow you to download only what you want. I’d recommend only downloading the Datepicker with Packed compression, as the library is quite large.

Time Selection

Time selection in a normal HTML form has the same problems as date selection, but it lacks a uniform solution. We’ve provided 2 implementations, so that you can decide which is more appropriate for your audience.

Time Entry is a jQuery plugin that is simple and very customizable. Its normal behavior is to provide a text box where the user can use the arrow keys to quickly set the hour, minute, and am/pm settings. Its similar to how you set the time in Windows, so it should be intuitive for most visitors.

ClockPick is a more creative, but less traditional solution. If you’re generally comfortable with creative inputs, its a fantastic interface.

Color Selection

Color selection might not apply to every app, but when you need it the native options leave you out in the cold. There’s only a handful of visitors who would know what a hex code is, and even fewer who have their favorites memorized.

ColorPicker is a very nice solution, which provides a color picker similar to that in Adobe Photoshop.

Input Masking / Validation

Input masking is when a text box has static characters already included, and the cursor moves intelligently. For example, a text box for a social security number should already have the dashes, and after you enter the first three numbers the cursor should move past the first dash. Furthermore, it shouldn’t allow anything but numbers to be entered.

Input validation is checking to see if the value the user entered falls within the boundaries. In our social security number example, if the number entered isn’t exactly 9 digits, its not valid.

Note: Client-side validation can be easily overridden by a malicious visitor, so you’ll need to sanitize and validate your data server-side as well.

The Masked Input jQuery plugin can implement both of these features for us. It will let you define any custom mask, and you can use its “completed” callback function to flag the inputs as valid.

Better Support for Defaults

HTML inputs do allow for default values, but its nice to have them disappear when the input gains focus, and reappear on blur if the user hasn’t entered anything.

The aptly named Default Values plugin does exactly that.

AJAX Form Submission

Submitting forms can be a great use of AJAX, particularly if you have a series of forms which are affected by the user entered values (i.e. a wizard). Its also a nice way to break a long form into stages to decrease abandonment.

The jQuery Form Plugin is an easy way to convert your current forms to AJAX forms while preserving their functionality for users without Javascript. If you are feeling creative or want to write something more customized, jQuery’s serialize function will get you almost all the way there.

Automatically Growing Textareas

If you’ve used Facebook or Basecamp, you’ve probably noticed that the textareas get longer when you’re running out of space. Its aesthetically pleasing and very convenient.

Here’s a jQuery plugin to add the same behavior to your textareas.

Spin Buttons

A spin button is a text box with up/down arrows, allowing the user to easily “nudge” a numeric value up or down. Like a combo box, the user can still type in their own value.

They are most useful when the range of possible values is fairly small – for example selecting the number of diners in a reservation.

The jQuery Spin Button plugin is a nice implementation of this control.

One More Thing

Each of these ten solutions requires at least one external javascript library, and some require stylesheets. Implementing all ten would be great, but including a bunch of external javascript / css files can drastically increase the load time of your page.

Therefore, we recommend you do 2 things:

1. Concatenate your Javascript and CSS files as much as makes sense.
2. Compress them using Dean Edward’s packer and CSSDrive’s CSS Compressor, respectively.

Also, if you know of any scripts that we missed here let us know in the comments. Thanks for reading!