如何创建自定义StumbleUpon按钮？

Question

StumbleUpon发布一个小部件脚本，文档如何使用它将一个stumbleUpon按钮(他们称之为徽章)插入到网站中。

您可以使用他们的在线工具为按钮生成标记。看起来是这样的：

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

该脚本元素只是延迟加载widgets.js的一种方法。从它的角度来看，我认为它的工作方式是扫描文档中的<su:badge>元素并将它们替换为iframes。iframes本身从stumbleupon获取它们的源内容，网址如下：http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com。

iframe的视觉呈现方式如下：

​

stumbleupon按钮是第二个按钮。我把其他的拿出来比较。正如您所看到的，StumbleUpon呈现看起来与所有其他人不同。苏使他们的按钮看起来像一个“徽章”，而其他社会分享小部件看起来像like...uh.一个按钮。

我试图使Stumbleupon小部件看起来像一个按钮。我很确定这是可能的。例如，mashable做它(示例)。看上去是这样的：

​

​

如您所见，stumbleupon按钮看起来像一个按钮。这不是警徽。Mashable没有使用su:badge --他们已经呈现了自己的<a>标记，并对其进行了样式化。

视觉渲染不是一个问题；我可以弄清楚如何使span看起来像一个按钮，没有问题。当我单击标记或span时，问题就会发生。在我看来，对于StumbleUpon使用的iframe东西，它调用这个URL来提交一个用于共享的页面：

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

iframe使用javascript的window.open来请求它，并限制调整大小等。这就是它是如何在mashable上工作的。生成的窗口如下所示：

​

​

这也是mashable页面所做的，尽管它不使用iframe。Mashable页面包含javascript，它直接从主mashable页面中打开"stumbleupon“窗口。

但是，当我从我的页面尝试相同的事情时，这个小固定窗口从StumbleUpon获得302重定向，然后再从另一个302重定向，这最终指向

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

...which不允许共享链接。

这是一个很长的故事，但是：

有没有人知道我如何说服StumbleUpon让我从一个不包含在iframe?中的按钮中共享一个链接或URL？

的秘密是什么？

Answer 1

好的，这是我发现的。

当下列两种情况都为真时，302才最终指示我提交/提交/访问者：

• 用户未登录。
• 这篇文章以前并没有在stumbleupon中被绊倒。

当发生这种情况时，stumbleupon会邀请您(用户)登录。它不会只带你去“提交网址”页面。

如果用户没有登录，但文章已经提交过，那么它将带您到submit窗口，而不需要302。最终，如果您继续提交，您将被要求登录。但是，在这种情况下，stumbleupn网站的第一个视图会给您一个直观的指示，说明您正在提交一些内容。

如果用户已登录，且该文章之前未提交，则您将被直接带到submit页面。

所以我没做错什么。我只需要第一次登录。这只是StumbleUpon提供的用户体验的一个工件。在我看来这有点奇怪。这是令人惊讶的，因此是错误的。但这只是我的意见。