Nested hyperlinks in XHTML 1.1 document

Question

Hi,

I'm doing a simple widget for WordPress that fetches the most recent tweets from the RSS feed provided by Twitter.

This widget parses any link posted on a tweet, it also parses mentions (ie: @username) and trending topics (ie: #nowplaying). For these 3 situations, it creates links pointing to some Twitter feature.

For instance:

"Hi @UserA, check out the song Foo from FooBar that I'm listening,
 it's awesome. #nowplaying"

And it will parse into this:

Hi <a href="http://twitter.com/UserA"&gt;@UserA&lt;/a&gt;, check out the song
Foo from FooBar that I'm listening, it's awesome.
<a href="http://twitter.com/#search?q=nowplaying"&gt;#nowplaying&lt;/a&gt;

Now now I need to add a global link to the whole message, like this:

<a href="http://twitter.com/UserA/statuses/1234567890"&gt;
Hi <a href="http://twitter.com/UserA"&gt;@UserA&lt;/a&gt;, check out the song
Foo from FooBar that I'm listening, it's awesome.
<a href="http://twitter.com/#search?q=nowplaying"&gt;#nowplaying&lt;/a&gt;
</a>

But this code does not validate and it doesn't work anyways (the browsers don't really seem to know what to do with it).

Any suggestions how could I fix this?

Answer 1

Set the link around the date of the tweet and put it before or after the text.

Answer 2

by not doing it.

a tags can't be nested. you could either add a link tag to the end of the status that links back to the original, or you could do some additional parsing, and make the tweet something like this:

<a href="http://twitter.com/UserA/statuses/1234567890"&gt;
Hi </a><a href="http://twitter.com/UserA"&gt;@UserA&lt;/a&gt;, <a href="http://twitter.com/UserA/statuses/1234567890"&gt;check out the song
Foo from FooBar that I'm listening, it's awesome.</a>
<a href="http://twitter.com/#search?q=nowplaying"&gt;#nowplaying&lt;/a&gt;

this way every word that's not a link will be a link to the original status, but I don't know if that's your best option.

Answer 3

I'd use JavaScript for the global link. If you have a bullet or something before the message, put the link there and activate it with JavaScript when the message is clicked (that link will serve as a link for users with no JS support)

If you need to have the entire thing clickable even without JS, you'll need to split it into multiple links, which cover things between content links.