WordPress: Tweet shortened URL of current page to Twitter

One of the most requested pieces of code from the current iteration of 5thirtyone.com are the share links accompanying each article. Each link automatically grabs the current URL & title (if applicable) for the post or page and broadcasts it to the selected social network. This particular tutorial focuses on sharing your content via Twitter. By the end of this tutorial, you and your readers will be able to send content to Twitter directly from a WordPress page using a shortened version of the URL without a plugin.

Understand the WordPress permalink

The first time you install WordPress, your site is setup with a few default settings. One of which is the generic nondescript permalink:

http://yourblog.com/?p=123

Ideally, one of the first changes you should make to your site after a clean install is to update the permalink structure to something a little friendlier:

http://yourblog.com/year/month/this-blog-post

To update your permalink settings navigate to Dashboard > Settings > Permalinks. Note that the Apache mod_rewrite module must be enabled on your server and .htaccess file must be writable. Irregardless of any changes you make to the permalink structure, your posts will always retain their original unique Post-ID. In the example above, the Post-ID would be 123.

Unique WordPress Post-ID

With pretty permalinks enabled, you can still see this unique ID when you hover on the URLs inside of your Dashboard (check your browser status bar). In the above screenshot, you can see the unique ID at the end of the URL post=2071. This unique ID is what we will use to generate the shortened version of a page URL when Tweeting a page.

Maximize your 140 character limit on Twitter

Twitter 140 character limit

Twitter enforces a 140 character limit. Do you really want a long URL eating up valuable characters? See this example if I were to share a link from IBoughtaMac:

http://iboughtamac.com/2009/04/02/busy-bees-making-money-with-on-the-job/

If I wanted to share the link via Twitter, I would only have 67 characters to add any of my thoughts regarding the post:

Sharing a link to iBoughtAMac

Imagine if the URL had been shortened to something like:

http://iboughtamac.com/s/1352

The shortened URL (just an example Post-ID) turns the previous 67 remaining characters into 111 characters of free space. You maintain your personal "brand" – something you lose when you shorten URLs using a service like TinyURL.

First step: Modify your .htaccess file

Even with a custom permalink enabled (what your visitors see), WordPress will continue to redirect any URLs which point to the default ?p=Post-ID properly. We’re going to use this to our advantage when sharing shortened URLs. Using an FTP client, open your .htaccess file. Invisible files are hidden by default for most FTP clients so adjust your view settings if necessary. If you have customized your permalink structure, you will already have one of these files on your server. If not, simply create one now. Enter the following somewhere near the top:

# Redirect posts based on post-id
RewriteEngine On 
RewriteRule ^s/([0-9]+)$ ?p=$1 [R=301,L]

This rule tells Apache to redirect URLs like http://blog.com/s/1 and http://blog.com/s/9999 to http://blog.com/?p=1 and http://blog.com/?p=9999. Of course, because your WordPress site will identify posts based on their unique ID, a visitor will immediately see that shortened URL redirect to the proper friendly version http://blog.com/2009/04/20/my-new-dog-named-pinocchio-from-europe.

Second step: Add your ‘Tweet This’ link

Where and when you present a ‘Tweet This’ link is up to you. The raw HTML + PHP is this little nugget:

<a class="share-via-twitter" href="http://twitter.com/home?status=Reading: <?php the_title(); ?> <?php echo get_option('home'); ?>/s/<?php the_ID(); ?>" title="Tweet this post">Tweet This</a>

With a little bit of CSS and Komodo Media’s awesome mini social icon set, you can transform the plain link to look like a button.

Extras: Non-Twitter social links

You’ll notice that these links do not make use of the shortened version of a URL. There really isn’t a reason to shorten your site URLs when sharing through these services because 140 characters maximum is not enforced.

Digg This

<a href="http://digg.com/submit?phase=2&url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Digg this">Digg This</a>

Add to Delicious

<a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Add this page to Delicious">Add to Delicious</a>

StumbleUpon

<a href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Stumble this page">Stumble This</a>

Update: Achieve the same results without touching .htaccess

Dan Cameron whipped up his own implementation of the shortened URL trend for WordPress users. His method requires a snippet of code in functions.php to achieve the same results. Check out his write-up here: Short post URLs.

Update #2: More social links for your site

Lauren commented introducing even more social networking links to add to your website.

