title: Rendering the Tweet button on a non-anchor element
body: <p>I have an anchor that encompasses various elements, as it makes it touch friendly and is valid html5:</p>
  
  <pre><code>&lt;a href="whatever.html"&gt;
     &lt;h2&gt;Title&lt;/h2&gt;
     &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Now, I want to add a Tweet button to this anchor. However, nesting anchors is invalid in html5. So this will render the Twitter iframe outside the anchor:</p>
  
  <pre><code>&lt;a href="whatever.html"&gt;
     &lt;h2&gt;Title&lt;/h2&gt;
     &lt;p&gt;Paragraph&lt;/p&gt;
     &lt;a href="https://twitter.com/share" class="twitter-share-button"&gt;...&lt;/a&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And if I change the markup to say something like this it won't render the button:</p>
  
  <pre><code>&lt;a href="whatever.html"&gt;
     &lt;h2&gt;Title&lt;/h2&gt;
     &lt;p&gt;Paragraph&lt;/p&gt;
     &lt;div class="twitter-share-button"&gt;...&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The facebook like button renders fine as it doesn't require an anchor element to work. Anybody know a workaround for Twitter? Here is the jsfiddle: <a href="http://jsfiddle.net/xdEwg/" rel="nofollow">http://jsfiddle.net/xdEwg/</a></p>