Skip to content

XHTML 1.1 Compliant Feedburner Email Subscribe

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

[html]

Enter your email address:




Delivered by FeedBurner

[/html]

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:

[html]

[/html]

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.

[html num=3]

[/html]

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.

Like this post?

If you would like to support the time and effort I have put into my tutorials and writing, please consider making a donation.

12 Comments

  1. kReEsTaL wrote:

    Thank you very much for sharing this tip! 😉

    It works pretty well in Strict 1.0, too, except you have to replace the “&” by “&”.

    Friday, September 12, 2008 at 00:21 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.1 on Windows Windows XP
  2. kReEsTaL wrote:

    – Can you edit my previous message, please? The HTML code for “&” has been implented!

    I meant replace “&” by:

    &

    Thanks!

    Friday, September 12, 2008 at 00:22 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.1 on Windows Windows XP
  3. kReEsTaL wrote:

    Still not working, well, you can delete my messages if you want -_-;

    Friday, September 12, 2008 at 00:23 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.1 on Windows Windows XP
  4. Peter wrote:

    I know what you mean – replace & with & (you have to type it twice to show it up here in the comments, like &!)

    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 &.

    Friday, September 12, 2008 at 07:16 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.1 on Mac OS X Mac OS X 10
  5. kReEsTaL wrote:

    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!*

    Friday, September 12, 2008 at 08:30 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.1 on Windows Windows XP
  6. Peter wrote:

    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!

    Friday, September 12, 2008 at 08:36 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.1 on Mac OS X Mac OS X 10
  7. kristarella wrote:

    Thanks for sharing! Much appreciated as I try to validate for XHTML 1.0 Strict 🙂

    Friday, November 28, 2008 at 02:37 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.4 on Mac OS X Mac OS X 10
  8. dani wrote:

    Hi, Peter.
    Looking for this code for a while. But, I’ll try it later.

    I’d like to know the reason why you chose the doctype XHTML 1.1? 🙂

    Wednesday, June 17, 2009 at 09:21 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.11 on Gentoo Linux Gentoo Linux
  9. Peter wrote:

    dani,

    I was building a new design for the site essentially from the ground up, so I picked the most recent iteration of XHTML to build it to.

    It doesn’t make much difference, but I had been using XHTML 1.0 Transitional which allows certain tags which are somewhat archaic and take away from that warm, fuzzy feeling that you have a nice clean, modern, (erm… mostly?) compliant design.

    Wednesday, June 17, 2009 at 18:46 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.11 on Mac OS X Mac OS X 10
  10. James Murphy wrote:

    Great post Peter.

    I’m setting up a new blog with Squarespace and trying to stick to XHTML 1.0 Strict.

    I had some problems with your suggested changes at first, until I realised that FeedBurner have changed their URL for the email form since you posted this.

    There are a few changes to the URL as follows:

    Old: http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxx

    New: http://feedburner.google.com/fb/a/mailverify?uri=MyFeedName

    This is the validated XHTML 1.0 Strict code I implemented today on our blog and it’s working fine:

    (You’ll need to replace all instances of ‘MyFeedName’ — http://feeds.feedburner.com/MyFeedName)

    Subscribe to Email:

    Cheers

    James

    Sunday, August 30, 2009 at 01:04 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.5.2 on Mac OS X Mac OS X 10
  11. Ashfame wrote:

    Hi Peter,
    Your method is not fully working for me.
    1 error ->

    document type does not allow element X here; missing one of Y start-tag ✉
    The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

    One possible cause for this message is that you have attempted to put a block-level element (such as “” or “”) inside an inline element (such as “<a>”, “”, or “”).

    Line 403, column 368: document type does not allow element “form” here; missing one of “object”, “applet”, “map”, “iframe”, “ins”, “del” start-tag
    …’feedburner-sub-window’, ‘scrollbars=yes,width=550,height=520’); return false”>

    Sunday, March 14, 2010 at 19:29 | Permalink | Using Google Chrome Google Chrome 4.0.249.89 on Windows Windows 7
  12. Peter wrote:

    Ashfame,

    Try wrapping the <form> tag in a <p>?

    I have to admit that when I did this I did manage to get it to validate if I recall. If you can confirm that the above fixes the validation error, I shall update this post.

    Saturday, March 20, 2010 at 21:18 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6 on Mac OS X Mac OS X 10

One Trackback/Pingback

  1. Codul valid XHTML 1.1 STRICT pentru FeedBurner on Tuesday, August 3, 2010 at 17:06

    […] căutat pe Google, dar tot ce am găsit a fost un articol din urmă cu doi ani (semnat Peter Upfold) care nu a oferit o soluÅ£ie, însă mi-a arătat calea ce trebuie […]

Post a Comment

On some sites, you must be logged in to post a comment. This is not the case on this site.
Your email address is not made public or shared. Required fields are marked with *.
*
*
*

Posting a comment signifies you accept the privacy policy.
Please note — usually your comment will appear straight away but sometimes it will be held for approval (this is due to the spam filter). If your comment is waiting to be approved, please don’t post it again! It will appear eventually.