In this age of social media it’s necessary to have short links to website content. Sending URLs with long paths uses up precious characters in a tweet that can be better used for communication. To facilitate this, various services have sprung up like tinyurl.com, bit.ly, is.gd, goo.gl and many others. Silva should offer a native facility so content authors can make and manage short URLs within the CMS itself.
Instead of sending a URL such as:
http://www.yoursite.com/department/news/articlename (51 characters)
It’s much better to send a URL like:
http://yoursite.com/jUe8eg (26 characters)
This uses the domain name of the current site (which will probably be a virtual host) and appends a code that gets converted to the full path upon request. Thus a site visitor ends up at the ‘long’ URL.
Functionality and usage
When an Author wants to make a short URL she must be in the SMI. The URL shortening tool is available in the Settings menu, listed in the optioned button (called "Short URL Tool"). The screen contains three forms:
1. Get the Short URL
2. Create a Custom Short URL
3. Manage an Existing Short URL
These three forms will also be the order of implementation. First we build and test Form #1 and #2, and finally #3, which requires extra form elements and functionality.
In order to get a short URL the author must navigate in the SMI to the object they want to link to. This can be any Silva object that is ‘linkable’. You can link to documents, containers, images, files, news viewers, etc. If not already in it, the Author goes to the "Short URL Tool" subscreen.
Form #1: Get a Short URL
This form presents one field containing the auto-generated short URL. The URL has an absolute path including ‘http://‘ (not https, but this might need to be an option someday). When the Author focuses the field, the text in the field is automatically selected and (depending on the OS) placed on the Author’s clipboard [ref: js code on is.gd]. A jGrowl Notification appears.
Form elements
Title: Get a short URL
Description: Lorem ipsum....
String field for URL: Copy URL
Notification onfocus: The link has been placed on your clipboard.
Form #2: Custom Short URLs
One can also create custom short URLs by suggesting a name segment. Instead of using a code like ‘jUe8emg’ one can create short URLs like:
http://yoursite.com/HappyNewYear (32 characters)
This provides a memorable URL that’s better for communication since the path contains meaning as opposed to gibberish. It’s especially effective for usage in other mediums like email and print. Marketing will jump for joy about this feature.
The form has the title “Create a custom URL”. A string field for the suggested name is followed by a "Create custom URL" button. When the Author presses the button the system validates the input against invalid characters (first with js) and then checks if the name already exists:
0. If the name already exists the form returns with a feedback Pointer Box explaining that the short URL already exists and that URL links to: [hyperlink to the target]. The Author can either suggest a new name, or manage the existing short URL. The name gets automatically filled in below in the “Manage an existing short URL” form.
1. If the name doesn’t exist, a string field appears containing the entire short URL. The text in the field is pre-selected and (depending on the OS) placed on the Author’s clipboard [ref: js code on is.gd]. A Notification appears and explains this.
The Author can fill in a new value and create another custom short URL such as GelukkigNieuwjaar. Thus the Author can create multiple custom URLs for the same piece of content.
Form elements
Title: Create a custom URL
Description: Lorem ipsum....
String field for URL name segment, preceeded by the domain, e.g. "http://yoursite.com/": Name segment
Submit button: Create custom URL
Ajax string field for entire URL: Copy URL
Notification: Custom URL created. The link has been placed on your clipboard.
If a custom URL(s) already exist for this item, it/they appear listed in string fields as described with the short URLs above. If there are three existing custom URLs, three string fields appear to make them easy to copy.
Form #3: Managing Short URLs
Existing custom short URLs can be managed. They can’t be deleted, but they can be modified. Thus a name like ‘HappyNewYear’ can be edited the next year to have a different destination. Existing short URLs can be modified from any location in the SMI.
When an Author knows a name already exists she can fill in the name and press the “Modify” button:
0. If the system doesn’t find the name it presents a feedback Pointer Box that explains this and the Author can try again. Could be a typo so the field should be sticky.
1. If the name does exist the current target is presented as a hyperlink and a “Lookup” button appears underneath. The Author must press the button and lookup the new content she would like to link to. After looking up a new item she must press the "Save changes" button. The existing short URL gets updated and is displayed in the string field.
Form elements
Title: Manage an existing short URL
Description: Lorem ipsum....
String field for existing URL name segment, preceded by the domain, e.g. "http://yoursite.com/": Name segment
Submit button: Modify URL
Ajax System Message with hyperlink linking to the found target: This URL currently links to [hyperlink/links to SMI preview]
Ajax Lookup field1 (button): Link target
Ajax submit button: Save modified URL
Ajax string field for entire URL: Copy URL
Layout
The #1 and #2 forms should not be merged into one form that does two things or uses disclosure triangles, etc. Just like is.gd does it, we want to have one form for each process. However since we’ll have the three forms in one screen they can interact. For instance when a custom URL turns out to already exist, it should be filled in in the string field in form #3.
There are three forms of feedback, Notifications (jGrowl), Pointer Boxes that point to a field, and a System Message (e.g. "This URL currently links to....") which gets rendered in the form as a p with class="message".
service_shorturls
A Silva service in the ZMI will need to be created that provides configuration.
URL Shortening Parameters
Assuming we use a library for the URL shortening, the following parameters need to be possible or implemented:
- Minimum length of short URL: default 5 chars
- Existence check: the code must check that it doesn't already exist in Forest as well
- Support a configuration for a short domain name, e.g. 'infr.ae' instead of 'www.infrae.com'
- If an Author is wants a short url to .../index, it should display the short URL of the container (thus '/index' will never be a destination)
- ....
Future features
- Stats for the short URLs (number of times accessed)
- Management overview of all URLs in the system
- Shortening external URLs (soon)
- Invalid characters in URLs will need to be a configurable list
More info
Try out http://is.gd/silvashorturl
See stats: http://is.gd/silvashorturl-
The difference between Short URLs and Forest Paths
When an Author creates a Short URL the link gets expanded to the full path when somebody visits it. Thus:
http://yoursite.com/jUe8emg
becomes:
http://www.yoursite.com/department/news/articlename
With Forest Paths the URL stays short. A URL such as:
http://www.yoursite.com/department/institutes/institutename
can be made into a Forest Path such as:
http://yoursite.com/institutename
With a Forest Path, when a web visitor goes to the URL it won’t expand and it functions as the root of a subsite. The visitor can navigate, say, to a news page, and the URL stays short:
http://yoursite.com/institutename/news
Read the related blueprint that explains the Forest Paths concept and takes it further, allowing Site Editors to create entire alternate silvas of content.
Footnotes
1. If a user is making a short url to .../index, strip the '/index'.