iframestumbleupon

How can I create a custom StumbleUpon button?

StumbleUpon publishes a Widget script, and documents how to use it to insert a stumbleUpon button (they call it a badge), into a website.

You can generate the markup for a button with their online tool. It looks like this: 

<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2" location="http://example.com"></su:badge>

<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
  (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);
  })();
</script>

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 <su:badge> elements and replacing them with iframes. The iframes themselves then get their source content from stumbleupon, at a URL like this: http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com .

The iframe renders visually like this: enter image description here

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.

I'm trying to make the Stumbleupon widget look like a button. I'm pretty sure this is possible. For example, mashable does it (example). Here's what it looks like:

enter image description here

As you can see, the stumbleupon button looks like a button. It's not a badge. Mashable is not using the su:badge thing - they have rendered their own <a> tag, and styled it.

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:

http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever HTTP/1.1

The iframe uses javascript's window.open to request that, and restricts the resizing and so on. This is how it works on mashable. The resulting window looks like this:

enter image description here

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.

But when I try the same thing from my page, the little fixed window gets a 302 redirect from StumbleUpon, and then another 302, which eventually points it to

http://www.stumbleupon.com/submit/visitor

...which does not allow sharing of the link.

This has been a long story, but:
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?

What is mashable's secret?

Solution

  • ok here's what I found.

    The 302's that eventually pointed me to /submit/visitor happen when both of the following are true:

    When that happens, stumbleupon invites you (the user) to login. It won't take you just to the "submit url" page.

    If the user is not logged in, but the article HAS been submitted previously, then it takes you to the submit window without a 302. Eventually you will be asked to login, if you proceed with the submission. But the first view of the stumbleupn website in this case gives you a visual indication that you are submitting something.

    If the user is logged in, and the article has not been submitted previously, then you get taken right to the submit page.

    So I was doing nothing wrong. I just needed to login the first time. This is just an artifact of the user experience offered by StumbleUpon. In my opinion it's sort of strange. It's surprising and therefore wrong. But that's just my opinion.