在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”。

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

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

Answer 1

我建议您执行以下操作：

• First，像这样添加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显示不带单词的关注者计数数字。

Answer 2

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

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

另一种方法可能是不显示关注者数量而显示窗口小部件，并使用单独的Twitter API添加您自己的关注者数量。

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