如何在 HTTPS 网站上使用 Stumbleupon 徽章？

Question

我正在尝试将 Stumbleupon 徽章添加到我们的网站，尽管 Stumbleupon 的 CSS 似乎不支持 HTTPS。

使用此处找到的 Stumbleupon 发现工具，我选择了任何徽章： https://www.stumbleupon.com/dt/badges/create

然后我会提供如下所示的徽章代码：

<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2"></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:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

尝试加载此代码时，它会将徽章显示为非样式化列表。 通过研究代码，加载的 JavaScript 文件似乎调用了调用此文件的 CSS 加载位置： http://cdn.stumble-upon.com/css/badges_su.css?v=20120613

由于 JavaScript 文件是外部的，它不提供将 CSS 强制为 HTTPS 的能力。

由于我们在 https:// 上加载我们的网站，因此从 http:// 加载的任何文件都会在不允许混合内容的浏览器上自动被阻止。

我已经联系了 Stumbleupon，他们显然已经意识到了这个问题，并且不打算解决它。 （他们似乎不想设置 SSL）

有没有其他人遇到过这种与徽章混合内容的问题，如果有，有没有人找到解决方法？ （更喜欢代码解析而不是插件）

Answer 1

我使用的是支持 HTTPS 的链接缩短器，例如 https://goo.gl/ ，但我从未使用徽章测试过。