javascript - 创建共享当前页面 url 的自定义社交共享图标

Question

我正在尝试开发一个具有社交共享按钮的小部件，单击时应将当前页面的 url 共享到相应的社交媒体网站。例如，我尝试从此处嵌入 twitter 分享按钮，并将以下代码粘贴到我的 html 中：

   <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"  data-url="https://www.google.com" data-show-count="false"></a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8">

但我不希望我的按钮看起来那样，我通过更改标签的类名修改了按钮的样式，外观发生了变化，但按钮不工作，它应该工作。它会打开一个 Twitter 页面，如下所示：

我想保留 twitter 分享图标的功能，但也想改变按钮的样式。点击分享时，它应该看起来像：

Answer 1

Twitters url 接受许多参数，这些参数会改变共享页面的外观：

https://twitter.com/intent/tweet?hashtags=demo
    &original_referer=https%3A%2F%2Fdeveloper.twitter.com%2Fen%2Fdocs%2Ftwitter-for-websites%2Ftweet-button%2Foverview
    &ref_src=twsrc%5Etfw
    &related=twitterapi%2Ctwitter
    &text=Hello%20world
    &tw_p=tweetbutton
    &url=https%3A%2F%2Fexample.com%2Ffoo
    &via=twitterdev

看起来你想使用url参数。

https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Ffoo

来自https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview