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.

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 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:

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.