• The joke about “Google finally hired a designer” is old but true — the new design looks simplistic but elegant.
• When I mentioned I had invites to give away, I assumed I’d get anywhere from 80  to 120 requests.  I’ve gotten well over 1,200 now.  That speaks to how much buzz there’s been about this new service within the web development world.  Quite impressive.
• From the start, the service just felt like it would be more useful than Wave.  I anticipate G+ will stick.
• I see this app as a direct competitor to Facebook but not so much to Twitter.  The appeal of Twitter’s 140 character limit will never get old.
• Facebook’s saving grace is that its user base is already massive, and non-techies wont care to adopt G+.  Where Google has an advantage over other community builders is the number of GMail and Google Apps users that will stumble upon G+.
• “Circles” instead of “lists” is just a fancy term, but they seem more pronounced on G+.  The nice “Add to circles” mouseover effect reinforces that.  As someone who likes his information organized, this feature pleases me quite a bit.
• LOL at “Sparks.”  Those will last a month.
• Profile pages are a billion times cleaner than Facebook’s profile pages;  with Facebook, there’s way too much going on.
• The photo upload feature and display system are pretty sweet from start to finish.  From photo drag/drop upload, to live progress bars, to all of the great mouseover effects, G+ is able to utilize a lot of HTML5/CSS3 features without becoming a major turn-off.  Well done to them.
• I realize that services like Facebook Places and Foursquare are popular, but check-in features are a surefire way to annoy the hell out of me and clog up my feed with crap.
• The long-polling (and probably future WebSocket) technology Google uses makes their app seem lightning fast.  Probably difficult to construct the system but well worth it for all G+ users.
• I love the stream’s auto-fit-width and height.  Loved it on Google Image search, love it here.  Comment bubbles are a nice touch too.
• I don’t see a way to change a photo album’s name.  Lame.
• I’m hoping that Google implements friendly links by username instead of the horrendously long profile URLs.  I’d much prefer “/davidwalsh83″ to “/114538814489633467974″.  Maybe that would too easily expose email address handles though?
• I don’t use Facebook’s “Like” very much, so I don’t anticipate using “+1″ much either.
• Johnathan Snook made some really good points about G+’s focus styles.  Google’s done a great job with them but could probably do better.
• The small “Send an Email” feature is quite nice.  No need to jump into Gmail, no need for access to direct email address.
• Profile editing somehow manages to stay elegant and organized despite being a one-page, inline process.
• The real test is when Google creates an API for G+;  can G+ stay clean and organized then too?  Or will G+ turn into a Facebook Farmville mess?

Those are my thoughts on Google+.  What do you think about G+?

Thoughts on Google+ is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

If you follow me on Twitter, you know that Google+ is my new tech porn.  Google+ is the same technological marvel we’ve come to expect from Google apps, but the elegant but still simplistic design is a welcomed change from Google.  I want to get used to using Google+ but I don’t want to be conscious of keeping the tab open in Chrome.  Luckily MooTools developer Olmo Maldonado shared a slick method creating a custom Google+ app without the need for Fluid, and you can place the app in your dock for easy access!

This technique would allow you to create an app for any website, but the focus of this post will be Google+.  You could use Fluid.app for this, but the technique presented here allows for avoid Fluid.app.

Grab the Google+ Logo

Download the following Google+ logo to the Downloads directory of your computer:

This logo will be used as the application and dock logo.

Download and Execute makeapp.sh

There’s an outstanding script available on LifeHacker which provides the user a trio of simple prompts and creates an app based on the input.  Behind the scenes, makeapp.sh copies Google’s Chrome and creates separate settings paths (for cookie and history separation).  With those created, an executable is created which opens the Chrome copy to the Google+ url.

Run the script from command line with:

chmod +x ./makeapp.sh && ./makeapp.sh

The script will ask you for three arguments;  provide the following:

• Application name:  Google+
• Web URL:  http://plus.google.com/
• Icon Location:  /Users/{yourUserName}/Downloads/googleplus-icon.png

Now open your applications folder and you’ll see a new app called Google+!  Drag the app icon to the dock and now you have a Google+ app in your dock!  The separate history and cookie pool is important so that your traditional Chrome install doesn’t muck with your Google+ app’s information, and visa versa.  Have fun with Google+!

