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

Question

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

使用此处提供的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加载位置，而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/，但我从未用徽章测试过它。