GemPixel Blog

jShortener is a jQuery plugin built especially for Premium URL Shortener. You can basically use it in any way you want to shorten a set of links on your site. You can even integrate it in WordPress without the need of using it as a plugin. In this tutorial, I will show you how you can use the powerful yet simple jShortener plugin on your website.

1.0 Set up your site and configure the script

Before we can start using jShortener, we need to set it up. You must first download jShortener from here where you must first login using your email and the purchase code that you get following the purchase of Premium URL Shortener on CodeCanyon. Once you login, simply download and extract the compressed file.

1.1 Configure jShortener

Following the extraction, you will notice three files: index.html, shortener.php and urlshortener.js. The first thing you have to do is to open shortener.php and fill the following variables accordingly. $urltoapi is the URL to your API of your URL shortener which is http://YOURSITE/api and $apikey is your API key which you can get from your user control panel. Once you get these, fill the following variables and save that file.

	$urltoapi="";
	$apikey="";

1.2 Set up your site

The next step is to set up your site to use this library. The first thing you must do is to upload shortener.php and urlshortener.js to your server. Then open your WordPress theme or your php application's theme and add the following snippet to the footer.

<script src="http://PATH/TO/urlshortener.js"></script>
<script type="text/javascript">
	$('a.class').shorten({
		type: 'php',
		url:'http://PATH/TO/shortener.php',
	});
</script>

Note: Because this plugin is fully dependent on jQuery, you must add these after your jQuery library, otherwise it will not work.

2.0 Use selectors to shorten URLs

Now that the core is set up, you will have to use the powerful jQuery selectors to tell the script which links to shorten. If you are not familiar with jQuery, you have plenty of options to select an element. Click here to find out more or check below for some quick examples.

2.1 Use html elements

This is perhaps the easiest way to select an element(s). You can basically use html element tag (body, div, a, etc) as follows:

	$('a').shorten({
		type: 'php',
		url:'http://PATH/TO/shortener.php',
	});

The code above will select all anchors (<a></a>) and will shorten the content of their respective href attribute. Be careful when using this as you may not want to shorten all URLs.

2.2 Use IDs or Classes

To shorten a specific element, you have to use the #id or the .class. The code is very similar to the code above but instead of a, you have to add either the #id or the .class. Check out the example below.

	$('.external,#out').shorten({
		type: 'php',
		url:'http://PATH/TO/shortener.php',
	});

The code above will shorten links containing either the class external  or  the ID out. Also the code above is a perfect example of multiple selection where you can use a comma to select multiple elements.

2.3 Advanced Selectors

If you have a good knowledge of jQuery, then you may want to use advanced selectors. You can use them to target a specific element instead of selecting all of them. For example the following selector $('.comments a'), $('.comments > a') or $('.comments').find('a') will select all anchors that are found within the element that has the comments class.

	$('.comments').find('a').shorten({
		type: 'php',
		url:'http://PATH/TO/shortener.php',
	});

You can use an even more advanced method to select only external links, using the code below.

$('a[href*='http://']:not([href*='"+location.hostname+"'])').shorten({
		type: 'php',
		url:'http://PATH/TO/shortener.php',
	});

Conclusion

Although, jShortener provides you a great way of shortening your links, you still have to be careful to not abuse this as some users might not like it. Also remember that URLs are still validated by the script and those that do not pass the validation will not be shortened.  If you have any questions, leave a comment below.