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
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • 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...

Incredible Demos

  • By
    Optimize Your Links For Print Using CSS — Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

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!