WordPress How To – Create Your Own Vanity URL aka Short Link for Twitter and More

You’ve seen short URLs (Uniform Resource Locators, or simply web addresses, or links) before, right? Addresses starting out with goo.gl, bit.ly, or wp.me, for example. The latter, by the way, is by the makers of WordPress.com, Automattic. If you’ve already installed their JetPack plugin, then you can use the included ULR Shortener service for free on your self-hosted WordPress site. If you don’t need the full JetPack features, you can go for JetPack Lite. Please note that currently, it works for regular posts only, no luck with “custom post types”.

Lately, the trend is moving towards “vanity short URLs”, meaning you try to find and register a suitable three-letter domain name in a top-level domain like me, cc, and so on. If you’ve got a web site and you tweet regularly to an audience of thousands, this could really be something useful, provided that the short domain name is somewhat memorable but most of all similar to your actual site’s domain name.

You could host a short URL service yourself using PHP scripts like YOURLS or Lessn More. But if all you want is a quick “poor man’s way” of shortening your site’s internal web addresses, that you can set up within minutes, I suggest this solution:

1. Install Short URL Plugin from the WordPress Plugin Repository

Why did I choose this one among several short URL plugins? For one, I find it easy to set up, and naturally it works with the custom post types I’m using, for example “reviews”. I’ll show you how.

2. Set a few parameters for Short URL

Nothing dramatic really.

The following screenshots show what I did, in sequence:

ifihadthecash.org - Open Settings Short URL

Access Short URL settings

ifihadthecash.org - Short URL parameters

 

ifihadthecash.org - Parameters

So far, it should be self-evident, right? The next screenshot is interesting:

ifihadthecash.org - How many characters in a short URL

It’s your choice how long your URL should be. I chose 4 characters, and naturally I removed the prefix “www.” That in itself saves four characters. For a short messaging service like Twitter, that’s good enough to have room for one more nice four-letter word like… love?

There’s one more box with settings (meta boxes as they’re called) titled Display the short URL?, but I ignored that one completely because I will place the short link of the current post inside my post templates.

If you’re happy with having the short URL displayed above or below every post, then by all means configure those settings. You may then happily ignore Step Three, but you will miss out on the neat trick how the short URL is displayed to your visitors.

3. Add the WordPress function wp_get_shortlink() to the exact location where you want the short link appear – plus a neat trick by Otto

After you’ve installed the Short URL plugin and gone through the above parameters, you can already get the short link of your post. If you open a post for editing, you will see a new button Get Shortlink next to Edit. When you click that, you get the short url of the post you’re working on, but that does not mean it will automatically appear for your site visitors after you hit Publish. The Short URL plugin could display it for you, as we saw in Step Two. I prefer to put it directly into my post templates, though.

I am currently not using the short link on my site, but I did use it during testing. That’s how it looked like:

ifihadthecash.org - Short Link

Who knows? I might still add the short link to the live site.

Because I use a custom post type named “Reviews”, I have a post template for the content named content-reviews.php. If you’re not using custom post types, the best bet is that content.php inside your theme folder is where you add this PHP and HTML snippet (content.php would be called by single.php, sort of the parent post template, right after the famous WordPress “loop” begins):

I put all the items, like the print and email buttons and underneath the tag icon, into an unordered list. The short link gets one <li> element. Because wp_get_shortlink() only returns the short link that the plugin produced but does not display it, I use “echo” to actually output it onto the page.

You might notice the term “onclick” inside the snippet. What it does is automatically select the short link once you click into that input box. It’s a neat trick by Otto and definitely makes it easier for your visitors to grab your post’s short link. The rest is just styling, yeah, don’t you get tired of those rounded corners?

Here’s the style I use, plus input element style from bootstrap  that you can’t see (built into Cyberchimps):

 

4. So what if people share my post to Twitter? Will the short link be used automatically?

It depends on how you implemented social sharing for your site. I went through at least a dozen or so “social sharing” plugins until I found one that worked fine for my purposes: Social Media Feather. It’s the only one I remember to specifically say that it supports WordPress short links. Besides that, it has a well functioning shortcode, allowing me to place the sharing buttons precisely where I need them, even inside a shortcode (a shortcode within a shortcode, and yes, it works).

