如何创建自定义StumbleUpon按钮？

Question

StumbleUpon发布了Widget script和documents如何使用它将stumbleUpon按钮（他们称之为徽章）插入网站。

您可以为their online tool的按钮生成标记。它看起来像这样：

<!-- 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来实现。然后，iframe会自己从stumbleupon获取源内容，网址如下：http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com。

iframe在视觉上呈现如下：

stumbleupon按钮是第二个。我展示了其他的比较。 如您所见，StumbleUpon渲染看起来与其他所有人不同。 SU使他们的按钮看起来像一个“徽章”，而每个其他社交分享小部件看起来像......呃....一个按钮。

---

我正在尝试让Stumbleupon小部件看起来像一个按钮。我很确定这是可能的。例如，mashable执行它（example）。这是它的样子：

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

视觉渲染不是问题;我可以弄清楚如何使跨度看起来像一个按钮，没问题。单击标签或跨度时会出现问题。在我看来，使用StumbleUpon使用的iframe，它会调用此URL来提交页面进行共享：

  

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

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

这也是可混搭页面的功能，但它不使用iframe。 Mashable页面包含javascript，它只是直接从主mashable页面中打开“stumbleupon submit”窗口。

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

  

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

...不允许共享链接。

这是一个很长的故事，但是：
有没有人知道我如何说服StumbleUpon让我通过iframe中未包含的按钮分享链接或网址？

什么是mashable的秘密？

Answer 1

好的，这就是我找到的。

当以下两种情况都成立时，最终指向/ submit / visitor的302会发生：

• 用户未登录
• 这篇文章之前没有发现过磕磕绊绊

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

如果用户未登录，但文章已经提交过，那么它会将您带到没有302的提交窗口。最后，如果您继续提交，将会要求您登录。但在这种情况下，stumbleupn网站的第一个视图为您提供了一个视觉指示，表明您正在提交某些内容。

如果用户已登录，并且之前未提交该文章，则您将直接进入提交页面。

---

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