Let’s face it, we’ve gone social bookmark crazy. Who among us has the constitution to resist the allure of those cute little icons and oh-so-clever domain names? Take a look at the bottom of this article and you’ll soon realise I’m as guilty of this fad as anyone. But what separates the social bookmark links on Signified apart from others on the Worldwide Web? That’s right – nobody uses them they’re deep-fried in 100% valid XHTML – and soon enough, yours will be too! Taking the Title and PermaLink of this article as an example, let’s create an "Add to del.icio.us" link that will stand up to even the closest scrutiny of Mr Burners-Lee.
The Ugly
The popularly prescribed (and completely invalid) method of adding social bookmark links in WordPress goes something like this:
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">Add to del.icio.us</a>
And, for your (or the plugin author’s) effort, you get this:
<a href="http://del.icio.us/post?url=http://signified.net/valid-social-bookmark-links-in-wordpress/&title=Valid Social Bookmark Links in WordPress">Add to del.icio.us</a>
Which results in the following warnings:
- unescaped & or unknown entity "&title"
<a> escaping malformed URI reference
Now even the most novice of standardistas will quickly point out the use of that nasty little unencoded ampersand (&), and according to the W3C:
Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text.
The solution? Encode it!
The Bad
Ok, our "&" has now become a nicely encoded "&", giving us the following:
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">Add to del.icio.us</a>
Not too bad, but still bad:
<a> escaping malformed URI reference
We still have the little problem of our "malformed URI reference." But what is the validator going on about? Well, according to RFC 1738 (Uniform Resource Locators (URL)):
The space character is unsafe because significant spaces may disappear and insignificant spaces may be introduced when URLs are transcribed or typeset or subjected to the treatment of word-processing programs.
And as you can see, straight after our newly encoded ampersand, we have this space-filled title:
http://del.icio.us/post?url=http://signified.net/valid-social-bookmark-links-in-wordpress/&title=Valid Social Bookmark Links in WordPress
The solution? Encode it!
The Good
Now we know we have to encode those "unsafe" spaces – but how? The trick is to make use of the before, after and display parameters of the_title() WordPress Template Tag in order to have it return the value of the title rather than output (or echo) it to screen. For example:
the_title('', '', false);
Note: Ok, ok – I know you don’t really have to use the_title('', '', false). You could use get_the_title() if you were in the habit of swimming 10 Kilometres below the surface of the WordPress documentation. I’m just in the habit of making clear what is already in plain site!
Now we have the value of the title, we can use PHPs urlencode() function to encode those nasty space characters, before topping it off with the WordPress _e() function:
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php _e(urlencode(the_title('', '', false))); ?>">Add to del.icio.us</a>
And the result:
<a href="http://del.icio.us/post?url=http://signified.net/valid-social-bookmark-links-in-wordpress/&title=Valid+Social+Bookmark+Links+in+WordPress">Add to del.icio.us</a>
100% valid goodness!