At the top of Social Media Feather‘s settings, you must tell it to Use Shortlinks. And here’s an important note: you must tick off Share Full URL, because that would override the use of the short link, at least in my experience. If you have Use Shortlinks ticked but no plugin like Short URL to create a short link, Social Media Feather uses the WordPress page id, that is WP’s standard short link based on the wp_get_shortlink() function, instead of the permalink.

The settings to make it work just fine with Short URL should look like this:

ifihadthecash.org - WordPress How To – Create Your Own Vanity URL aka Short Link for Twitter and More

 

That’s all you have to do in Social Media Feather‘ settings, unless you want to tell it to automatically add the sharing buttons before or after posts. I use its shortcode

to display them in my own shortcodes and post templates, for example at the bottom of an infobox of a TV review like this:

ifihadthecash.org - Sharing Buttons inside infobox

So how does the URL look when I click that Twitter button? Here’s how:

ifihadthecash.org - Twitter

Somewhat vain, but not a full “vanity url”. Just right for half-vain people.

It is not the shortest and cutest URL in the websphere but it is personalized by having your domain name in it, and that’s something, and it’s easy to set up.

5. This is all pretty but what if I want the Short URL in a sidebar widget? Can you help me out, bro?

I thought that since GTA V we’re all homies forever, but never mind. I believe what you want to achieve is something similar to what the Indian tech blog Techlila.com is doing. Somewhere inside the right sidebar, they have this:

ifihadthecash.org - Shortlink in sidebar

A shortlink with a proper vanity URL in the sidebar.

Their short URL turns into a clickable link which, when clicked, loads the same post it’s on. This is all fine but I think Otto’s neat trick above is slicker: you don’t really want to load the same post again, but you want to click into the short URL and have it selected right away so you can copy and paste it into your Tweetdeck or whatever you’re using to tweet.

So how are we going to create a sidebar widget? Fear not, here are the steps:

1. Go to the Dashboard -> Appearance -> Widgets and drag the Text Widget over to the sidebar

ifihadthecash.org - Text Widget

2. Paste the WordPress function wp_get_shortlink, including Otto’s trick

ifihadthecash.org - Add Short URL code to Widget

Don’t forget to Save after you’ve pasted the above code snippet into the Text widget.

3. Add the following PHP snippet to your active theme’s functions.php

The Text widget is really just for that – text. It’s not meant to be a place where code is executed. There are a number of plugins that go beyond this limitation, but I believe in limiting the number of plugins to those you really can’t live without, and I think this problem is too trivial to warrant another plugin install.

All you need to do in order to enable the Text widget to execute PHP code is to add the above snippet to your theme’s functions.php. That’s it.

The above snippet is taken from Emanuele Feronato’s blog. If you want to know what the above snippet does, please check out his blog.

4. Load any page with a sidebar on it to see the result, and of course, style it as you like

ifihadthecash.org - Text Widget Executing PHP

Of course, the widget title is too large and too long now. Naturally, you will want to style it according to your site’s design. You will know what to do.

Hope you found something useful in this WordPress How To. If so, do let me know in the comments section or contact me via the Contact page. Thanks!

One last thing: I spent considerable time writing up a WordPress tutorial such as this. If you find it useful and you’d like to thank me, then simply share it with one of the share buttons below. Since this site is still new, the more people share this tutorial, the more people will be able to find it because of the way modern search engines work. I thank you!

References:

http://wordpress.org/plugins/jetpack/

http://wordpress.org/plugins/jetpack-lite/

http://yourls.org/

http://lessnmore.net/

http://wordpress.org/plugins/shorten-url/

http://codex.wordpress.org/Function_Reference/wp_get_shortlink

http://codex.wordpress.org/The_Loop

http://ottopress.com/2010/shortlink-trick/

http://wordpress.org/plugins/social-media-feather/

http://www.techlila.com/guest-blogging-right-and-wrong-way-to-guest-blog/

http://www.emanueleferonato.com/2011/04/11/executing-php-inside-a-wordpress-widget-without-any-plugin/

Share:Share on FacebookTweet about this on TwitterPin on PinterestShare on Google+Digg thisShare on StumbleUponShare on TumblrShare on RedditShare on LinkedIn

Leave a Comment

Your email address will not be published. Required fields are marked *

Follow

Get every new post delivered to your Inbox

Join other followers: