There and Back Again

Adding Supr urls to your site

Over the last couple months I had a chance to help create a great new product for Stumbleupon. Su.pr lets create short urls, publish directly to Facebook and Twitter and gives you great tracking and statistics around them. Su.pr also helps you get more traffic by making it easy to get your content in front of the Stumbleupon community.

Last week we launched our API which lets you integrate shorten and post functionality into any site or application. Today we are adding the ability to use your own domain for shortening. This lets you have urls like http://joshuaeichorn.com/9OPL so your readers can know what domain they are going too before they click on the link.

Now down to the fun part installation.

Step 1, Sign up for Su.pr

Just go to the su.pr homepage and sign up using suprjosh for the invite code (The code is good for 500 sign ups).

Step 2, install and configure the PHP re-director

I’m not going go over this in detail since instructions are already available from su.pr.

Note: when installing the rewrite rule you’ll want to make sure its not catching any of your other pages, I put mine after all my custom rules and added a condition to check the given url wasn’t the name of a file or directory.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^[a-zA-Z0-9]{4}$ supr.php?supr=$0
RewriteRule ^supr_settings.json$ supr.php?check_install=$0

If your doing your URL rewriting in PHP you might want to handle the link detection there instead, but 4 character words with no extension aren’t too common.

Step 3, Test is out

Now that you are up and running any short url created on Su.pr for your domain will be use your domain instead of su.pr for the shortening. If you ran into any problems let me know, I will see what I can do to help.

Details on how things work

  • The settings on your server tell Su.pr if it has a redirector
  • If the redirector is enable all new Su.pr urls for the matching domain are made with your domain
  • Requests go to your server and are picked up by the rewrite rule
  • The redirector on your server makes a call to the Su.pr API which returns a domain redirection url, something like http://su.pr/d/joshuaeichorn.com/abcd
  • The user is redirected back to su.pr and then forwarded to the correct page on your server

The double redirection at the end lets us collect stats and do the required setup for showing the Javascript version of the Stumbleupon toolbar.

6 thoughts on “Adding Supr urls to your site

  1. mattpaul

    Nice work on the product & the HOWTO…

    Now you guys just have to fix mozbar to be compatible with FF 3.5 :)

    Cheers,
    mattpaul

  2. Pingback: Joshua Eichorn’s Blog: Adding Supr urls to your site | DreamNest - Technology | Web | Net

  3. Pingback: Joshua Eichorn’s Blog: Adding Supr urls to your site | Webs Developer

  4. james

    I am attempting to use the su.pr plugin for wordpress. I followed the instructions on: http://www.stumbleupon.com/developers/Supr:WordPress_Plugin/ and the site ins sync’d, but when I create a new post nothing happens. I noticed that if I have the
    “Display option to customize posts to Twitter or Facebook when I add a new blog” checked and include the short url generated by su.pr that the posting appears on su.pr, but not on flickr! Need help. Do I need to altar htaccess file even though I am using wordpress plugin.

  5. Pingback: Is su.pr the best URL shortener?

  6. Keith Hudson

    In the su.pr results, the number of clicks on the shortened link is shown. What is the number in the dark blue button immediately below the number of clicks?