如何嵌入自动填充当前 URL 的 Twitter 按钮？答案

【问题标题】：How do I embed a Twitter button that auto-populates the current URL?如何嵌入自动填充当前 URL 的 Twitter 按钮？
【发布时间】：2022-10-23 20:00:07
【问题描述】：

我正在尝试嵌入一个 Twitter 按钮，该按钮会自动填充到当前页面的链接（如 JS 中的window.location.href）。以下代码来自 publish.twitter.com，它会拉入域但不是完整的 URL。有没有办法破解它？

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
  class="twitter-share-button" 
  data-size="large" 
  data-text="This is a tweet!" 
  data-via="ElonMusk" 
  data-hashtags="something" 
  data-lang="en" 
  data-dnt="true" 
  data-show-count="false">Tweet</a>

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

【问题讨论】：

您尝试过什么来解决问题？你被困在哪里了？为什么不添加任何你想要的链接？
@NicoHaase 该链接应该是动态的，具体取决于 Twitter 按钮出现的页面。
如果您使用window.location.href，那应该不是问题
@NicoHaase 它会在代码中的什么位置？
“它会去哪里”是什么意思？您如何将静态 URL 添加到给定的链接？

标签： javascript twitter

【解决方案1】：

简短的回答 - 只需按照文档

Twitter 小部件脚本会自动将当前页面的绝对 URL 添加到推文中。它还添加了<title> 设置的页面标题。然而，data-url 和data-text 属性可以添加到按钮以使用默认值以外的值。我已经验证这可以按预期工作。

由于 OP 要求使用默认值，因此不需要更改 html 或脚本。该按钮将在放置它的任何页面上自动配置。换句话说，没做什么.

编码

该代码不会作为 sn-p (iframe) 运行，但在普通页面上，此标记会生成蓝色 Twitter 按钮。请注意，url 和 text 属性为空。此外，OP 的代码使用不同的 href，但这并不重要，因为小部件脚本会将其替换为 /intent/tweet url。

<a class="twitter-share-button"
    href="https://twitter.com/intent/tweet"
    data-size="large"
    data-text=""
    data-url=""
    data-hashtags="example,demo"
    data-via="twitterdev"
    data-related="twitterapi,twitter">Tweet
</a>

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

【讨论】：