Long url to short url

Url Shortener JavaScript PLugin

In our days, sometimes it’s easier to have a short link for your page, that you can share with your friends.

With this in mind, i’ve created a small plugin in JavaScript to handle this problem, and of course, without the need of JQuery.

Plugin Functionalities

  • Create a short url
  • Retrieve long url
  • Get url analytics

This is how it works

First of all, In order to use a Google service in your website, you need to get a Google API Key.

For that, follow this steps:

  1. Visit the Google APIs console.
  2. Create a project.
  3. Activate the URL Shortener API.
  4. Click Keys in the left navigation. You can then copy and paste the key from this page.

After this, we need an HTML structure tu use in our tests:

<html>
    <head>
        <script type="text/javascript" src="urlShortener.js"></script>
    </head>
    <body>
        Long Url - <a id="longUrl" href="https://jwebcoder.wordpress.com">
            https://jwebcoder.wordpress.com
        </a><br>
        Generated Short Url - <a id="shortUrl" href="#">
        </a><br>
        Retrieved Long Url - <a id="retLongUrl" href="#"></a><br>
        Analytics Data - <span id="analytics"></span><br><br>
        <a onClick="getShortLink();" href="#">Generate Short Link</a><br>
        <a onClick="getLongLink();" href="#">Retrieve Long Url</a><br>
        <a onClick)"getAnalytics();" href="#">Get Short Link Analytics</a>
    </body>
</html>

And now we are ready to implement the plugin.

1 – Create Short Url

Has you can see in the HTML structure, we have a link calling the function getShortLink in the element a, so we need to create that function.

What getShortLink do is, call the urlShortener functions, and set the text and link of the element a with the id shortUrl.

Lets create it:

<head>
    <script type="text/javascript" src="urlShortener.js"></script>
    <script type="text/javascript">
        function getShortLink(){
            urlShortener.settings.apiKey = "Your API Key";
            var shortLink = urlShortener.getLink({ "longUrl" : document.getElementById("longUrl").innerHTML });
            document.getElementById("shortUrl").innerHTML = shortLink;
            document.getElementById("shortUrl").setAttribute( "href" , shortLink );
        }
    </script>
</head>
...

Due to the objective of not using JQuery, this code gets to be a little tricky. But, for those who already use JQuery in their projects, i’ll set the code example in a link at the bottom of the post, including both non-JQuery and JQuery examples.

We just need to send the longUrl to the plugin and it will give us the shortUrl:

var shortLink = urlShortener.getLink({ "longUrl" : document.getElementById("longUrl").innerHTML });

Dont forget to get the key from the Google API Console and paste it where it says “Your API Key”:

urlShortener.settings.apiKey = "Your API Key";

2 – Retrieve Long Url

The secund button we have, calls for a function called getLongLink.

The getLongLink will use the link generated before, and recreate the long link.

And this is the function getLongLink:

<head>
    <script type="text/javascript" src="urlShortener.js"></script>
    <script type="text/javascript">
        function getShortLink(){
            ...
        }
        function getLongLink(){
            urlShortener.settings.apiKey = "Your API Key";
            var longLink = urlShortener.getLink({ "shortUrl" : document.getElementById("shortUrl").innerHTML });
            document.getElementById("retLongUrl").innerHTML = longLink;
            document.getElementById("retLongUrl").setAttribute( "href" , longLink );
        }
    </script>
</head>
...

It does the same has the getShortLink function, but this time, instead of setting the longUrl we set the shortUrl:

var longLink = urlShortener.getLink({ "shortUrl" : document.getElementById("shortUrl").innerHTML });

3 – Get Url Analytics

The Google API to generate short urls gives us the possibility to retreive the link analytics, so the plugin must be ready to handle this requests.

And this is how you do it:

<head>
    <script type="text/javascript" src="urlShortener.js"></script>
    <script type="text/javascript">
        function getShortLink(){
            ...
        }
        function getLongLink(){
            ...
        }
        function getAnalytics(){
            urlShortener.settings.apiKey = "Your API Key";
            var infoLink = JSON.stringify(urlShortener.getLink({ "shortUrl" : document.getElementById("shortUrl").innerHTML, "projection" : "FULL" }));
            document.getElementById("analytics").innerHTML = infoLink;
        }
    </script>
</head>
...

If you look carefully, you will see that the getAnalytics function and the getLongLink function are very simillar. In fact they both use the getLink function from urlShortener object, the diference is the projection argument.

Projection argument

The projection argument can have three values:

  • FULL – returns the full info about the link
  • ANALYTICS_TOP_STRINGS – country, browser specific data
  • ANALYTICS_CLICKS – clicks statistics

Really simple and useful.

You can follow this project in GitHub, so it will be easier to keep track of updates.

Hope you like it, and don’t forget to subscribe.

If you have any doubt, just leave a comment bellow or say something in facebook or twitter.

Advertisements

One thought on “Url Shortener JavaScript PLugin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s