Discuss - 33 Comments

  1. redwall_hp says:

    Nice post! I’ll be linking to it in a post sometime in the next few days.

    I’ve had a similar idea for awhile now, but I never got around to writing a post about it. It seems that *everyone* has taken the idea and run while I’ve been busy with other things though. :)

  2. Interesting idea. Thanks for the tip :)

  3. Sam says:

    I figured out equivalent rewrite rules if you’re using nginx instead of apache. Put this in before any wordpress relevant rewrite rules (that you may have put in for SEO purposes):


    location /s {
    rewrite ^/s/(.*)$ http://www.gosammy.com/index.php?p=$1 break;
    }

    I wasn’t able to get it working without putting an absolute URL in there (nginx noob), but it works.

    • A better way of doing this with Nginx is:


      location /s/ {
      rewrite ^/s/([0-9]+)/?$ /index.php?p=$1 permanent;
      }

      That will perform a *301 redirect* only if it’s digits, and allow an optional trailing slash. It should work fine without the absolute URL, but that depends on your configuration.

      Setting “server_name_in_redirect off;” may or may not fix your issue, depending on your config.

  4. Devin Reams says:

    Excellent point, Derek, I like this. But why not advocate using the /?p=id link? Why go through setting up a separate rewrite rule?

    Is it for tracking purposes?

    • Derek says:

      Just an example of what can be done. The first thing I look at when I visit a site is the URL structure. Personally, I prefer the look of /s/123 versus ?p=123.

  5. Si Jobling says:

    Try Rob Allen’s Shorter Links WordPress plugin which uses the rev=”canonical” ‘standard’ that has appeared recently.

    I’ve implemented it on my website which redirects all articles based on the post ID from the root.

  6. jiltin says:

    Nice article, explaining the perma link and the use of shortening the url.

    Use the Tweet This, a WordPress Plugin for Twitter.
    This provides tinyurl plus tweet, digg, buzz , StumbleUpon links.
    This plugin is very stable and can be installed in minutes, enabled easily.
    See my article on tweet this here http://tinyurl.com/cc4so3
    All you need to do is just click these button comes at the bottom of post.

  7. [...] Tweet shortened URL of current page to Twitter – Derek Punsalan of 5THIRTYONE explains how to shorten your own blog’s URLs using .htaccess to leave more room for text in Twitter. [Link] [...]

  8. Tschai says:

    A week ago I already/also came to this conclusion and wrote a mini-tut about it: http://aytemir.com/need-a-short-url-service-try-wordpress/

    I, however, did not consider the ‘Modify your .htaccess file’ step: is it really necessary? ‘Cause it seems to work just fine without…

    • Tschai says:

      Forget to mention that this way you’ll be keeping your ‘own’ link juice and you don’t have to rely on third party services…
      ;)

  9. [...] WordPress: Tweet shortened URL of current page to Twitter – Derek Punsalan – 5ThirtyOne — 11:28pm via [...]

  10. [...] back in 2006 after hearing about Shorty on Derek Punsalan’s blog and now I see Derek is using another method of shortening his URLs. As he points out, you get to maintain your own personal brand by having the shortened URLs come [...]

  11. [...] concept. Rather than steal Derek Punsalan’s thunder, I will point you in the direction of WordPress: Tweet Shortened URL of Current Page to Twitter. One of the most requested pieces of code from the current iteration of 5thirtyone.com are the [...]

  12. lasharor says:

    Why not use the plugin “TwitMe” ?

    • Derek says:

      Last I checked that plugin did not work if you enabled any other Twitter plugins. Additionally, the manual method described above gives a user full control via .htaccess on how their URLs will look.

  13. [...] Tweet shortened URL of current page to Twitter – Derek Punsalan of 5THIRTYONE explains how to shorten your own blog’s URLs using .htaccess to leave more room for text in Twitter. [Link] [...]

  14. [...] that wordpress has a form of url shortening built in.  sort of.  as he explains in his method of creating a tweet this link from your wordpress blog with shortened urls, when you first setup wordpress, all your blog post urls look like [...]

  15. [...] Tweet shortened URL of current page to Twitter – Derek Punsalan of 5THIRTYONE explains how to shorten your own blog’s URLs using [...]

  16. Dan Cameron says:

    You could do something very similar with the built in WP filter generate_rewrite_rules.

    This method is probably the best solution but could be made even more basic.

    Maybe I’ll cook something up tomorrow and make a plugin out of it as well as document how to just paste the code in your functions.php file if you rather not deal with a plugin.

  17. [...] might want to subscribe to the RSS feed for updates on this topic.I just noticed a trend recently ( maybe not too recent ) on how to make your WordPress Post URLs short for sharing, especially with Twitter’s [...]

  18. ryan wines says:

    Where can I find any available info on the share links floating widget you have on the left side of your posts and main pages. I read this post about how to shorten the URLs, but cannot find code or info anywhere on how to create/recreate the actual widget you have – the awesome thing that floats and stays on the screen, no matter where I scroll (with the Tweet This, Digg This, Save to Delicious, and Stumble This links).

    Can you direct me somewhere where I can add something like this to my own site?

    Thanks Derek!

  19. Lauren says:

    This is great. Works like a charm.

    Anyone know how to build the social link code for Facebook (similar to the ones above for Digg, Stumble)?

    This would be the last piece to my puzzle.

  20. Bart says:

    Great tutorial and a neat little add-in that gives the user total control over formatting of the link whilst maintaining link juice! :-)

    One small problem… when the article title includes an ampersand (&) the text that’s copied over to Twitter gets dropped from this point on (substituting it with a + doesn’t work as it gets dropped). Does anyone now of a fix for this?