在Twitter的关注按钮中隐藏“关注者”一词

Question

Twitter建议使用以下代码在您的网站上呈现“关注”按钮。

<a href="https://twitter.com/twitter" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-dnt="true" data-show-count="true"></a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"> 
</script>

该按钮显示一个用户名，后跟一个带有关注者计数的气泡和单词“关注者”。

我想通过删除单词“ followers”来简化按钮。在7年前，有一个CSS solution，其中涉及到使用overflow:hidden，然后绘制一个伪造的边界，将气泡切掉。但是，如该答案的注释中所述，该解决方案效果不佳。

今天有没有更优雅的解决方案？ CSS最好，但是JavaScript / jQuery也可以接受。

Answer 1

不幸的是，我认为您要实现的目标没有实用的解决方案。

由于Twitter小部件会生成iFrame，因此您无能为力。原因是Same-origin policy。除非将iFrame的内容托管在同一域中，否则您无法访问或修改其内容（这是一件好事，因为它可以防止许多跨站点利用本来可能的利用）。

另一种方法可能是在不显示关注者人数的情况下显示小部件，并使用单独的Twitter API添加您自己的关注者人数。

编辑：为完整起见，this page列举了您可以传递给小部件API的参数。在撰写本文时，除“ show_count”外，似乎没有其他与显示的关注者人数相关的参数。

Answer 2

我建议您执行以下操作：

• 首先，添加follow按钮，如下所示：

<iframe
  src="//platform.twitter.com/widgets/follow_button.html"
  style="width: 88px; height: 20px;"
  allowtransparency="true"
  frameborder="0"
  scrolling="no">
</iframe>

• 第二，使用 Twitter API documentation 并使用其端点 GET followers/list 显示不带单词的关注者人数。