This WordPress tutorial shows you how to automatically add custom Bitly Pro short links (URLs) to your WordPress posts. Add shortlinks to Thesis.

How to Add Bitly Custom Short Links to WordPress Posts

Written by in Tutorials |

Custom Bitly Short Links

Custom Bitly Short Links

First, scroll down to the bottom of this post and check out the working (and clickable) Bitly Short Link that is automatically generated and added to the end of all the posts here on Designpx.

This is what we’re going to recreate for you.

In a future post we’ll go over how to integrate Bitly with the Twitter @Anywhere service and if you follow these steps you’ll be way ahead of the game.

Let’s get started…

Why Create a Custom Short URL?

A custom short URL is a perfect tool for building your brand (whether personal or business) in this micro-sharing world we currently find ourselves in.

Users will begin to recognize your fancy shortened URLs and when they see them plastered all over social networks, they’ll know they can trust you…or at least they’ll know who to blame.

The process is rather easy and consists of 5 steps:

Sign up for Bitly

First, you need a Bitly account so head over and sign-up for Bitly Pro. It used to be that one needed to apply for a “Pro” account but now those features are included with a standard Bitly account.

Buy a short version of your domain

Head over to Domai.nr and start searching for available mini-versions of your domain. For instance the domain here is designpx.net (12 characters) and I scored dpx.me (6 characters) which is half the size. Once you’ve found the perfect short URL, be sure to register it.

Setup Bitly with your short domain

Once your new short domain is purchased head back to your Bitly Account Settings page and look for the following settings:

Bitly Settings

Click the Add a Custom Short Domain link, enter the short URL you just bought and click Add.

DNS Settings

Now all you have to do is set the DNS A record for your short domain to point to 168.143.174.97. You can do this by logging in to the domain registrar you just bought your short domain from.

If you are using a subdomain for your custom short domain, set a CNAME in your DNS record that points your short domain to cname.bitly.com.

Once this in done, click the Verify button on the Bitly Custom Domain Settings page.

Tracking Click Traffic

In order to track click traffic from your newly setup custom short URL go back to the first Bitly Account Settings page (see the image above) and choose Add a Tracking Domain.

Enter your main (long) domain here and select Add. You’ll then have to verify that you own that domain in one of three ways:

  1. Add an HTML tag to your sites homepage.
  2. Upload an HTML file to the root of your site.
  3. Or…make a DNS change by adding a CNAME record.

Once done, Verify.

Install and configure the Bit.ly Shortlinks plugin

The Bit.ly Shortlinks plugin uses the Bitly API to automatically create short links for every post and page on your site. It’s simple, easy to setup and created by Joost de Valk, a well-known WordPress developer.

Once installed and activated, the plugin needs your Bitly username and API key. To add that, open your sites wp-config.php file and add the following before the “stop editing here” line:

define('BITLY_USERNAME', 'YOUR_USERNAME_HERE');
define('BITLY_APIKEY', 'YOUR_API_KEY_HERE');

Add your short link to your WordPress posts

Now all we have to do is add the short link to the bottom (or wherever you’d like) of our posts. There’s a few ways of doing this depending on what theme you’re using. I’m going to stick to a general way that will work for all WordPress users and a way that Thesis theme users can add the short link.

General (for all WordPress users)

Open up your themes functions.php file and add the following:

function add_post_content($content) {
	if(is_single()) {
		$content .= '<p class="bitly-shortlink">Shortlink: <input type="text" value="' . wp_get_shortlink() . '" onclick="this.focus();this.select();" readonly="readonly"> <small>(click to copy)</small></p>';
	}
	return $content;
}
add_filter('the_content', 'add_post_content', '0');

Thesis Theme Users

Open up your custom_functions.php file and add the following:

//ADD BITLY SHORT LINK TO BOTTOM OF POSTS
function my_bitly_shortlinks() {
	if (is_single()) { ?>
		<p class="bitly-shortlink">Shortlink: <input type="text" value="<?php echo wp_get_shortlink(); ?>" onclick="this.focus();this.select();" readonly="readonly"> <small>(click to copy)</small></p>
	<?php }
}
add_action('thesis_hook_after_post','my_bitly_shortlinks', '0');

Adding Style

To make the short link look the way it does here on Designpx add the following to your themes CSS (for Thesis Theme users add this to your custom.css file and add .custom before each):

