To make the most of having my own URL shortener with YOURLS and having it integrated with WordPress, I wanted to provide each article’s short URL for others. My shortened URLs start with 404ts.com and they hopefully make sharing on Twitter, texting, or just remembering how to get back to an article much easier. Just providing the shortened URL could be helpful but are there other things that I’ve seen or used around the Internet that makes short URLs more accessible and useful? I’ve seen the ‘Tweet this’ button to send the URL to Twitter, a button to copy the shortened URL to the clipboard, and even a QR code to easily get the website onto your mobile device.
YOURLS, in my opinion, is a great tool to have for any website owner. For the same reason that Bit.ly is becoming more popular and why Twitter launched their own URL shortener (http://t.co/), controlling your branding and the resulting analytics is data that people want. After YOURLS is installed on another domain, you can use the YOURLS WordPress to Twitter plugin to integrate automatic tweeting of your short URL to your followers. You can then also use the YOURLS shorturl widget plugin to be able to access that shortened URL and put it anywhere a widget can go.
I started off using these plugins just to provide the 404ts.com URL for others to copy and paste. I also included the Tweet button to allow others to easily recommend the article to others on Twitter. You can use the Twitter button to pass along the current page or a given address. Within the YOURS shorturl widget, I was able to pass along the shortened URL. That allows me to use the YOURLS analytics and push out my branding, though the Twitter t.co url likes to automatically insert itself too.
After I started paying attention to this area of websites, I noticed other sites provided buttons that you could just click once to copy the URL to the clipboard. I began looking into this and found out some interesting background. For security reasons, most things can’t just write to the clipboard. That’s a good thing because I know I keep important things in the clipboard even while I browse around and I wouldn’t want them to be over-written while I multitask load a website. About the only web thing that can write to the clipboard is Adobe Flash and that requires a user-initiated action to copy to the clipboard; it’s not something you can just allow upon loading the Flash movie.
Looking further, there’s a project on Google Code called Zero Clipboard that provides the exact functionality we’re looking for. You upload the flash movie and Javascript file that they provide and then make the changes they instruct to your webpage and you should be able to have a working copy to clipboard button. Zero Clipboard uses a transparent Flash movie to load over top of an object (like an image, text, or a CSS created button) and then the Flash movie takes care of writing to the clipboard. You can see a demo of how Zero Clipboard works for a single object and for multiple objects.
Making life even easier for those of us on WordPress, you can download and activate the WordPress plugin called Copy in Clipboard. This plugin uses Zero Clipboard but does all the behind scenes things needed to make it work. Once the plugin is activated, all you have to do is edit your theme or create an object inside a widget with a class of “copy”. That object will now have the transparent Flash movie lay over top of it to allow copying directly to the clipboard. What gets copied to the clipboard depends on whatever the Copy class object has in its title attribute.
Using the YOURLS: Short URL widget, we can create a button in the form of a span, style it with some CSS, and assign it the copy class. We then use the [url] code in the title so that we’re assigning our shortened URL.
With the short URL widget, the Copy in Clipboard plugin, and the Tweet button inside the widget, you get what is seen above. I also included a QR code to handle the case of easily sending an article to a smartphone. That is done through another WordPress plugin called QR Code Tag. As you can see above, you just surround whatever you want encoded into the QR code with the qrcodetag tag and it will be rendered into a 2D barcode. All of the previously mentioned implementations then lead to this:
You should also be able to see it below this for a live demo.