Create a Google+ Mac App for Your Dock is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Google’s new Google+ service is taking the development world by storm, and why shouldn’t it?  It’s minimalistic UI, use of cutting edge web techniques, and overall usability make it Google+ one of the more impressive web applications I’ve seen in quite a while (I was going to say “since Google Wave”, but that one didn’t end up well, did it?) Google+ allows you to share photos, links, statuses, and much more;  consider it a mesh between Twitter and Facebook.

Google+ will only gain more traction, meaning that the information we share will be pushed to more and more people.  This presents an excellent opportunity to promote our websites, much in the way that Twitter and Facebook have.  Let me show you a few different ways to add the new Google+1 badge to your website.

The Simple HTML

Adding a Google+1 badge is as easy as adding a few HTML tags:

<!-- one button, uses canonical link or current URL -->
<g:plusone></g:plusone>

<!-- customized for a specific address -->
<g:plusone href="http://davidwalsh.name/google-plus-badge"></g:plusone>

<!-- include the JS file -->
<script src="https://apis.google.com/js/plusone.js"></script>

Provide the g:plusone tag the URL to share via the HREF attribute (if none is provided, the page’s canonical link will be searched for and used, otherwise the current URL is used) and the desired size of button via the size attribute.  This tag should be added wherever within the page that you’d like the button to appear;  the SCRIPT tag should be found at the bottom of the page.  If you’d prefer not to dabble with the HTML yourself, Google provides a Google+1 button builder to do the dirty work for you.  Four button sizes are currently offered.

You could also use the following HTML5 code to render your button:

<div class="g-plusone" data-size="standard" data-count="true"></div>

Your button must have the g-plusone CSS class and data- attributes for options.

Deferring Loading

The HTML code above will render with the rest of the page, but what if you want to render a button on your own schedule?  No worries — Google’s API allows you to render buttons whenever you’d like:

<!-- one button, uses canonical link or current URL -->
<g:plusone></g:plusone>

<!-- Place this tag in your head or just before your close body tag -->
<script src="https://apis.google.com/js/plusone.js">
  {parsetags: 'explicit'}
</script>

<!-- Now render! -->
<script>
	gapi.plusone.go();
</script>

Using {parsetags: 'explicit'} and gapi.plusone.go() will turn your g:plusone tags into badges whenever you’d like. You can also render a specific button with the following JavaScript code:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
	{"parsetags": "explicit"}
</script>
<script type="text/javascript">
	function renderPlusone() {
		gapi.plusone.render("plusone-div");
	}
</script>
<body>
	<a href="#" onClick="renderPlusone();">Render the +1 button</a>
	<div id="plusone-div"></div>
</body>

Full API information as well as an introductory video is available here.  There are a few more small customization options available so check them out if you’re looking to specify language or play with custom rendering.

Don’t miss out on another avenue for sharing your awesome web content with everyone!  Implementing Twitter, Facebook, and Google+1 sharing buttons takes 5 minutes but the amount of traffic you can gain via these referral avenues is tremendous!

Add a Google+1 Badge to Your Website is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Whenever I get an invite to a hot new web app, I feel like Charlie when he got the golden ticket.  Obviously I’m easy to impress, but I’m sure some of you may be too.  I could just give them to whoever asks, but that’s far too easy.  And if I’m honest, far too boring for me.  When Google Wave came out, I ran a contest where I made users post their favorite picture of Christina Ricci in order to get an invite.  It was, in a word, glorious.

Now I have a bunch of Google+ invites.  This time I’m going to ask you to post a photo of your favorite actor/actress followed by “{actorName} FTW!”.  It appears that I have 500 invites so have at it and you’ll likely get one!  Don’t forget to add your Google handle so I can add you!

Google+ Invites is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

From a developer’s perspective, the Web is moving faster than ever. Thanks to reinvigorated browser vendors, frequent releases of new mobile devices, and our own need for better APIs and tools, we’re seeing loads of movement across each platform. Since browser venders like Mozilla, Chrome, Safari, Internet Explorer, and Opera know we need the ability to test these features on desktop and mobile platforms, they have mostly been helpful in providing edge versions of their browsers. This post will show you what each vendor provides in the way of edge versions, as well as how to get them.

