Create Tiny URLs with TinyURL, MooTools, and PHP

By  on  

Since we've already figured out how to create TinyURL URLs remotely using PHP, we may as well create a small AJAX-enabled tiny URL creator. Using MooTools to do so is almost too easy.

The XHTML (Form)

<p><strong>URL:</strong> <input type="text" id="url" size="40" /> <input type="button" id="geturl" value="Get URL" /></p>
<p id="newurl"></p>

We need an input box where the user will enter their a URL, a button to trigger the process, and a placeholder to put the new, tiny URL.

The PHP

if(isset($_GET['url'])) 
{
	die(get_tiny_url(urldecode($_GET['url'])));
}

//gets the data from a URL  
function get_tiny_url($url)  
{  
	$ch = curl_init();  
	$timeout = 5;  
	curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);  
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);  
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);  
	$data = curl_exec($ch);  
	curl_close($ch);  
	return $data;  
}

This PHP snippet grabs and returns the tiny URL from TinyURL.

The MooTools JavaScript

window.addEvent('domready',function() {
	var TinyURL = new Class({
		//implements
		Implements: [Options],
		//options
		options: {
			checkURL: ''
		},
		//initialization
		initialize: function(options) {
			//set options
			this.setOptions(options);
		},
		//a method that does whatever you want
		createURL: function(url,complete) {
			var req = new Request({
				url: this.options.checkURL + '?url=' + url,
				method: 'get',
				async: false,
				onComplete: function(response) { complete(response); }
			}).send();
		}
	});
	
	
	// usage //
	var new_tiny_url = new TinyURL({
		checkURL: 'grab-tiny-url.php'
	});
	
	$('geturl').addEvent('click',function() {
		if($('url').value) {
			var newu = new_tiny_url.createURL($('url').value,function(resp) {
				$('newurl').set('html','The TinyURL is ' + resp + '.  Go ahead, try it!').setStyle('color','green');
			});
		}
	});
});

Just a tiny MooTools class and basic usage. The only parameter, "checkURL," is the URL to the PHP snippet above -- NOT the long URL we want to shrink. The real action happens when the createURL() method is invoked. You pass the method a URL to shorten and an "onComplete" function that takes action when the URL has been received.

TinyURL is a great service!

Recent Features

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • By
    Create Snook-Style Navigation Using MooTools

    Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools. The Images These are the same...

  • By
    MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

Discussion

  1. Very cool tip. I am having fun learning all the things I can do with jQuery, and MooTools.

    JS is simply fascinating… to think where the web has come in just a few years.

  2. Mario

    This doesn’t work. I tried everything and always get “undefined” has de url… :(

  3. Dan

    Fatal error: Call to undefined function curl_init()

    where to insert php code?

  4. venkadesh

    Can anyone help me how to use URL shortener for Facebook like

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!