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

Posted 2023-03-28

【中文标题】在 Twitter 的关注按钮中隐藏“关注者”一词

【英文标题】：Hide the word "followers" in Twitter's follow button

【发布时间】：2020-02-01 06:05:06

【问题描述】：

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>

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

我想通过删除“关注者”一词来简化按钮。 7年前有一个CSS solution，涉及使用overflow:hidden，然后在气泡被切断的地方画一个假边框。但是，如该答案的 cmets 中所述，该解决方案效果不佳。

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

【问题讨论】：

出于好奇，如果将data-show-count 更改为false 会发生什么？

我想在最坏的情况下，您可以在该小部件加载后调用一个函数并执行标准的 javascript dom hackery。不过，似乎应该有一些 OOTB 配置设置。

@PhilipStratford 它隐藏了整个气泡

@mwilson 这就是我的想法，因为没有官方设置。你想提供这个作为答案吗？

你是在建议杀死整个弹出窗口吗？我只是想删除“追随者”这个词。关注者数量很有用。

【参考方案1】：

很遗憾，我认为没有实用的解决方案可以解决您想要完成的任务。

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

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

编辑：为了完整起见，this page 列举了您可以传递给小部件 API 的参数。在发布这篇文章时，除了“show_count”之外似乎没有任何参数与显示的关注者数量相关。

【讨论】：

执行并加载远程代码后，它会成为您的网站访问者在其浏览器中查看的最终 html 的一部分。使用 JavaScript 或其他方式从最终视图中破解文本字符串是不可能的？

@KnocksX iFrame 的内容不属于主机页面。 iFrame 在许多方面被您的浏览器视为一个单独的选项卡（以至于 chrome 完全支持 out of process iframes）。不允许父页面访问或修改 iFrame 的内容，除非来源相同，即使在父页面呈现之后也是如此。 This question 有点相关，得出了类似的结论。

谢谢，我同意我已经考虑过了。尝试驯服具有自己尺寸的狂野 Google 广告的类似问题，无论容器 div 的规则如何，甚至不尊重 !important。

【参考方案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

来显示没有单词的关注者计数。