Most browser vendors offer edge and/or mobile versions in Windows, Mac, and Linux flavors, but this post will focus on Mac offerings. Their other OS counterparts are generally found in the same place.

Mozilla: Nightly & Aurora

Mozilla Aurora is a sneak peak into the next few versions of Mozilla. As of now (still within a few months of FireFox 4′s official release), Aurora is a snapshot of Firefox 6. Aurora is full of APIs and features that will be introduced in future versions of Firefox, including a re-enabled Web Sockets, the Element.dataset API, and so on. The nightly version is also available if you prefer to stick closer to the current version of Firefox. Nightly can be updated each day while a new version of Aurora is available every few weeks. Click the “Check For Updates” button within the “About” menu to update your version of each browser.

Mozilla Mobile Emulator – “Fennec”

Fennec is the codename for Mozilla’s mobile version of Firefox. Firefox Mobile is available for Android-based devices, but you can test your website with the Fennec emulator, available on each desktop platform.

WebitKit Nighty

WebKit Nightly offers a nightly snapshot of the WebKit codebase. At the time of publish, radial gradients are not supported by Safari but I was able to test them using Webkit Nightly. Webkit Nightly prompts you to update each day. WebKit Nightly could be considered a a beta for Safari.

Chrome Canary & Chromium

Google Chrome Canary is a mesh between Google Chrome and the Chromium project, which is bleeding edge. Much like Mozilla’s Aurora, Chrome Canary is two to four versions ahead of the current release. Click here to read the story behind the name “Canary”. Open the About dialog to update your version of Canary. If you feel up to it, you can instead create a custom build of the Chromium trunk.

Opera Next

Opera Next is the pre-release version of the Opera browser. The latest alphas and betas are automatically installed, so you can try out Opera’s latest technologies. What I love about Next is that while Opera often releases snapshots, Next meshes those in automatically.

Opera Mobile Emulator

I wasn’t surprised to see that Opera was looking to offer a mobile solution, but I was pleasantly surprised as to how awesome Opera mobile was. Had Opera mobile been disappointing, I wouldn’t have considered trying to support it for my website. What I also like about Opera Mobile is they provided a nice emulator app, unlike the Android emulators.

Note: I also have an Opera wii emulator but I couldn’t find where I got it so I have not included it within this post.

Legacy Safari Installs

The Multi-Safari project provides multiple versions of Safari that you can test your websites against. This proved extremely helpful for me when I needed to support Safari 4 and 5, right around the original Safari 5 release. Provided you have a compatible operating system, you can get the original version of Safari!

Live on the bleeding edge of web development by testing and experimenting with code by using these edge browsers. Let me know if you have suggestions for additions to this page!

Edge & Mobile Browsers is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

4/22/2011: This blog post was completely rewritten to describe page tracking with Analytics’ asynchronous loading method.

With more and more websites becoming completely AJAX-driven, the typical “do this every time a page loads” strategy isn’t always enough. This is especially try if you’re using Google Analytics or other analytics tracking software. Google is, of course, forward-thinking so they’ve provided a way to easily track page views of AJAX requests.

The Google Analytics JavaScript

The current standard for loading Google Analytics is the asynchronous method:

var _gaq=[["_setAccount","UA-#######-#"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));

That bit tracks the initial page load but not subsequent AJAX calls. Any time you want to track a page load, place add the following snippet:

// "_trackEvent" is the pageview event, 
_gaq.push(['_trackPageview', '/some-page']);

_trackPageview is used again but this time we provide the URL of the AJAX address that was loaded. Using the small JavaScript snippet above allows you to keep track of pageviews just as you would if the entire page reloaded. I’d recommend using this snippet with MooTools’ History plugin.

The Old Method

If you’re still using the synchronous method of loading Google Analytics, the following snippet will accomplish the same task:

pageTracker._trackPageview('/some-page');

It’s great to know that Google Analytics is as dynamic as your web applications. Allowing developers to track AJAX page clicks prevents the need to code apps just to keep track of statistics.

Track AJAX Link Clicks Using Google Analytics is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

It appears that Google has changed their Page Rank mechanism. I’m currently investigating ways to restore the functionality of this class.