.bitly-shortlink {font-weight: bold;}
.bitly-shortlink input {
	background: #eee url(images/chain.png) no-repeat 5px center;
	padding: 5px 5px 5px 26px;
	width: 160px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	border: 1px solid #e1e1e1;
}
.bitly-shortlink small {color: #777;font-weight: normal;}

The chain image can be downloaded here: chain.png

Need help? Ask away in the comments…

Enjoy this post? Consider sharing it:

Avinash D'Souza August 19, 2011

Jason, is there a way to use bitly like you do but without the plugin?

Jason Manheim August 19, 2011

Absolutely, you could hard-code what the plugin is doing into your theme/functions.php but that’s a bit beyond the scope of this tutorial. 😉

Ari Herzog February 6, 2012

Do you have any experience using a short url (powered by bit.ly pro) to be the url in that tweetbox? I once had everything working fine; but then bit.ly changed something and now it’s not populating the url. Maybe I could email you some code?

Jason Manheim February 6, 2012

I certainly do. Go ahead and shoot me an email: jason@designpx.com.

Avinash D'Souza February 19, 2012

Would this code work with this Bit.ly plugin too? http://yoast.com/wordpress/bitly-shortlinks/

Jason Manheim February 20, 2012

Absolutely. In fact, it works better with that plugin. I’ll have to update this post to reflect that.

Avinash D'Souza February 27, 2012

That would be awesome! Particularly, since that particular plugin doesn’t seem to work the same with WP 3.3 as with WP 3.1…

Jason Manheim February 27, 2012

Everything should be updated. Let me know if I missed anything.

Avinash D'Souza February 27, 2012

Damn, you’re fast! 😀 Thanks a ton Jason! Really appreciate this…

Wand'rly Magazine April 29, 2012

Nice, really great work! Saved me several hours of custom coding for our short tag solution.

Jason Manheim April 29, 2012

Glad it helped. 🙂

Avinash D'Souza June 2, 2012

A bit of help Jason, I’ve deployed your code in exactness but I’m not able to get the click to copy bit working the way you have.

I double click the shortlink on my posts but it never copies. Example: http://www.avinashdsouza.me/null-set/who-in-the-world-is-richard-barratt/

Are you using a separate script to handle this?

P.S.: Have you tried out the new Disqus?

Jason Manheim June 2, 2012

Try adding readonly="readonly" to the input (I updated the code above). It doesn’t actually copy the short URL to your clipboard (you need a separate script for that) but it does highlight the text on click.

Didn’t even know there was a new Disqus, I just requested an invite.

Avinash D'Souza June 7, 2012

Ok, now unless I’m missing something here, the script+readonly attributes aren’t working on this site either. I’m clicking the custom url at DesignPX…but no joy. Unless there’s some cache issue at my end…

Jason Manheim June 8, 2012

Seems to work for me. Tried it in Chrome and Firefox with no issue. I also tried adding the readonly attribute in Chrome Developer Tools on your site the other day and it seemed to work…now it’s not.

Something is conflicting and I’m not sure what it is.

What did you do, Avinash!?…you broke it. 😉

Jason Manheim June 7, 2012

New Disqus is in action. I really like it so far.

Avinash D'Souza June 7, 2012

Pretty sweet huh? 🙂 Has an extremely clean look to it…the only thing I don’t like is the similarly visually ranking options. I mean, what’s the most important think in a comment feed? The reply button. Everything else SHOULD ideally take a backseat.

Jason Manheim June 8, 2012

Totally agree with you on the reply button issue. I’m also really digging the Community and My Disqus tabs. Great way to move engagement off of just one site and see what people you follow are commenting on elsewhere. The subtle CSS3 effects are really nice, too.

Rich June 14, 2012

Great tutorial! I have it all set up and it’s mostly working, but the shortlink being generated isn’t using my custom short domain. I have my username and API in the wp-config file, and if I generate a shortlink from within bit.ly on the web, it DOES use the custom domain. Any ideas? Example is: http://anxietytalk.com/service-dogs-are-helping-soldiers-with-ptsd/

RunTramp December 18, 2012

Hi Jason, Thanks a lot for this, I have been searching for a solution to adding my custom short URL to the end of my posts for ages! Works like a dream apart from one issue- when I use the functions code it displays the URL box first and then the text after, I am not using the style code as it looks like I want it to without it. How can I change so the text comes first and the box after?

Jason Manheim December 18, 2012

Link?

Matheus Amorim April 7, 2013

Blogger, please…

cwhebert March 1, 2014

Jason, I know this post is a bit old but I have been using this bit of code for the last few years and love it. Do you know how to modify the above code so that it works on an ipad? When you click the bit.ly on an Ipad it does nothing and users are not able to highlight and copy the text? Hoping for a solution as my mobile users has increased tremendously over the last year or so. Thanks for your efforts.

Jason Manheim March 3, 2014

I seem to be able to highlight and copy the link on my iPad. Perhaps there is something else going on with your implementation?