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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Add Styles to Console Statements

    I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...

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!