While developers and designers can debate about the important of different search engine optimizations strategies, one metric that simply can’t be argued is a website’s Google PageRank, or its importance in driving traffic to the site.  Achieving a better PageRank was a consideration when redesigning this blog.  We can discuss how to achieve a better PageRank in another post — this post will focus on how you can retrieve a page’s Google PageRank using a small PHP class that I have created.

The PHP

The base functions within this class were created by Jamie Scott — all credit for the base functions go to him.  I’ve simply placed the functionality into PHP class format for easy use and updated the code to be a bit more transparent.  As far as PHP classes go, this one is quite small:

// Declare the class
class GooglePageRankChecker {
	
	// Track the instance
	private static $instance;
	
	// Constructor
	function getRank($page) {
		// Create the instance, if one isn't created yet
		if(!isset(self::$instance)) {
			self::$instance = new self();
		}
		// Return the result
		return self::$instance->check($page);
	}
	
	
	// Convert string to a number
	function stringToNumber($string,$check,$magic) {
		$int32 = 4294967296;  // 2^32
	    $length = strlen($string);
	    for ($i = 0; $i < $length; $i++) {
	        $check *= $magic; 	
	        //If the float is beyond the boundaries of integer (usually +/- 2.15e+9 = 2^31), 
	        //  the result of converting to integer is undefined
	        //  refer to http://www.php.net/manual/en/language.types.integer.php
	        if($check >= $int32) {
	            $check = ($check - $int32 * (int) ($check / $int32));
	            //if the check less than -2^31
	            $check = ($check < -($int32 / 2)) ? ($check + $int32) : $check;
	        }
	        $check += ord($string{$i}); 
	    }
	    return $check;
	}
	
	// Create a url hash
	function createHash($string) {
		$check1 = $this->stringToNumber($string, 0x1505, 0x21);
	    $check2 = $this->stringToNumber($string, 0, 0x1003F);
	
		$factor = 4;
		$halfFactor = $factor/2;

	    $check1 >>= $halfFactor;
	    $check1 = (($check1 >> $factor) & 0x3FFFFC0 ) | ($check1 & 0x3F);
	    $check1 = (($check1 >> $factor) & 0x3FFC00 ) | ($check1 & 0x3FF);
	    $check1 = (($check1 >> $factor) & 0x3C000 ) | ($check1 & 0x3FFF);	

	    $calc1 = (((($check1 & 0x3C0) << $factor) | ($check1 & 0x3C)) << $halfFactor ) | ($check2 & 0xF0F );
	    $calc2 = (((($check1 & 0xFFFFC000) << $factor) | ($check1 & 0x3C00)) << 0xA) | ($check2 & 0xF0F0000 );

	    return ($calc1 | $calc2);
	}
	
	// Create checksum for hash
	function checkHash($hashNumber)
	{
	    $check = 0;
		$flag = 0;

		$hashString = sprintf('%u', $hashNumber) ;
		$length = strlen($hashString);

		for ($i = $length - 1;  $i >= 0;  $i --) {
			$r = $hashString{$i};
			if(1 === ($flag % 2)) {			  
				$r += $r;	 
				$r = (int)($r / 10) + ($r % 10);
			}
			$check += $r;
			$flag ++;	
		}

		$check %= 10;
		if(0 !== $check) {
			$check = 10 - $check;
			if(1 === ($flag % 2) ) {
				if(1 === ($check % 2)) {
					$check += 9;
				}
				$check >>= 1;
			}
		}

		return '7'.$check.$hashString;
	}
	
	function check($page) {

		// Open a socket to the toolbarqueries address, used by Google Toolbar
		$socket = fsockopen("toolbarqueries.google.com", 80, $errno, $errstr, 30);

		// If a connection can be established
		if($socket) {
			// Prep socket headers
			$out = "GET /search?client=navclient-auto&ch=".$this->checkHash($this->createHash($page))."&features=Rank&q=info:".$page."&num=100&filter=0 HTTP/1.1\r\n";
			$out .= "Host: toolbarqueries.google.com\r\n";
			$out .= "User-Agent: Mozilla/4.0 (compatible; GoogleToolbar 2.0.114-big; Windows XP 5.1)\r\n";
			$out .= "Connection: Close\r\n\r\n";

			// Write settings to the socket
			fwrite($socket, $out);

			// When a response is received...
			$result = "";
			while(!feof($socket)) {
				$data = fgets($socket, 128);
				$pos = strpos($data, "Rank_");
				if($pos !== false){
					$pagerank = substr($data, $pos + 9);
					$result += $pagerank;
				}
			}
			// Close the connection
			fclose($socket);
			
			// Return the rank!
			return $result;
		}
	}
}

