Exposure

by Joynal Rab

Being a company or even just an individual, we all want some sort of exposure and be noticed publicly. The best way to expose yourself to the world is to have your brand noticed. In my case my brand is this domain: rab.io. Even though currently it just hosts my blog, there will be a lot of there stuff added along the way. (I'm actually still debating whether or not to use my other domain joynal.com instead to host my blog and use rab.io just for development.)

You can market yourself through different channels and drive in traffic or you can get a little creative. My first attempt at exposure if by having custom url shorteners. Yeah I know there are like a million of them, but me being who I am, I don't like using someone else's service -- I like having my own. Call it vanity or whatever, I like earning what I have even if it takes a lot of blood and sweat to achieve it.

There are ton of url shorteners like bit.ly out there -- bit.ly actually paved the way for services like this. Now in my case I wanted something like rab.io/j40dD or even a step further rab.io/facebook to go to something like Facebook (just an example).

I went ahead and looked around to see what other people were doing and sure enough people were super creative. There are even new services like CloudApp that go a step further and host files with URL shorteners. This is pretty fantastic stuff. Imagine you needed to link someone to something -- wouldn't you rather link them to something like yourdoma.in/UEDO instead of bit.ly/UEDO or even a direct link like http://mrcoles.com/bookmarklet/ (great site btw, we'll get back to that later)?

That way when the world sees your link, they see your domain instead of something like bit.ly (no offense bit.ly). So I went on a research trip to make it possible. I decided to do everything via PHP since it's basically my second language next to Coldfusion nowadays -- if I could do it through javascript I would heh. But alas PHP was best fit for it.

My first road block was that I actually use this domain for more than redirects -- I host my blog and stuff. So I had to either go for a subdomain or just a sub-directory off of rab.io. So I did just that.

An example of a working redirect:

rab.io/s/bkmrk

So anytime someone goes to rab.io/s/[insert string] it will go to a page (if it exists).

So How Did I Make This Work?

I did a few things (probably out of order). First, I could have gone the route of setting up a form and submitting it with a new link and have it generate a short link for me. That's great, but I wanted to go a step further and just click on a button while on some random website and have it generate me a short link. Enter bookmarklets.

Bookmarklets are exactly what they sound like. Basically they are button(s) that exist in your Bookmark toolbar and if you click on them, they just don't take you to a page, they can perform javascript executions on the current page you are on -- in my case I wanted to take the current page's link and send it over to rab.io and generate a short link all in one shot. Confused yet? I'll explain.

Say if I was on this site: http://mrcoles.com/bookmarklet/

And I wanted to quickly generate a link like rab.io/s/bkmrk, I would just click on the Rab.io Shortener button in the bookmark toolbar, and it would bring me to my site and show me the short link like so:

There I have the option to either keep the link the way it is, or further customize it to something like rab.io/s/bkmrk.

So how did I make this happen. First go to this website: Bookmarklet Creator with Script Includer. After doing so, you'll find a bookmarklet generator that you can make some javascript magic with. In my case, this is the script I generated:

var _form = document.createElement("form");  
_form. setAttribute("target", "_blank");  
_form. setAttribute("action", "https://rab.io/path/to/shortener");  
_form. setAttribute("method", "POST");  
var _input = document.createElement("input");  
_input.setAttribute("name", "url_variable");  
_input.setAttribute("type", "hidden");  
_input.setAttribute("value", location.href);  
_form.appendChild(_input);  
_form.submit();

MrColes.com then kindly generates this for me:

javascript:(function()%7Bvar%20_form%20%3D%20document.createElement(%22form%22)%3B_form.%20setAttribute(%22target%22%2C%20%22_blank%22)%3B_form.%20setAttribute(%22action%22%2C%20%22https%3A%2F%2Frab.io%2Fpath%2Fto%2Fshortener%22)%3B_form.%20setAttribute(%22method%22%2C%20%22POST%22)%3Bvar%20_input%20%3D%20document.createElement(%22input%22)%3B_input.setAttribute(%22name%22%2C%20%22url_variable%22)%3B_input.setAttribute(%22type%22%2C%20%22hidden%22)%3B_input.setAttribute(%22value%22%2C%20location.href)%3B_form.appendChild(_input)%3B_form.submit()%7D)()

You select all that and drag it to your bookmark toolbar.

So a few things are going on here.

  1. I was initially going to just do a GET call and use a query string, but it got messy with some URLS having encoded/decoded variables. So I decided to go with a POST method call because those input variables are easier to manage.

  2. I'm creating a pseudo FORM on the current page and then creating the required form variable url_variable that will store the location.href (location of the current page I'm on)

  3. Finally I submit the pseudo form to a new page/tab that will bring me to the URL shortener PHP page I have set up to create the new (or old variable if it was previously generated) and display it on the screen.

Now, there is a library called YOURLS that does URL shortening using PHP, but I went with creating one from scratch (yes I'm stubborn).

This is what the PHP page looks like:

<?php 

    if (!isset($_POST['url_variable']) || $_POST['url_variable'] == "") {

        header("location: https://rab.io/");

    } else {

        $url_variable = (strpos($_POST['url_variable'], "http") === false) ? 'http://' . $_POST['url_variable'] : $_POST['url_variable'];
    }

?>

<?php

    $dbh = new PDO("mysql:host=DB_HOST;dbname=DB_NAME", "DB_USER", "DB_PASS");

    $stmt = $dbh->prepare("CALL P_INSERT_URL(:URL_LOCATION_IN, @URL_ID_OUT, @URL_NAME_OUT)");

    // bind the variables to the statement
    $stmt->bindParam(':URL_LOCATION_IN', $url_variable, PDO::PARAM_STR);

    // call the stored procedure
    $stmt->execute();

    $output_base_url = '/s/' . $dbh->query('SELECT @URL_NAME_OUT')->fetchColumn();
    $output_url = 'rab.io' . $output_base_url;

    $url_id = $dbh->query('SELECT @URL_ID_OUT')->fetchColumn();
?>

Basically I look for the url_variable and then send it into the stored procedure in my database. In the stored procedure, I just insert a new record if no current record exists. If an old record exists, I simply bring back that old record.

Final Thoughts

So at this point, I (even you) can convert any website into a short link of your liking and personalize it. It was a pretty great experience to having create one within a day's worth of time.

Next Steps

I want to take this even further and be able to upload files and create short links to them via this website kind of like how CloudApp does it. Their service is great, but you have to pay for the good stuff -- so I'd rather just build one on my own :].

If you need any help with this, shoot me an email or even comment below. Thanks for reading!

DISCLAIMER: My code used is very primitive and probably needs a lot of work to meet best practices guidelines. But this was just a quick and dirty way of going about it. I'll make improvements as time goes on.