Like many, I use FeedBurner to handle the RSS feeds for this blog, which gives me the benefit of all of FB's special features, including detailed statistics on my feed's usage.
I also make use of its email subscription service to allow people not familiar with feed technology to subscribe to the blog and have updates delivered to their inbox (Publicise > Email Subscriptions in your FeedBurner account).
My recent redesign means that my pages are now served as XHTML 1.1, rather than 1.0 Transitional*.
The code that I use in the sidebar to show the email subscription box (the code provided by FeedBurner) won't validate under XHTML 1.1, though, which annoyed me. So, I fixed it.
You may wonder why anyone in their right mind would care if a little snippet of code doesn't quite validate, since it doesn't make any user-visible difference. Aesthetics are one reason and also some mobile browsers can be really fussy about validation.
So here's how to use my fixed code if you want to have the email subscribe feature - but also have valid XHTML 1.1 markup.
First of all, log in to FeedBurner, click the relevant feed and go to Publicise > Email Subscriptions. Under Subscription Management, there should be a box with the default code, which should be something like this (line breaks added by me for readability):
-
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
-
<p>Enter your email address:</p>
-
<input type="hidden" value="http://feeds.feedburner.com/~e?ffid=xxxxx" name="url"/>
-
<input type="hidden" value="[[Name of the feed here]]" name="title"/>
-
<input type="hidden" name="loc" value="en_US"/>
-
<input type="submit" value="Subscribe" />
-
</form>
xxxxx and [[Name of the feed here]] will obviously be specific to your feed's ID and name.
The problem with this in XHTML 1.1 is the use of the 'target' attribute on the form to redirect the form posting into a pop-up window, since 'target' is not allowed.
You don't need to actually POST this form, though. If you load http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxx&email=theusers@email.address via GET, the rest of the subscription process works just as it is meant to.
Because we can do it via GET, we don't need to do the POST-to-a-popup voodoo.
Therefore, I change the first line of that code snippet to the following:
-
<form style="border:1px solid #ccc;padding:3px;text-align:center;" method="post" action="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxx" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxx&email=' + encodeURI(document.getElementById('feedburner-sub-email').value), 'feedburner-sub-window', 'scrollbars=yes,width=550,height=520'); return false;">
Again, replace xxxxx here (in both places) with the feed ID from your original snippet.
I also need to edit the email address input field, to give it an ID (feedburner-sub-email), so that I can refer to it in the JavaScript.
And that's it. It should now validate as XHTML 1.1, but have the same functionality. If JavaScript is off in the client, it will still work - by loading it in the main window. Graceful degradation is win.
You might notice that on my blog, my snippet actually differs even more from what I've just told you. It still works in the same way, avoiding the POST-to-a-popup fun, but I've modified some of the styles for brevity and so they integrate with my CSS and moved the JavaScript out into an external file. Just in case you were curious as to why I'm not following my own tutorial letter-for-letter!
* Yes, I serve them as text/html and that's bad. I know I'm doing this and I don't particularly care.
I also know that the blog pages probably don't validate as XHTML 1.1. I don't care about that either. I want my template to be valid, but don't much mind if content (YouTube embeds are one culprit) breaks the W3C recommendations.
Thank you very much for sharing this tip!
It works pretty well in Strict 1.0, too, except you have to replace the “&” by “&”.
- Can you edit my previous message, please? The HTML code for “&” has been implented!
I meant replace “&” by:
&Thanks!
Still not working, well, you can delete my messages if you want -_-;
I know what you mean - replace & with & (you have to type it twice to show it up here in the comments, like &amp;!)
Where do I need to replace it? I can’t spot anywhere (other than in JavaScript, where I think it’s OK to do so) where I’ve used a straight &.
Hi Peter, thanks for your email and reply! Sorry for the mess
In your code there’s a straight & in the following line:
onsubmit=”window.open(’http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxx&email=’
…juste before “email=”.
I wouldn’t have paied attention to this until the W3 validator hit my fingers! lol
This way you have the valid code for 1.0, too.
Take care!*
Ah, I was under the impression that didn’t count, as it’s inside JavaScript code.
Apparently not! Because on my blog I moved that code outside of onsubmit and into an include file (the same code, just put elsewhere), W3C didn’t pick it up on my blog.
Have updated my post. Thanks again for the correction!