The HTML / JavaScript

The document.write method is one you generally want to avoid, but it works best in this case:

<!-- Use Google CDN for MooTools, local Moo as a callback -->
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script>!window.MooTools && document.write(unescape('%3Cscript src="/js/mootools-yui-compressed.js"%3E%3C/script%3E'))</script>

In the event that the CDN fails, your local file is instead used. Simple but clever fallback, yes? The likelihood that Google or other CDNs is down is small, but since you don’t control the other server, there’s always that risk! Play it safe!

JavaScript CDN Fallbacks is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve thought long and hard about this, and I still can’t decide whether or not I should consider myself a “gamer.” During my lifetime, I’ve owned an original Nintendo, Sega Genesis, Nintendo64 (best controller of any console ever), wii, and XBox 360. I used to have a horrible habit of downloading pirating games, but that’s long and over with. Anyways, the only game I’ve played consistently over the past three years is Call of Duty. Which one? Whichever the latest Call of Duty has been most recently released. I don’t even care to attempt the story mode; I simply want to log on and shoot each and every one of you I encounter.

My sharpshooter status aside, I’ve always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I’d like to publicly shame every n00b I’ve baptized with my sniper rifle. I recently found a great gamer API effort by XBoxLeaders.com. While their API can’t tell me the titles and emblems I’ve earned in Modern Warfare 3, I can get some relevant information about my user, my status, and the games I’ve recently dominated.

The PHP

The API is incredibly simple to use: simply send the the gamertag and response type you desire:

// Settings
$gamertag = 'dwalsh83';
$profileUrl = 'http://www.xboxleaders.com/api/profile/'.$gamertag.'.json';

// Get information about me
$info = file_get_contents($profileUrl);

// To JSON
$json = json_decode($info);
$user = $json->user;

The response will look like this:

{
  "status": {
    "is_valid": "yes",
    "is_cheater": "no",
    "tier": "gold"
  },
  "profile": {
    "gamertag": "dwalsh83",
    "gamerscore": 300,
    "reputation": 20,
    "gender": "male",
    "motto": "Watch your head.",
    "name": "David Walsh",
    "location": "Madison, WI, US",
    "bio": "There is, and only can be, Call of Duty.",
    "url": "http:\/\/live.xbox.com\/en-US\/Profile?gamertag=dwalsh83",
    "avatar_tile": "http:\/\/image.xboxlive.com\/global\/t.fffe07d1\/tile\/0\/2000b",
    "avatar_small": "http:\/\/avatar.xboxlive.com\/avatar\/dwalsh83\/avatarpic-s.png",
    "avatar_large": "http:\/\/avatar.xboxlive.com\/avatar\/dwalsh83\/avatarpic-l.png",
    "avatar_body": "http:\/\/avatar.xboxlive.com\/avatar\/dwalsh83\/avatar-body.png",
    "launch_team_xbl": "no",
    "launch_team_nxe": "no",
    "launch_team_kin": "no"
  }
}

As you can see, you get basic account information (name, bio, etc) but also a bit of information about the games the user has been playing recently. You also get links to images for the user and said games. What you choose to do with this information is up to you; you could put together a really basic gamercard:

