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
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • 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
    Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

  • By
    Firefox Marketplace Animated Buttons

    The Firefox Marketplace is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and so...

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!