Duplicate 'follow button' issue (resolved, posted for future reference)

[eckersalld]

I had a curious issue where I’m attaching a ‘follow’ button for a site redesign us the anchor tag with a class of ‘twitter-follow-button’ - however when I then wrap a span tag around that, a duplicate button appears…

A bit of experientation indicated the issue was using a self-closing anchor tag! The page doctype was HTML, haven’t tried it with other doctypes for comparison.

As I couldn’t find any posts on this issue, I thought I’d create one for future reference and for anyone else who may find themselves engaging in a bit of head scratching over it.

Here’s how to duplicate it:

//previous content
<div><a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" /></div>
//further content

Yet this works fine:

//previous content
<div><a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a></div>
//further content

[kurrik]

Odd, although that’s not entirely unexpected - I don’t believe self closing anchors are valid. Browsers can be arbitrary about what malformed syntax they support, self-closing <script> tags cause lots of issues, for example.

[niall]

[niall]