在前端开发中，我们肯定经常需要在网页中加入社交分享功能。很多人对此都是自己写一段分享代码，但其实我们可以使用现成的 npm 包来快速地实现这个功能。今天，我们要介绍的就是一个非常好用的分享 npm 包：@jhopley/share-that。
简介
@jhopley/share-that 是一个轻量级的社交分享工具库，它支持在您的网页上加入 Facebook、Twitter、LinkedIn、Reddit、WhatsApp 和电子邮件等社交媒体的公开分享按钮。它是一个易于使用的分享插件，可以为您的网站添加通用 API。
安装
在使用 @jhopley/share-that 之前，需要先安装它。我们可以使用 npm 进行安装：
npm install @jhopley/share-that
如果您不想使用 npm，您还可以在 GitHub 上下载源码。
使用
@jhopley/share-that 的使用非常简单，只需要引入库和添加类名即可。以下是一个示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ---- --------------- ----- -------- ---- --------------------- --- ------ ------------------- ----------------------------------------- ------ ------------------------- ------------- -- -- ---------- ------ ----------------- ------------------------------ ------- ------ ------------ -- ----- ---- ------------ ----- --------------------- ---- ------------------------- -- ------------ ---- ------------------------ -- ----------- ---- ------------------------- -- ------------ ---- ----------------------- -- ---------- ---- ------------------------- -- ------------ ---- ---------------------- -------- ------- ----- -- ----- ---- - --- -------- ------------------------------------------------------------------------- ----- -- ----- ---- -- --- ------ ---------------- ------------------------------------------------------------------ ------- -------
这里我们定义了一个包含分享按钮的 div，每个按钮都有一个类名 st-facebook、st-twitter 等等。然后我们在页面底部引入 @jhopley/share-that 的库文件和样式文件。
现在我们打开浏览器并访问该页面。当用户单击某个共享按钮时，将打开分享 URL 并在新标签页中显示共享页面。
详解
下面我们将深入了解一下分享按钮的使用方法。
基础部分
在 Share That 中，每个分享按钮都由一个类名来标识。例如，st-facebook 类名标识 Facebook 共享按钮，st-twitter 类名标识 Twitter 共享按钮等等。您可以在按钮上增加数据属性，以定义自己的分享 URL、分享标题和分享描述等元数据。例如：
<a class="st-facebook" data-url="http://example.com" data-title="My Website" data-description="This is my website.">Share on Facebook</a>
这样在用户单击共享按钮之后，他们将在 Facebook 上看到 My Website，自定义分享链接和描述。
改变图标样式
Share That 默认显示社交平台的标志性颜色；即 Facebook 按钮主色是蓝色，Twitter 按钮主色是蓝色，LinkedIn 按钮主色是蓝色等等。但是，您可以通过在共享按钮上添加额外的类名来改变按钮外观。例如，如果您想将 Facebook 按钮变成紫色，则可以这样做：
<a class="st-facebook st-custom-color">Share on Facebook</a>
.st-custom-color.st-facebook:before {
color: purple;
}定义新的分享平台
如果您需要添加一个新的分享平台，例如 Instagram，您可以这样做：
- 创建一个新类名，例如 st-instagram。
- 在您的分享按钮上添加这个新类名。例如：
<a class="st-instagram" data-url="http://example.com/myimage.jpg" data-title="My Picture">Share on Instagram</a>
- 在 Share That CSS 文件中添加新类名。例如：
.st-instagram:before {
content: '\f16d'; /* Unicode Font Awesome icon code for Instagram */
color: #405DE6;
}- 在 Share That JavaScript 文件中添加新代码。例如：
// 在 ShareThat.prototype.buildServices 函数中添加 case 'st-instagram': url = 'https://www.instagram.com/?url=' + encodeURIComponent(shareUrl); title = ''; break;
现在，分享按钮就已经被添加了 Instagram。
小结
在本文中，我们介绍了如何使用 @jhopley/share-that 来实现社交分享功能。我们讲解了如何安装和使用此库，并提供了示例代码，以及改变按钮样式和添加自定义平台的方法。这个库非常小巧而易于使用，您可以很容易地在您的网站上添加各种社交分享按钮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e244316