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

【问题标题】：Create custom social share icons which share current page url创建共享当前页面 url 的自定义社交共享图标
【发布时间】：2020-03-24 15:56:24
【问题描述】：

我正在尝试开发一个小部件，该小部件在单击时具有社交分享按钮，应将当前页面的 url 分享到相应的社交媒体网站。例如，我尝试嵌入来自 here 的 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 分享图标的功能，同时改变按钮的样式。点击分享时，它应该看起来像：

【问题讨论】：

使用 javascripts window.open() 可以设置窗口尺寸。 developer.mozilla.org/en-US/docs/Web/API/Window/open
好的，假设我打开了 window ，但是如何像 image2 一样共享内容？在新标签中打开一个窗口就像 image1。我希望它与第二张图片相似。
那你需要指定那个链接：twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Ffoo

标签： javascript html css web-frontend socialsharing-plugin

【解决方案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

【讨论】：