<style>
	
	.gamercard {
		border: 1px solid #bdbec1;
		padding: 10px;
		width: 600px;
		font-family: arial, sans-serif;
		font-size: 12px;
		color: #bdbec1;
		
		background-image: -webkit-linear-gradient(#ddd, #fff, #e9fdce);
		background-image: -moz-linear-gradient(top, #ddd, #fff, #e9fdce);
		background-image: -ms-linear-gradient(#ddd, #fff, #e9fdce);
		background-image: -o-linear-gradient(#ddd, #fff, #e9fdce);
		background-image: linear-gradient(#ddd, #fff, #e9fdce);
	}
	
	.gamercard img {
		display: block;
	}
	
	.gamercard .avatar {
		float: right;
		width: 150px;
		height: 300px;
		margin: -60px 0 0 50px;
	}
	
	.gamercard h1 {
		font-weight: normal;
	}
		
		.gamercard h1 img {
			display: inline-block; 
			padding-right: 10px;
			width: 24px; 
			height: 24px;
		}
		
		.gamercard h1 a {
			text-decoration: none;
		}
		
			.gamercard h1 a:hover {
				background: #bbe6a6;
				color: #333;
			}
			
	.gamercard h2 {
		color: #111;
		font-size: 16px;
		font-weight: normal;
		margin-top: 15px;
	}
	
	.gamercard ul {
		list-style-type: none;
	}
		.gamercard ul li {
			padding-top: 8px;
		}
			
			.gamercard ul li strong {
				color: #666;
			}
			
	.gamercard ul.games li {
		display: inline-block; 
		margin-right: 20px;
		text-align: center;
		font-weight: bold;
		width: 85px;
		vertical-align: top;
	}
		.gamercard ul.games li img {
			margin: 0 auto;
			width: 85px;
		}
	
	.gamercard a {
		color: #78bb58;
	}
	
	.gamercard .clear {
		clear: both;
	}
	
</style>

<!-- gamercard -->
<div class="gamercard">
	
	<!-- profile image -->
	<img src="<?php echo $profile->avatar_body; ?>" alt="<?php echo $profile->gamertag; ?>" class="avatar" />

	<!-- gamer name -->
	<h1><img src="<?php echo $profile->avatar_tile; ?>" alt="<?php echo $profile->gamertag; ?>" /><a href="<?php echo $profile->profile_link; ?>"><?php echo $profile->gamertag; ?></a></h1>

	<!-- personal info -->
	<h2>The Legend</h2>
	<ul>
		<li><strong>Name:</strong> <?php echo $profile->name; ?></li>
		<li><strong>Bio:</strong> <?php echo $profile->bio; ?></li>
		<li><strong>Location:</strong> <?php echo $profile->location; ?></li>
		<li><strong>Gender:</strong> <?php echo $profile->gender; ?></li>
		<li><strong>Motto:</strong> <?php echo $profile->motto; ?></li>
		<li><strong>Online:</strong> <?php echo $profile->online ? "Online" : "Offline"; ?></li>
		<li><strong>Status:</strong> <?php echo $profile->online ? $profile->online_status : "(none)"; ?></li>
	</ul>

	<?php if($profile->recent_games): ?>
	<!-- recent games -->
	<h2>Recent Games</h2>
	<ul class="games">
		<?php foreach($profile->recent_games as $game): ?>
			 <li><a href="<?php echo $game->marketplace_url; ?>"><img src="<?php echo $game->small_boxart; ?>" alt="<?php echo $game->title; ?>" /></a><br /><?php echo $game->title; ?></li> 
		<?php endforeach; ?>
	</ul>
	<?php endif; ?>
	
	<div class="clear"></div>
</div>

Don’t forget to cache the responses you get back from the API for faster performance!

In the end, I’m not sure how feasible it would be to create a true API for XBox and its games. I assume each game and online service stores its information on the game creator’s own servers, so the information you could get would be minimal and fragmented at best. It would be nice if the creators of Call of Duty could put something out there for assassins like me, but they’re probably all trying to find a way to improve the horrible spawn positioning logic. Awesome work by XBoxLeaders.com in this effort though — it’s given me a great start at a fun project.

XBox Live Gamer API is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.

The HTML

The tooltip structure consists of five elements:

	

		

			

				{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
			
		
		

	

The root element dictates the position of the tooltip (which is most likely injected to the body). The sole child element controls the width of the tooltip. That element contains two elements: the content container and the and the arrow node (which I’ve changed from an I element to a DIV). The last, innermost DIV element will hold the content and provide padding.

The CSS

The CSS to create the tooltip layout is actually very minimal:

body {
	font-size: 11px;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
	color: #333;
	line-height: 1.28; 
	text-align: left;
	direction: ltr;
}

.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
	position: absolute;
	z-index: 200;
}

.uiContextualDialogLeft .uiContextualDialog {
	right: 0;
}

.uiOverlayArrowRight {
	padding-right: 10px;
}

.uiOverlay {
	position: relative;
	z-index: 200;
}

.uiContextualDialog, .uiContextualDialog:focus {
	outline: 0 solid transparent;
}

.uiOverlayContent {
	background: white;
	border: 1px solid #8C8C8C;
	border: 1px solid rgba(0, 0, 0, .45);
	border-bottom: 1px solid #666;
	-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	position: relative;
}

.uiOverlayContentHolder {
	padding: 10px;
}

.uiOverlayArrow {
	position: absolute;
	overflow: hidden;
}

.uiOverlayArrowRight .uiOverlayArrow {
	background-image: url(sprite.png);
	background-repeat: no-repeat;
	background-position: -177px -309px;
	height: 16px;
	right: 2px;
	width: 9px;
}

The content pane contains the majority of the CSS rules, include the box-shadow and border, both of which use rgba color for a more detailed effect. Showing and hiding of the tooltip may be done via CSS key-frames or JavaScript — the choice would be up to the individual implementing the tooltip.

Why Show This?

Two reasons. The first is that I appreciate well-coded features like this. The second, more important reason, is that I’ll be creating a JavaScript-powered version of this functionality which accounts for content size, position on page, stacking/z-index management, etc. Do I create as a jQuery and MooTools plugin? Do I create it as a standalone JavaScript project. Let me know your thoughts!

Facebook Tooltip HTML and CSS 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 ∞.

It’s no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook “Like” and “Recommend” widgets on every website.  One problem I’ve always found with sharing URLs on Facebook is that you often have no control over the image and description text that accompany the URL.  Had I known about Facebook Open Graph API, I would’ve known the solution to that problem.

Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is “recommended”, “liked”, or just generally shared.  The information is set via custom META tags on the source page.  Let’s take a look at the different META tags Facebook uses to allow you to customize how your website is shared.

All of Facebook’s Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set.  The data relative to the property set goes within the content attribute:

<meta property="og:{tagName}" content="{tagValue}"/> 

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.  Let’s review a few key META tags!

Facebook Open Graph Meta Tags

image

The image META tag directs Facebook to use the specified image when the page is shared:

<meta property="og:image" content="http://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>

It’s best to use a square image, as Facebook displays them in that matter. That image should be at least 50×50 in any of the usually supported image forms (JPG, PNG, etc.)

title

The title to accompany the URL:

<meta property="og:title" content="Facebook Open Graph META Tags"/>

In most cases, this should be the article or page title.

url

The URL should be the canonical address for the given page:

<meta property="og:url" content="http://davidwalsh.name/facebook-meta-tags"/>

Familiarize yourself with the canonical LINK type if you aren’t aware of its purpose — it could help your SEO out greatly!

site_name

Provides Facebook the name that you would like your website to be recognized by:

<meta property="og:site_name" content="David Walsh Blog"/>

This is very useful as Facebook may have no way of knowing outside of this META tag.

type

Provides Facebook the type of website that you would like your website to be categorized by:

<meta property="og:type" content="blog"/>

Read the complete list of website types to best categorize your website.

More Facebook Open Graph META Tags

The META tags provided above are just a few of the special Open Graph META tags sniffed by Facebook.  Open Graph also specified META tags for:

• Facebook Application-specific settings, if your website also has a Facebook app
• Activities
• Businesses
• Groups
• Locations

Visit the Facebook Open Graph page to retrieve more details about each META tag and its intended information.  Facebook also provides a Lint tool to help you validate what you’re sending!

The Open Graph protocol is a great way to not only share a page’s information but to also control how your site’s information is shared.  Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery!

Facebook Open Graph META Tags is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The JavaScript

(function()%7Bvar%20d=document,w=window,ds=d.getSelection,ws=w.getSelection,ss=d.selection;t=(ws)%3Fws():(ds)%3Fds():(ss)%3Fss.createRange().text:'';t=(t.toString().length)%3Ft:prompt('Please select the Dojo resource you would like to research.','');if(t)%7Ba='http://dojotoolkit.org/api/';u=a+t.split('.').join('/');f=function()%7Bx=w.open(u,'dwin','scrollbars=1,toolbar=0,resizable=1,status=1,width=600,height=600');if(!x)w.location.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(f,0);else%20f();%7D%7D)();

What a mess!  Don’t worry about it — it’s compact because your browsers want it that way. You may simply click the bookmarklet and type in the class name you want to find (ex: dijit.layout.TabContainer), or highlight a class name in the page and click the bookmarklet.

Have fun with this bookmarklet — it may save you some time.

Dojo Toolkit API Bookmarklet is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

We all know that the big limitation of AJAX is that cross-domain requests aren’t allowed.  We also know, however, that we skirt around that rule a bit by using JSONP.  JSONP is the process of SCRIPT tag injection, referencing a cross-domain URL and providing a callback function (on your page) that the provider will call so that you can handle the result.  Let’s take a look at how JSONP is handled with jQuery, MooTools, and the Dojo Toolkit.  For our examples, we’ll pull tweets from Twitter with the term “Arsenal” in them.

jQuery JSONP

jQuery uses the same method for JSONP as it does for regular JSON — the jQuery.getJSON method:

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
	q: "Arsenal"
},function(tweets) {
	// Handle response here
	console.info("Twitter returned: ",tweets);
});

As long as a callback parameter is provided to the getJSON method, jQuery will consider the request JSONP.

MooTools JSONP

MooTools requires the Request.JSONP Class available in MooTools More.  Armed with Request.JSONP, fetching JSON from another domain is a piece of cake:

new Request.JSONP({
	url: "http://search.twitter.com/search.json",
	data: {
		q: "Arsenal"
	},
	onComplete: function(tweets) {
		// Log the result to console for inspection
		console.info("Twitter returned: ",tweets);
	}
}).send();

Request.JSONP is a super compact class too!

Dojo JSONP

JSONP with the Dojo Toolkit requires the dojo.io.script resource and its get method:

// dojo.io.script is an external dependency, so it must be required
dojo.require("dojo.io.script");

// When the resource is ready
dojo.ready(function() {
	
	// Use the get method
	dojo.io.script.get({
		// The URL to get JSON from Twitter
		url: "http://search.twitter.com/search.json",
		// The callback paramater
		callbackParamName: "callback", // Twitter requires "callback"
		// The content to send
		content: {
			q: "Arsenal"
		},
		// The success callback
		load: function(tweetsJson) {  // Twitter sent us information!
			// Log the result to console for inspection
			console.info("Twitter returned: ",tweetsJson);
		}
	});
});

Retrieving JSON with Dojo is usually done with the dojo.xhrGet method, but JSONP request this special method.  The arguments for dojo.io.script.get are the same as dojo.xhrGet with the exception of the callback parameter.

JSONP is a hugely effective, reliable, and easy to implement.  JSONP strategies also allow developers to avoid cumbersome server-side proxy writing to retrieve data.  Each of the JavaScript libraries above have battle-tested methods for retrieving JSON data across domains — it’s up to you to implement them to suit your needs!

JSONP with jQuery, MooTools, and Dojo is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

The stock content will be built by javascript but we will have two DIVS created within the page:

<div id="stockIndicator">Retrieving stock information....</div>
<div id="stockContainer"></div>

One DIV is an indicator which fades in an out during data fetch, the other is the container which will hold the stock information.

The CSS

As always, the styling of elements is subject to however you’d like them to look, but here’s a really basic style set:

#stockContainer, #stockIndicator { width:500px; }
#stockContainer		{ background:#343434; padding:10px; }
#stockIndicator		{ text-align:right; visibility:hidden; padding:5px; }
.stockRow			{ padding:5px 10px; clear:both; margin-bottom:5px; }
	.stockName		{ font-size:14px; font-weight:normal; float:left; }
	.stockData		{ font-size:11px; float:right; width:200px; text-align:right; }

/* stock differential */`
.stockSame			{  }
.stockUp			{ background:lightgreen; }
	.stockUp .stockName	{ color:green; }
.stockDown			{ background:pink; }
	.stockDown .stockName { color:red; }

Stocks that are above for the day are green, below are red.  Stocks which have stayed the same are black.  Style however you’d like though.

The MooTools JavaScript

Before attacking an example usage, let’s talk about about Request.Stocks.  This class is an extension of JSONP, setting numerous defaults that correspond to using Yahoo’s YQL service, and adding additional options to customize the data you want to receive from Yahoo.  A few of the custom options include:

• stocks: An array of symbols to retrieve stocks for
• sortBy: The data field to sort by
• display: The data fields to retrieve from Yahoo.  A few of the fields you can retrieve include: Ask, AverageDailyVolume, Bid, AskRealtime, BidRealtime, BookValue, Change&PercentChange, Change, Commission, ChangeRealtime, AfterHoursChangeRealtime, DividendShare, LastTradeDate, TradeDate, and more!

More detail on all of the custom options, some of which are not listed on this blog, can be found here.

So now to the class usage.  The sample code looks long but that’s due to my commenting:

// When the dom is ready...
window.addEvent("domready",function() {
	// Get the stock container and indicator
	var container = document.id("stockContainer");
	var indicator = document.id("stockIndicator");
	// Create the instance
	var request = new Request.Stocks({
		// Stocks to retrieve
		stocks: ["AAPL","GOOG","MSFT"],
		// Formatter upon result
		onComplete: function(result) {
			// Log out the result to see the structure
			console.warn(result);
			// Hide the indicator
			indicator.fade(0);
			// Create a template with which to display the information
			var template = ' \
				<div class="stockRow stock{UpDown}"> \
					<div class="stockName">({symbol}) {Name}</div>\
					<div class="stockData">{Ask} {Change} {ChangeinPercent}</div> \
					<br class="clear" /> \
				</div> \
			';
			// For every stock , display its information in the template
			var html ="";
			Array.from(result.query.results.quote).each(function(quote) {
				// Add an "UpDown" property to the quote object
				var change = Number.from(quote.Change);
				quote.UpDown =  change == 0 ? "Same" : change > 0 ? "Up" : "Down";
				// Update running contnet
				html += template.substitute(quote);
			});
			// Update the content
			container.set("html",html);
		},
		// Show the indicator upon request
		onRequest: function () {
			indicator.fade(1);
		}
	});
	// Send the request every 20 seconds
	(function() {
		request.send();
	}).periodical(20 * 1000);
	// Send right away
	request.send();

Request.Stocks’ onComplete method provides a method to handle the result from Yahoo.  Notice how I build the content string (using MooTools’ string.substitute) and then set the element’s HTML, instead of appending to the element’s innerHTML property — that’s the more efficient way to change a node’s content.  Also, remember that this class contains every method that Request, Request.JSON, and Request.JSONP have.

Request.Stocks is an outstanding utility class for developers looking to create applications based on stock market data.  The mix of flexibility and simplicity are real strong points of this class.  If I had one criticism of this class, it would be that it doesn’t provide a method to add or remove stocks on the fly.  This functionality would allow the developer to create applications which allow users to add their own portfolio stocks without needing them all defined immediately.  Other than that, this class rock solid and I look forward to seeing where it goes in the future!

RealTime Stock Quotes with MooTools Request.Stocks and YQL 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 ∞.