title: How can I create a custom StumbleUpon button?
body: <p>StumbleUpon publishes a <a href="https://platform.stumbleupon.com/1/widgets.js" rel="nofollow noreferrer">Widget script</a>, and <a href="http://www.stumbleupon.com/help/business-tools/badges#article4" rel="nofollow noreferrer">documents</a> how to use it to insert a stumbleUpon button (they call it a <em>badge</em>), into a website. </p>
  
  <p>You can generate the markup for a button with <a href="http://www.stumbleupon.com/dt/badges/create" rel="nofollow noreferrer">their online tool</a>.  It looks like this: </p>
  
  <pre><code>&lt;!-- Place this tag where you want the su badge to render --&gt;
  &lt;su:badge layout="2" location="http://example.com"&gt;&lt;/su:badge&gt;
  
  &lt;!-- Place this snippet wherever appropriate --&gt;
  &lt;script type="text/javascript"&gt;
    (function() {
      var li = document.createElement('script');
      li.type = 'text/javascript';
      li.async = true;
      li.src = 'https://platform.stumbleupon.com/1/widgets.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(li, s);
    })();
  &lt;/script&gt;
  </code></pre>
  
  <p>That script element is just a way to delay-load the widgets.js thing.  Just from looking at it, I suppose that it works by scanning the document for the <code>&lt;su:badge&gt;</code> elements and replacing them with <code>iframes</code>.  The iframes themselves then get their source content from stumbleupon, at a URL like this: <code>http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com</code> .</p>
  
  <p>The iframe renders visually like this: 
  <img src="https://i.stack.imgur.com/IgvoD.png" alt="enter image description here"></p>
  
  <p>The stumbleupon button is the 2nd one.  I show the other ones for comparison. 
  As you can see, the StumbleUpon rendering looks different than all the other guys.  SU makes their button look like a "badge" while every other social share widget looks like...uh.... a button. </p>
  
  <hr>
  
  <p>I'm trying to make the Stumbleupon widget look like a button.   I'm pretty sure this is possible. For example, mashable does it (<a href="http://mashable.com/2011/02/27/facebook-like-button-takes-over-share-button-functionality/" rel="nofollow noreferrer">example</a>). Here's what it looks like: </p>
  
  <p><img src="https://i.stack.imgur.com/c8Szp.png" alt="enter image description here"></p>
  
  <p>As you can see, the stumbleupon button looks like a button. It's not a badge. Mashable is not using the <code>su:badge</code> thing - they have rendered their own <code>&lt;a&gt;</code> tag, and styled it.  </p>
  
  <p>The visual rendering is not a problem; I can figure out how to make a span look like a button, no problem. The problem happens when I click the tag or span. It appears to me that, with the iframe-thing that StumbleUpon uses, it invokes this URL to submit a page for sharing: </p>
  
  <blockquote>
    <p><a href="http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever" rel="nofollow noreferrer">http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever</a> HTTP/1.1</p>
  </blockquote>
  
  <p>The iframe uses javascript's <code>window.open</code> to request that, and restricts the resizing and so on.  This is how it works on mashable.  The resulting window looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/XS1yk.png" alt="enter image description here"></p>
  
  <p>This is also what the mashable page does, though it does not use the iframe.  The Mashable page contains javascript that just opens the "stumbleupon submit" window directly from within the main mashable page.  </p>
  
  <p>But when I try the same thing from <em>my</em> page, the little fixed window gets a 302 redirect from StumbleUpon, and then another 302, which eventually points it to  </p>
  
  <blockquote>
    <p><a href="http://www.stumbleupon.com/submit/visitor" rel="nofollow noreferrer">http://www.stumbleupon.com/submit/visitor</a> </p>
  </blockquote>
  
  <p>...which does not allow sharing of the link. </p>
  
  <p>This has been a long story, but:<br>
  <strong>does anyone have any insight as to how I can convince StumbleUpon to let me share a link or URL, from a button that is not contained within an iframe?</strong></p>
  
  <p>What is mashable's secret? </p>