The createHash and checkHash methods perform the deep down mathematical operations.  Once those are out of the way, the check method connects to Google’s toolbar server, disguising itself as a toolbar via the User-Agent header, to get the page’s PageRank.  A singleton pattern is used since creating individual instances isn’t important:

$rank = GooglePageRankChecker::getRank("davidwalsh.name"); // returns "5"

The number provided back represents the PageRank for the URL provided!  This PHP class can be used on its own, but I’ve created a MooTools-powered script to retrieve an address’ PageRank via some simple AJAX.

The MooTools JavaScript

This MooTools quick inline MooTools script responds to a button click, making an AJAX call to a PHP script that runs the class provided above:

// When the DOM is ready
window.addEvent("domready",function() {
	
	// When the form is submitted...
	var form = document.id("rankForm"), request, display, domain;
	form.addEvent("submit",function(e) {
		// Stop the event
		if(e) e.stop();
		
		// Create request, if not already created
		if(!request) {
			domain = document.id("domain");
			display = document.id("rankerDisplay");
			request = new Request({
				url: "pagerank-checker.php", 
				method: "post",
				onComplete: function(response) {
					display.setStyle("display","block").set("text","Page rank for " + domainValue + " is: " + response);
				}
			});
		}
		
		// Get the value fo the URL
		domainValue = domain.get("value");
		
		// Send the request
		request.send({ data: { domain: domainValue } });
	});
	
});

Using a JavaScript snippet like this, you could easily add a JavaScript-fronted Google PageRank checker with the framework of your choosing.

Outstanding work by Jamie Scott in creating the base functions to retrieve a page’s Google PageRank with PHP.  Hopefully my class makes the PageRank code a bit more portable and recognizable.

Google PageRank PHP Class is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be done before the user sees anything on the page).  In the real world, most small businesses can’t afford to invest money into website translation.   Luckily a small startup named “Google” provides an outstanding Translate API to translate simple text from one language to another!

Sample HTML

Google’s awesome Translate API allows you to send HTML — you don’t need to extract the text yourself! That’s a huge feature because parsing HTML and putting it all back again would be a nightmare!  Let’s put together some sample content:

<script src="https://www.google.com/jsapi?key=YOUR_GOOGLE_KEY"></script>
<div id="languages"><p>
	<a href="?lang=en" rel="en">English</a> / <a href="?lang=es" rel="es">Spanish</a> / <a href="?lang=it" rel="it">Italian</a> /
	<a href="?lang=fr" rel="fr">French</a>
</p></div>

<div id="languageBlock">
	<p>Lights go out and I can't be saved <br />
	Tides that I tried to swim against  <br />
	Brought me down upon my knees  <br />
	Oh I beg, I beg and plead </p>

	<p>Singin', come out if things aren't said  <br />
	Shoot an apple off my head  <br />
	And a, trouble that can't be named  <br />
	Tigers waitin' to be tamed </p>

	<p>Singing, yooooooooooooo ohhhhhh  <br />
	Yoooooooooooo ohhhhhh </p>

	<p>Home, home, where I wanted to go <br /> 
	Home, home, where I wanted to go  <br />
	Home, home, where I wanted to go  <br />
	Home, home, where I wanted to go</p>
</div>

We will use this #languageBlock element to send to Google for translation.  Note that each link has a rel attribute which holds the code for the language to switch to.

Google Translate API JavaScript

For the sake of keeping the code short, I’m using MooTools to access elements and add DOM events.  Feel free to stick to simple JavaScript or your framework of choice.

// Set the original/default language
var lang = "en";
var currentClass = "currentLang";

// Load the language lib
google.load("language",1);

// When the DOM is ready....
window.addEvent("domready",function(){
	// Retrieve the DIV to be translated.
	var translateDiv = document.id("languageBlock");
	// Define a function to switch from the currentlanguage to another
	var callback = function(result) {
		if(result.translation) {
			translateDiv.set("html",result.translation);
		}
	};
	// Add a click listener to update the DIV
	$$("#languages a").addEvent("click",function(e) {
		// Stop the event
		if(e) e.stop();
		// Get the "to" language
		var toLang = this.get("rel");
		// Set the translation into motion
		google.language.translate(translateDiv.get("html"),lang,toLang,callback);
		// Set the new language
		lang = toLang;
		// Add class to current
		this.getSiblings().removeClass(currentClass);
		this.addClass(currentClass);
	});
});

The first step in the process is using google.load to load the Translate API.  When the the API is loaded, we grab the DIV to be translated.  We then define a callback for when the translation returns from Google.  This callback simply updates the content of the DIV.  The last step is adding a click event handler to each language link.  A google.language.translate call sends the content to Google for translation.  When the translated content returns, the content is updated by our callback!

Thanks to Google’s Translate API, we can effortlessly translate data!  It’s important that I note that Google’s content size limit is quite small so you shouldn’t rely on the Translate API to completely translate your a page.  It is, however, an excellent way to translate an alert or status message in a give language!

Translate Content with the Google Translate API and JavaScript is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The PHP

The class itself is quite compact and the code should be easy to read:

// Declare the class
class GoogleUrlApi {
	
	// Constructor
	function GoogleURLAPI($key,$apiURL = 'https://www.googleapis.com/urlshortener/v1/url') {
		// Keep the API Url
		$this->apiURL = $apiURL.'?key='.$key;
	}
	
	// Shorten a URL
	function shorten($url) {
		// Send information along
		$response = $this->send($url);
		// Return the result
		return isset($response['id']) ? $response['id'] : false;
	}
	
	// Expand a URL
	function expand($url) {
		// Send information along
		$response = $this->send($url,false);
		// Return the result
		return isset($response['longUrl']) ? $response['longUrl'] : false;
	}
	
	// Send information to Google
	function send($url,$shorten = true) {
		// Create cURL
		$ch = curl_init();
		// If we're shortening a URL...
		if($shorten) {
			curl_setopt($ch,CURLOPT_URL,$this->apiURL);
			curl_setopt($ch,CURLOPT_POST,1);
			curl_setopt($ch,CURLOPT_POSTFIELDS,json_encode(array("longUrl"=>$url)));
			curl_setopt($ch,CURLOPT_HTTPHEADER,array("Content-Type: application/json"));
		}
		else {
			curl_setopt($ch,CURLOPT_URL,$this->apiURL.'&shortUrl='.$url);
		}
		curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
		// Execute the post
		$result = curl_exec($ch);
		// Close the connection
		curl_close($ch);
		// Return the result
		return json_decode($result,true);
	}		
}

The constructor requires your Google API key.  A second argument may be provided to the URL of the Google API.  As the API is currently in version 1, changing this URL would be more harmful than useful.  The class features two main methods:  shorten and expand.  Each method takes the long or short URL, contacts Google, and returns its counterpart.  If no counterpart is found, or the Google URL Shortener API is down, a result of false is returned, so please be sure to use your own error handling.

Now let’s create an instance of GoogleUrlApi to shorten and then expand a URL:

// Create instance with key
$key = 'xhjkhzkhfuh38934hfsdajkjaf';
$googer = new GoogleURLAPI($key);

// Test: Shorten a URL
$shortDWName = $googer->shorten("http://davidwalsh.name");
echo $shortDWName; // returns http://goo.gl/i002

// Test: Expand a URL
$longDWName = $googer->expand($shortDWName);
echo $longDWName; // returns http://davidwalsh.name

The shorten() and expand() methods return their counterparts, as expected.  Quite painless, no?

The Google URL Shortener API provides much more than what my class provides, including user URL listing and usage tracking.  My class provides only the basics;  I’m assuming that 90%+ care only about getting the URL shortened so I’ve catered to that audience.  I had also thought about adding a caching mechanism to the class but since most everyone has their own method of caching information, I thought it best to leave that out.  Hopefully this class has some use for you all!

Google URL Shortener PHP Class is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Let’s be honest…WordPress’ search functionality isn’t great. Let’s be more honest…no search functionality is better than Google’s. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API. Let me show you how to implement this awesome API within your own website!

Sign Up!

Google’s AJAX Search API requires that you sign up for an API key.  Signing up is free and you’ll be done with the process of retrieving a key in a few minutes.

You’ll also need to provide a domain for which they key will work for; one key per domain.

The HTML

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
	<!-- HTML5 SEARCH BOX!  -->
	<input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
	<!-- SEARCH davidwalsh.name ONLY! -->
	<input type="hidden" name="sitesearch" value="davidwalsh.name" />
	<!-- SEARCH BUTTON -->
	<input id="search-submit" type="submit" value="Search" />
</form>

<!-- ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY"></script>
<script type="text/javascript">
	google.load('mootools','1.2.4');
	google.load('search','1');
</script>

You’ll want to use a “real” form so that if the user doesn’t have JavaScript, they’ll get directed to Google for their search.  Beyond that, follow the hidden input line to ensure your search will work.  You may also note that the search box has autocomplete and placeholder attributes — those are HTML5 functionality, nothing to do with Google’s AJAX Search API.

The CSS

/* results positioning */
#search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

The CSS above simply position the elements where I want them per my design. I even used a CSS triangle!

The JavaScript

window.addEvent('domready',function(){

	/* search */
	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

		/*
			We're lazyloading all of the search stuff.
			After all, why create elements, add listeners, etc. if the user never gets there?
		*/
		if(!searchLoaded) {
			searchLoaded = true; //set searchLoaded to "true"; no more loading!

			//build elements!
			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
			var wrapper = new Element('div',{
				styles: {
					position: 'relative'
				}
			}).inject(container);
			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
			var closer = new Element('a', {
				href: 'javascript:;',
				text: 'Close',
				styles: {
					position: 'absolute', //position the "Close" link
					bottom: 35,
					right: 20
				},
				events: {
					click: function() {
						container.fade(0);
					}
				}
			}).inject(wrapper);

			//google interaction
			var search = new google.search.WebSearch(),
				control = new google.search.SearchControl(),
				options = new google.search.DrawOptions();

			//set google options
			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
			options.setInput(searchBox);

			//set search options
			search.setUserDefinedClassSuffix('siteSearch');
			search.setSiteRestriction('davidwalsh.name');
			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

			//set search controls
			control.addSearcher(search);
			control.draw(contentContainer,options);
			control.setNoResultsString('No results were found.');

			//add listeners to search box
			searchBox.addEvents({
				keyup: function(e) {
					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
						container.fade(0.9);
						control.execute(searchBox.value);
					}
					else {
						container.fade(0);
					}
				}
			});
			searchBox.removeEvent('focus',searchFn);
		}
	};
	searchBox.addEvent('focus',searchFn);
});

There’s a fair amount of JavaScript above so stay with me.  The following are the steps for implementing the Google AJAX API:

• Create an element to house the results of the search.
• Create a “Close” link which will allow the user to close the search results window.
• Create our Google-given class instance:
  • A Web Search (you can also create Local Search if you’d like…). google.search.WebSearch options. I’ve chosen to add tabs and set the input as my search box.
  • A SearchControl instance. google.search.SearchControl options. “siteSearch” is my suffix for results, I’ve restricted my search to the davidwalsh.name domain, and form submission will trigger results to display in the current window (instead of a new window).
  • A DrawOptions instance. google.search.DrawOptions options. With my DrawOptions instance, I’ve set search control, set the draw container with the options we’ve created, and I’ve decided to use Google’s default “no results” message

Once the search controls are created, it’s time to attach events to the search box to show and hide the search results container based on the contents of the search box. That’s all!

As you can see, I’ve chosen to use the MooTools (FTW) JavaScript toolkit to create the element that houses the results, the “Close” link, and to bind events to the search box. You could just as easily use Dojo or jQuery for element creation and even handling.

In all honesty, I couldn’t believe how easy it was to implement Google AJAX search.  It’s an easy want to implement search on your website, especially if you’re currently using WordPress’ search.  I recommend taking the time to implement Google’s AJAX Search API — the day it takes you to get it working will save your users hours of pain!

Implement the Google AJAX Search API is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.